AVIF for E-commerce: Faster Product Images and Higher Conversions
Page speed is a direct conversion rate driver for e-commerce. Google and Deloitte research found that a 0.1 second improvement in mobile site speed increases conversions by 8 percent for retail sites. Product images are the largest contributor to slow page loads. AVIF cuts image weight by 50 to 80 percent.
Why Product Image Performance Matters More Than You Think
A typical e-commerce product page displays 6 to 12 product images. At an average of 150 KB per JPEG, that is 900 KB to 1.8 MB of image data before scripts, fonts, and other assets. Mobile shoppers on slower connections wait for this data before they can see what they want to buy.
The same product images as AVIF average 55 KB per image. A page with 12 product images drops from 1.8 MB to 660 KB in image weight alone. That is a 63 percent reduction before any other optimization.
E-commerce Image Types and AVIF Size Reduction
| Image Type | JPEG Size | AVIF Size | Savings |
|---|---|---|---|
| Product main image (800x800) | 120 KB | 48 KB | -60% |
| Product thumbnail (200x200) | 18 KB | 6 KB | -67% |
| Category banner (1200x400) | 180 KB | 68 KB | -62% |
| Zoom-level image (1600x1600) | 380 KB | 145 KB | -62% |
| Lifestyle photo (1200x800) | 220 KB | 88 KB | -60% |
AVIF Quality Settings for Product Images
Product images need to show fine details like fabric texture, stitching, and material finish. The right AVIF quality setting depends on the image type:
Full-resolution hero shots where customers examine detail. Preserves texture and color fidelity at about 40% of the JPEG equivalent size.
Alternate angle shots and lifestyle images. Excellent quality at half the file size compared to JPEG at quality 80.
Small images shown in category grids and search results. At this size, aggressive compression is invisible.
AVIF Implementation by Platform
Shopify
Shopify's CDN (powered by Fastly) automatically serves AVIF when the visitor's browser supports it. When you upload a product image, Shopify generates AVIF, WebP, and JPEG versions automatically. No app required. Just use Shopify's standard img_url Liquid filter, which includes format negotiation by default.
{{ product.featured_image | image_url: width: 800 | image_tag }}
WooCommerce (WordPress)
WordPress 6.5 supports AVIF natively. For older installs, use the EWWW Image Optimizer or ShortPixel plugin to auto-convert uploaded images and serve them via <picture> elements. Both plugins integrate with WooCommerce product images.
Custom Stores (Magento, BigCommerce, custom)
Convert product images to AVIF at upload time or during nightly batch jobs. Store AVIF alongside JPEG/PNG originals. Serve with a <picture> element or configure your web server to serve AVIF based on the Accept header. Nginx example:
map $http_accept $img_suffix {
default "";
"~*image/avif" ".avif";
"~*image/webp" ".webp";
}
location ~* \.(jpe?g|png)$ {
add_header Vary Accept;
try_files $uri$img_suffix $uri =404;
}
Mobile Commerce and AVIF
Mobile commerce accounts for over 60% of e-commerce traffic globally. Mobile users operate on variable network conditions. A shopper on a commuter train or in a store with poor WiFi will wait 3 to 5 seconds for a product page to load. If it does not load quickly, they leave.
AVIF's compression advantage is most visible on these constrained connections. A product page that loads in 2.8 seconds on a 4G connection with JPEG images loads in 1.6 seconds with AVIF, all else being equal. That difference directly impacts bounce rate and conversion rate for mobile shoppers.
Convert Your Product Images to AVIF
Upload JPEG or PNG product photos and download optimized AVIF files. Batch conversion, free, instant.
Start Converting Images