WebP and AVIF for Clothing Photos

Serve clothing photos as AVIF where browsers support it, WebP as the second choice, and keep a JPEG as the fallback. All three can look good on fabric, but AVIF and WebP produce smaller files, which helps product pages load faster.

This applies to any store, including one that adds virtual try-on to WooCommerce. Your catalog photos are also the images a try-on tool reads, so format choices matter beyond page speed. The sections below cover which format to pick, how to keep fabric detail, and what to do before an image reaches an API.

What are WebP and AVIF, and why use them for clothing?

They are image formats designed to compress photos into smaller files than JPEG. MDN's image file type guide reports that lossy WebP is on average 25 to 35 percent smaller than JPEG at similar visual quality, and that lossy AVIF is around 50 percent smaller.

Clothing stores benefit because a product page often loads many large photos: front, back, detail and on-model shots. Smaller files mean less data for shoppers on mobile connections.

Which format should you choose?

Format	Best for	Watch out for
AVIF	Main product photos where size matters most	Older browsers may not support it, and it has no progressive rendering (MDN)
WebP	A safe middle choice with broad support	Slightly larger files than AVIF
JPEG	The universal fallback	Larger files
PNG	Cutouts that need transparency, and exact lossless copies	Large files for photos

MDN says to provide a fallback for AVIF, because support is not yet universal. Check browser support for the formats you plan to use before you remove JPEG.

How do you serve modern formats with a fallback?

Use the HTML picture element. The browser picks the first source it understands and falls back to the plain img tag.

1. Export an AVIF, a WebP and a JPEG of each image.
2. List AVIF first, then WebP, then the JPEG in an img tag.
3. Set width and height so the page does not jump while images load.
4. Write an alt text that describes the garment, such as "navy linen shirt, front view".

Many image CDNs and store platforms do this conversion for you. If you are comparing services, see image CDN choices for fashion photos.

How do you keep fabric detail when compressing?

Compression can blur the things shoppers want to see, such as knit texture, lace and fine prints. Use this checklist:

• Compare at full size. Zoom to the weave of the fabric on both the original and the compressed file.
• Test the hard images first. Patterned, textured and dark fabrics show artifacts soonest.
• Lower quality in small steps. Stop when you can see a difference, then go one step back.
• Keep the original. Store the full-quality master and generate web versions from it.
• Check color. Make sure a red dress still looks red after conversion.

A single quality setting rarely suits a whole catalog. Plain cotton tees tolerate heavier compression than sequins or tweed.

What should you do before sending images to an API?

Do not assume every service reads modern formats. The ZeDaq.ai API reference says the try-on endpoint takes the shopper photo and your product image as base64 in JPEG or PNG. If your store serves WebP or AVIF, convert a copy to JPEG or PNG before you send it.

Keep the product image clean: one garment, clear edges and a plain background. For more on what works, read what product images virtual try-on needs.

Sending a very large file only adds upload time. A full-length shopper photo around 800 pixels wide is what the docs describe as working well.

What image sizes should you export?

Export more than one width per photo, so a phone does not download a desktop-size file. Use the srcset attribute to list the widths and let the browser choose. MDN has a guide to responsive images that explains srcset and sizes.

Keep one larger version for zoom. Shoppers who pinch to inspect a seam or a print expect it to stay sharp. Load that version only when the shopper asks for it.

What mistakes do clothing stores make with images?

• Converting a JPEG that is already compressed. Start from the original master, not a copy that has been saved several times.
• Stripping color profiles by accident. Colors can shift, which causes "not as pictured" complaints.
• Using one format for every image. Cutouts and photos have different needs.
• Skipping alt text. It helps shoppers who use screen readers and describes the garment to search engines.
• Forgetting the thumbnail. Collection pages show many small images, so their size adds up fastest.

How should you roll this out on a live store?

1. Pick ten top-selling products and convert their photos.
2. Compare the product pages before and after, on a phone.
3. Check each page in at least two browsers.
4. Convert the rest of the catalog in batches.
5. Keep JPEG fallbacks for as long as you have visitors on older browsers.

For stores on BigCommerce, the way images attach to variants differs from other platforms, so also look at BigCommerce product options for apparel.

FAQs

Is AVIF always better than WebP?

Not always. AVIF usually gives smaller files, but support is less broad and it cannot render progressively. Many stores serve AVIF first and WebP second.

Will WebP or AVIF hurt image quality?

Not if you set quality sensibly. Always compare compressed files to the original at full zoom, especially for textured fabrics.

Can I send WebP photos to the ZeDaq.ai try-on API?

The API reference lists JPEG or PNG for images. Convert WebP or AVIF files to one of those before sending.

Do I still need JPEG files?

Yes, as a fallback. If a browser cannot read AVIF or WebP, it needs a format it understands.