Format wars are usually argued in the abstract. Here is a concrete catalogue: 24 bags of coffee on a white sweep, shot as high-quality JPG from a mirrorless camera, about 5 MB each. The roaster sells on Shopify, also prints a spring wholesale booklet, and has a slow office uplink. They do not need a lecture on entropy coding. They need a rule of thumb and a local converter.
Shopify (and most storefronts): WebP, with a JPG fallback if you must
WebP typically beats JPG on this kind of photo (smooth paper texture, big flat colour fields on the label) at a given visual quality. Convert a sample SKU in the Image Converter, quality around 75–80, and compare the tasting-notes type at 100% zoom. If the 6-point text on the bag turns to mush, raise quality. If the file is still 1.2 MB, you are keeping too much. Theme developers should serve `picture` with WebP and a JPG fallback only if analytics show ancient Safari share you still care about; modern Safari handles WebP.
Upload 24 × 5 MB originals to the CMS only if you like waiting. Convert locally, then upload the WebPs. ToolsGuru’s converter does not upload them for you — you still use Shopify’s admin.
Print booklet: stay with JPG or TIFF, not WebP
The designer’s InDesign 2019 install did not import WebP. They used the original camera JPGs (or TIFFs from the retoucher) for print. Converting print masters to WebP ‘for consistency’ would have been a downgrade. Print wants pixels and colour you agreed with the printer, not the smallest hero image for LCP.
AVIF: excellent compression, picky guests
AVIF often wins on bytes. Some older tools, some email clients, and some stubborn Windows viewers still stumble. Use AVIF when you control the serving stack and have a fallback. Do not email an AVIF to a wholesale buyer who will open it in a seven-year-old photo viewer the night before a trade show.
PNG, GIF, and the rest of the shelf
PNG: logos, screenshots with text, images that need a transparent hole around the bag if you actually isolated it. PNG on a full-bleed photo is a large file for no benefit. GIF: do not. A product photo as GIF is a 1999 mistake. SVG: for the wordmark, not for the photograph. If you have an SVG wordmark and need a PNG for a partner who cannot take SVG, use SVG to PNG at 2× the display size.
- Hero / product on the web → WebP (or AVIF + fallback) from the Image Converter.
- Need it smaller still, same format → Image Compressor, keep the master.
- Need a specific pixel box → Image Resizer with aspect lock.
- Need a square thumbnail → Image Cropper, then resize.
Performance is a file size you can measure
After replacing a 3.2 MB PNG hero (wrong format for a photo) with a ~140 KB WebP, a bakery’s Lighthouse LCP dropped from 5.8 s to about 2.1 s on a throttled run. The Lighthouse Viewer is for reading a JSON you already generated in Chrome; it does not magically speed up a live site. The work is the smaller file.
Tools used in this guide
More guides
Written by the ToolsGuru operators. No guest-post network, no scraped competitor pages. Corrections: contact@toolsguru.net.