Appearance

Image Resizer Extension Benefits ​

The Image Resizer resizes, crops and converts images at render time, and builds the responsive <picture> markup around them: one source per breakpoint tier, WebP and AVIF conversions, and retina candidates. The overview covers the API, the admin fields and the cache behaviour.

Feature list ​

Sizing and cropping

  • Width, height, or either one alone, with aspect ratio, upscaling and framing set per call or per view.xml image role
  • object_fit_cover, which crops to fill the box the way the CSS property does
  • Rotation, background colour, and transparency kept for sources that have an alpha channel
  • Watermarks with position, size and opacity, or the catalog's own watermark settings
  • A placeholder image when the source file is missing

Formats and quality

  • WebP for every rendition, AVIF when enabled per store, each with its own quality setting
  • WebP and AVIF encoded in one pass from the resized bitmap rather than from a saved JPEG, so the conversion adds no second round of lossy compression
  • Quality resolved from the call, the view.xml role, the admin setting, or the catalog configuration

Responsive markup

  • Mobile, tablet and desktop sources, with breakpoints passed by the template instead of fixed
  • Retina variants at the device pixel ratios set in admin, up to four of them, 2 by default
  • AVIF sources listed before WebP, so an AVIF-capable browser takes them and the rest fall through
  • getResponsiveSources() returns the same tiers as an array, for rebuilding sources client-side after a swatch swap
  • getResponsiveSourcesWithWidths() describes candidates by the width each rendition was written at, instead of by density

Caching and pre-generation

  • Renditions written once under pub/media/image_resizer/cache, with the paths held in Magento cache
  • Cache cleared from System > Cache Management, behind its own ACL resource for a restricted admin role
  • catalog:images:pregenerate warms every registered image source, inline or through the message queue
  • A rendition that is not on disk answers 404 rather than the product placeholder as a 200

Generation load

  • Each decoded bitmap is freed once the encodes for its rendition are done
  • AVIF generation can be deferred to the message queue when the host is short on memory, with the page serving WebP until the consumer has written the file
  • The consumer postpones a job while host MemAvailable is under the configured floor
  • Encoder speed and a separate switch for scaled AVIF variants bound the work per image

Key benefits ​

Fewer bytes per image ​

AVIF files run 20 to 50 percent smaller than WebP at the same visual quality, and every tier offers AVIF before WebP, so browsers that support it download less. Scaled candidates are capped against the source, so two configured ratios that resolve to the same file are listed once, under the lower density, and the srcset never claims pixels the file does not hold.

Retina ratios that match the audience ​

The ratio set is admin configuration, not a fixed 2x. A store tuned for Google's mobile Lighthouse run, which emulates a device pixel ratio of 1.75, lists 1.75 instead. The table ships with a single 2, so a store that never opens it keeps the output earlier versions wrote, down to the file paths. Each extra row multiplies the files written and the encode work, which is why the table caps at four. See retina ratios.

Generation cost stays bounded ​

A cold cache costs up to six encodes per tier, and a large source decodes to tens of megabytes. Bitmaps are released as each rendition finishes, AVIF work can move to a queue that checks host memory before every job, and catalog:images:pregenerate pays the cost at deploy time instead of on the first visitor. See AVIF generation load.

Limitations ​

  • AVIF is encoded through PHP GD. Where GD is built without AVIF support the format is skipped and the picture serves WebP and JPEG; an admin status panel reports whether the server can encode it. Imagick engine support comes in a later release.
  • AVIF encoding costs roughly ten times WebP in CPU and several times its peak memory. Enable it in a low-traffic window and pre-generate the variants first.
  • Width descriptors leave the sizes attribute to the template, because only the template knows the layout the image sits in.
  • Switching Compact Image Cache Paths renames every cache directory, so it is a deploy-time change with a pre-generation pass and a CDN purge, not a toggle to flip on a live store.