WebP & AVIF Images in Magento 2: The Page-Speed Win
WebP and AVIF in Magento 2: the easiest page-speed win most stores skip
Magento 2 does not convert images to WebP or AVIF natively — it will display a WebP file you upload, but it will not convert an existing catalogue, generate modern formats on upload, or serve fallbacks to older browsers. The fix is an image pipeline with four parts: convert automatically on upload and in bulk, serve WebP or AVIF with a fallback, resize images to what the page actually displays, and lazy-load everything below the fold.
The prize is real because product imagery is usually the heaviest thing on a Magento page, and most catalogues still serve the original JPG or PNG uploads. A WebP version of typical product photography is meaningfully smaller — commonly somewhere between a quarter and a third — at the same visual quality, and AVIF often compresses further still. Smaller images load sooner, and that shows up directly in LCP, the Core Web Vital most Magento stores fail. Better still, this is one of the few speed fixes that needs no theme surgery and carries no visual cost — the pictures look the same, they simply weigh less.
The formats at a glance
| Format | Compression | Browser support | Role in the pipeline |
|---|---|---|---|
| JPG / PNG | Baseline — the sizes you have today | Universal | The fallback of last resort; keep the originals |
| WebP | Meaningfully smaller than JPG/PNG at equal quality | All modern browsers | The workhorse format for most visitors |
| AVIF | Often smaller again than WebP | Current major browsers; older versions need fallback | Best-case format, served when the browser accepts it |
What "doing it right" involves
- Convert on upload and in bulk. New images should become WebP/AVIF automatically the moment they are uploaded, and the existing catalogue should be converted in one managed batch — nobody re-saves five thousand product photos by hand.
- Serve with fallback. Browsers that cannot take AVIF get WebP; anything older gets the original. Done properly, no visitor ever sees a broken image — the format degrades, the picture never does.
- Resize to what is displayed. A huge original in a small category-grid slot wastes most of its bytes before format even enters the discussion. Responsive sizing matters as much as conversion.
- Lazy-load below the fold — never the hero. Deferring off-screen images saves bandwidth, but lazy-loading the LCP hero image actively delays it. The hero loads eagerly; everything beneath the fold waits.
What stock Magento can and cannot do
Before adding anything, get the native controls right — they help, they just do not finish the job:
- Set upload limits. Under Stores → Configuration → Advanced → System → Images Upload Configuration you can set the quality and the maximum width and height applied to uploads, and enable frontend resizing. This stops oversized originals entering the catalogue in the first place.
- Regenerate cached sizes. After changing image settings or your theme, run
bin/magento catalog:images:resizeso the resized variants Magento serves are rebuilt to the new rules. On a large catalogue, run it out of hours — regenerating every cached size is CPU-heavy work. - Check your theme's image definitions. The sizes Magento generates per placement (grid, thumbnail, gallery) come from the theme's
view.xml, so a theme that requests sensible dimensions saves more bytes than any compression setting. - Measure the gap. Run a category page and a product page through PageSpeed Insights and look for the "Serve images in next-gen formats" and "Properly size images" audits — that is your before picture, in bytes.
What none of this does is change format: there is no native switch that turns your JPG catalogue into WebP or AVIF, no on-upload conversion, and no format-based fallback. That is the gap a module fills.
How Image Optimisation for Magento closes the gap
Our Image Optimisation for Magento 2 module implements the whole pipeline: automatic WebP and AVIF conversion with quality controls, compression and resizing of new uploads, bulk conversion of the existing catalogue, and lazy loading with sensible defaults so the hero image stays eager. Originals are kept, so nothing is destructive and unsupported browsers always have an image to fall back to. It works on a standard Luma-based storefront; on a headless build, the optimised variants are simply what your frontend serves.
Where images sit in the wider speed picture
Image weight is one of the biggest levers on LCP, but it is one lever among several — theme JavaScript, third-party tags and server response time all take their share. If speed is the wider goal, start with why your Magento store is slow and the fixes that work, then use Magento Core Web Vitals to measure what Google actually scores you on. Images are typically the fastest of those fixes to ship — no theme surgery, no re-platforming, just smaller bytes on the same pages.
FAQ
Does Magento 2 support WebP natively?
Magento can display a WebP file you upload, but it does not convert your catalogue to WebP or AVIF, does not generate modern formats on upload, and does not serve format-based fallbacks. Conversion and delivery need a module or an external image service.
Will converting to WebP break my existing product images?
No — done properly, originals are kept and the modern formats are served alongside them with fallback, so a browser that cannot display AVIF or WebP still receives the original JPG or PNG. The conversion is additive, not destructive.
How much faster will my pages be?
It depends how image-heavy they are: category grids and product pages with large galleries see the biggest LCP improvements, while text-heavy pages move less. Measure a page in PageSpeed Insights before and after — the "Serve images in next-gen formats" audit shows the exact bytes at stake on your own store.
Should product images be lazy-loaded?
Below the fold, yes — it defers weight the visitor may never scroll to. The exception is the main above-the-fold image, which is usually the page's LCP element: lazy-loading it delays the very metric you are trying to fix, so it should load eagerly.
Image Optimisation is a one-off purchase — no subscription — and is included in the AgenticEcom Suite.It targets Magento Open Source 2.4.9 on PHP 8.4 and 8.5.