PNG to AVIF for Ecommerce Product Images — Speed Up Your Store

Product image loading speed directly affects ecommerce conversion rates. Amazon famously found that every 100ms of page delay costs 1% in revenue. For Shopify and WooCommerce stores, oversized PNG product images are one of the most common causes of slow product page load times.

Converting product images from PNG to AVIF is one of the most effective single changes you can make to improve product page speed — often reducing image payload by 50–70% without any visible quality loss on product detail pages.

Why Product Images Are Often PNG and Why That's a Problem

Product images frequently arrive as PNG for legitimate reasons: they were exported from a design tool (Figma, Illustrator), they have transparent backgrounds for composite images, or the photographer delivered uncompressed files. PNG is lossless, which means it's a safe handoff format.

The problem: those PNG files are used directly in product listings without conversion. A single product PNG at 2000x2000 can easily be 3–8 MB. A product page with 6 images at that size is loading 18–48 MB of images before anything else on the page renders.

For comparison: converting those same images to AVIF at quality 65 produces files of 150–400 KB each — a product page image payload of under 2.5 MB total. The difference in load time is measurable and significant.

How to Convert Product Images from PNG to AVIF

1. Keep your PNG originals — never overwrite source files. Store PNGs in a master asset folder and convert copies for web upload.
2. Select quality 65–75 for product images — higher than the default 50 because shoppers zoom into product detail and evaluate quality closely.
3. Batch convert — drop the entire product image folder onto the converter and download the ZIP. Rename the ZIP contents consistently (e.g., product-name-view1.avif).
4. Upload to your store — Shopify and WooCommerce 6.5+ accept AVIF files directly in the media library.
5. Check the product page load score — run PageSpeed Insights before and after to confirm the improvement.

Sell Custom Apparel — We Handle Printing & Free Shipping

Shopify: Uploading and Using AVIF Product Images

Shopify Online Store 2.0 themes (launched 2021+) support AVIF natively. Upload process:

1. Go to Products > select a product > Images section.
2. Click Add media and select your AVIF files.
3. Shopify accepts .avif files and serves them with the correct image/avif MIME type.
4. Browser fallback: Shopify's CDN (Shopify Image CDN) handles format negotiation — it serves AVIF to browsers that support it and falls back to JPG for older browsers automatically.

One important note: Shopify recommends 2048x2048 for product images (to support zoom). Generate your AVIF at the same resolution as your PNG — don't downscale during conversion.

WooCommerce: Serving AVIF Product Images

WordPress 6.5+ accepts AVIF uploads natively in the media library. For WooCommerce on WordPress 6.5+:

1. Convert product images to AVIF using the free converter.
2. Upload to Media Library (Media > Add New > select AVIF files).
3. Set images in WooCommerce product editor as normal — select from the media library.

For WordPress 6.4 and earlier, enable AVIF support by adding to your theme's functions.php or a plugin:

// Add AVIF MIME type support
function add_avif_mime($types) {
    $types['avif'] = 'image/avif';
    return $types;
}
add_filter('mime_types', 'add_avif_mime');

Alternatively, the free ShortPixel Adaptive Images plugin handles AVIF serving automatically with no code changes required.

Frequently Asked Questions

Will AVIF product images display on all customers' devices?

AVIF is supported by Chrome, Firefox, Edge, and Safari 16+ (iPhone 8 and newer running iOS 16+). For older devices, Shopify's CDN serves JPG automatically. For WooCommerce, use a picture element or a plugin that handles format negotiation to ensure older devices get a compatible format.

What quality setting should I use for product images?

Use quality 65–75 for product images. The default of 50 can introduce subtle artifacts in close-up product shots that customers may notice when they zoom in. Quality 70 is a reliable setting that keeps files small while maintaining the fine detail shoppers look for.

Should I use AVIF for product images with transparent backgrounds?

Yes. AVIF fully supports transparency. White-background cutout product shots, product images on colored backgrounds, and transparent PNG product images all convert to AVIF with transparency intact. You get the size savings without losing the clean cutout.

How much will switching to AVIF improve my PageSpeed score?

Typical improvement on an image-heavy product page: 10–25 points on PageSpeed Insights. The specific gain depends on how large your current PNG files are and how many images are on the page. Converting the 3–5 largest images typically resolves the "serve images in next-gen formats" audit entirely.