Media Optimization

Media Optimization gives developers and admins control over image output on the storefront, including resizing, compression, and conversion to modern formats such as WebP and AVIF. The goal is to serve images that are as small as possible, in both dimensions and file size, to improve storefront performance.

What Media Optimization Does

Media Optimization offers three main capabilities:

1. A developer-friendly API to resize and convert images in your own block and template output.
2. Default implementations that use that API, such as in Hyvä CMS components.
3. An observer that scans all block output on a page and automatically replaces images in HTML or CSS with optimized versions.

A bin/magento CLI command removes generated images by path, and a wide range of configuration options in the Magento admin control the engine, output formats, replacement modes, and quality settings.

Installing Media Optimization

Ready to get started? Follow Installing Media Optimization to add it to your Magento store.

More Information

• Configuration: system check, image and replacement settings, viewport breakpoints, and engine settings.
• Automatic Image Replacement: replace images across HTML and CSS automatically.
• Image Processing Engines: GD and Imagick, format support, and performance tuning.
• Hyvä CMS Integration: which built-in Hyvä CMS component images are optimized.
• Flushing Generated Images: the CLI command for removing generated images.
• Developer API: output optimized responsive <picture> elements from your templates.