Best Image Formats for Ecommerce Websites in 2026

Updated 9 November 2026.

Key takeaways

• Use WebP or AVIF for product photos, with a JPEG fallback. Both are supported by about 97% of browsers worldwide (caniuse, 8 November 2026).
• Use SVG for logos and icons, PNG for sharp graphics with transparency, and JPEG as the safe fallback. Use GIF for nothing new.
• JPEG XL is not ready to rely on yet. It works in recent Chrome and Firefox, and Safari 17 and later, but caniuse puts global support at about 69%.
• Never lazy-load the main image at the top of a page. Give it fetchpriority="high" so Largest Contentful Paint (LCP) stays under Google's 2.5-second "good" threshold.

The short answer: which format for which image

Format choice is only part of the job. Correct dimensions, sensible compression and loading behaviour matter as much, and we cover those below.

Browser support in 2026

Support is now strong enough for WebP and AVIF to be your default. Figures are from caniuse, checked on 8 November 2026.

Two notes on this:

• WebP is no longer a Safari problem. Our earlier version of this post said Apple did not support it. Safari has supported WebP since version 14 on macOS 11 or later, and fully from Safari 16.0.
• JPEG XL is back in play, but MDN still says "browser support is not yet universal". Safari can show JPEG XL once the file has fully downloaded, but not progressively. Always provide a fallback.

Even at 97%, around 3 in 100 visitors may lack WebP or AVIF. Use the HTML <picture> element so those visitors get a JPEG:

<picture>
  <source srcset="shoe-800.avif" type="image/avif">
  <source srcset="shoe-800.webp" type="image/webp">
  <img src="shoe-800.jpg" width="800" height="800" alt="Black leather walking shoe, side view">
</picture>

File size comparison

Savings depend on your images, so treat the figures below as a guide and test your own catalogue.

The practical message is that AVIF and WebP can cut image weight materially, and every kilobyte you remove from an image helps pages load sooner.

Our test: one product photo at 1200px

We ran a quick test on one image, so treat it as an illustration, not a benchmark. The photo is a crop of the product photography banner on the Shearer Candles homepage, taken from the INDEZ case study images. The source was already a JPEG, which may favour JPEG slightly. We resized it to 1200 pixels wide and saved it three ways, using Pillow 12.3: JPEG at quality 80, WebP at quality 80 and AVIF at quality 50 (which looked equivalent to our eye).

Your catalogue will give different numbers, so run the same test on your own images.

SVG: great for logos, handle with care

SVG is a vector format. It is code that describes shapes rather than a grid of pixels, so it stays sharp at any size, and a simple logo is a tiny file. Use it for logos, icons and simple graphics. It is not suited to photographs.

Two cautions:

• Scripts. An SVG can contain JavaScript. MDN notes that when SVG is loaded through an <img> tag, scripts are disabled and external resources are blocked. Those protections do not apply when the SVG is opened directly or embedded through <iframe>, <object> or <embed>. If your shop lets customers or staff upload SVGs, sanitise them first.
• Platform support. Whether your platform accepts SVG uploads depends on its setup, so check before you plan around it.

What about HEIF and HEIC?

You may have heard of HEIF (High Efficiency Image File Format) and its common variant HEIC. HEIC is the format iPhones use for photos with their recommended (High Efficiency) camera setting, so you may well have product photos in it. It is a good format for storing photos, but it is not a good format for your website.

• Only Safari shows it. caniuse lists HEIC/HEIF as supported in Safari on macOS and iOS from version 17.0. Chrome, Edge, Firefox, Opera and Samsung Internet do not support it in the browser. caniuse puts global support at about 15% (15.26% when we checked on 9 November 2026).
• Licensing is the reason. caniuse describes HEIC as "complex and expensive to license", and notes that AVIF and JPEG XL are royalty-free alternatives designed to supersede it.
• You may already be using the container. AVIF files are stored in the HEIF container, which is why the names look alike. MDN describes AVIF as a royalty-free format that encodes AV1 bitstreams in the High Efficiency Image File Format container. AVIF is the one that works across browsers (see the support table above).

In 2018 we expected HEIF to become the web's next image format once browsers caught up. That has not happened. Browsers chose AVIF and WebP instead.

What to do with HEIC photos:

1. Convert them to AVIF or WebP (with a JPEG fallback) before uploading them to your shop.
2. Check that your platform's uploader accepts the file, or converts it for you. Many customer-facing uploaders (for example, a "send us a photo" form) receive HEIC files from iPhones, so make sure your system can handle or convert them.
3. Keep the original HEIC files as masters if you wish, and never serve them directly to shoppers.

Pixels versus vectors, in one minute

Photos are made of pixels. Logos and icons can be made of vector shapes. A logo saved as a small pixel image shows jagged "staircase" edges when it is enlarged or shown on a high-resolution screen. The same logo saved as SVG does not. Brand owners should keep the vector master file in their brand guidelines and give it to developers.

The same staircase effect hits product photos. If a picture looks blocky on a modern phone or laptop, go back to the original and export it at larger pixel dimensions.

Recommended settings for product images

These are starting points. Check them against your own catalogue.

1. Export a large master. Google Merchant Center recommends images of about 1500 x 1500 pixels or larger for best performance across listing formats. It will require at least 500 x 500 pixels for all products from 31 January 2027. Files must be under 16 MB and under 64 megapixels.
2. Keep main product images clean. Merchant Center does not allow promotional overlays, watermarks or similar on the main image.
3. Serve several sizes. Use srcset and sizes so a phone downloads a smaller file than a desktop. MDN documents both.
4. Choose a compression level by testing. For JPEG fallbacks, Adobe suggests quality of 60 to 80 percent is usually fine. Compare results by eye on your own products, then set one default per image type.
5. Set width and height on every image. The browser can then reserve space and avoid layout shifts.
6. Convert at the server or CDN. Generate WebP and AVIF automatically instead of doing it by hand.

Alt text for product images

Write alt text that replaces the image for someone who cannot see it. MDN's rule is that it should be clear and concise, and should not describe the presence of the image or its file name.

• Do: "Black leather walking shoe, side view"
• Don't: "image" or "shoe-final-2.jpg"
• Use an empty alt="" for purely decorative images, so screen readers skip them.
• Describe what makes this image different from the others in the gallery: colour, angle, detail, size reference.

Images and speed: LCP and lazy loading

Largest Contentful Paint (LCP) measures when the biggest item on screen, often the hero image or main product photo, finishes loading. Google's thresholds, measured at the 75th percentile of page loads: 2.5 seconds or less is good, over 4 seconds is poor.

• Never lazy-load your LCP image. web.dev is blunt about this: it adds unnecessary delay.
• Lazy-load images below the fold with loading="lazy". This saves bandwidth for images that visitors may never scroll to.
• Add fetchpriority="high" to the likely LCP image. web.dev warns that setting it on more than one or two images makes it less useful.
• Make sure the LCP image is in the initial HTML. If it only appears through CSS or JavaScript, preload it.

Notes for Magento and Hyvä stores

• Hyvä Themes documents the same approach: add fetchpriority="high" and loading="eager" to the likely LCP image (the hero on the homepage or the main product image on a product page), do not lazy-load it, and always set width and height. Hyvä's performance tips also advise serving WebP or AVIF where possible, with a <picture> fallback.
• Hyvä Commerce includes a Media Optimisation module that can resize, compress and convert images to WebP or AVIF.
• Adobe Commerce best practice is to compress images before upload and to use Fastly image optimisation where it is set up, which Adobe says speeds up image delivery.

If you would like us to check what your Magento or Hyvä store serves today, our ecommerce audit covers image weight, LCP and more.

Frequently asked questions

What is the best image format for ecommerce in 2026?

AVIF or WebP for photos, with a JPEG fallback, and SVG for logos and icons. Both AVIF and WebP are supported by about 97% of browsers worldwide.

Should I use WebP or AVIF?

Use both if you can. Reported tests show AVIF files are usually smaller than WebP, while WebP has marginally wider support. Serve AVIF first, WebP second and JPEG last, using the <picture> element.

Is JPEG XL ready for my shop?

Not as the only format. It is supported in recent Chrome and Firefox and in Safari 17 and later, but caniuse shows about 69% global support. Treat it as optional, with a fallback.

Does image format affect SEO?

Indirectly. Image weight affects load speed and LCP, and descriptive alt text helps shoppers who use screen readers.

Should I lazy-load product images?

Only the ones below the fold. Never lazy-load the main image at the top of the page.