WebP, AVIF, JPG or PNG: which to choose
- WebP: the safe choice. It’s 25–35% smaller than a JPG of similar quality, supports transparency and opens in every current browser.
- AVIF: compresses even more, especially photos, at the cost of slower encoding. Every modern browser displays it, but not all of them can create it: if yours can’t, the option is disabled.
- JPG: for when you need maximum compatibility, as in email or older software. It has no transparency: transparent areas come out white.
- PNG: lossless. Use it for screenshots, logos or images with text; for photos it’s too heavy.
What quality to use
Between 75 and 85 is the sweet spot for photos on the web: above that, the file grows a lot and the difference is barely visible. With AVIF you can go lower, down to 60 or 65, with a similar result. Watch the savings percentage and compare the thumbnails: if an image comes out larger than the original, it was already well compressed.
Reducing the size saves even more than the quality. A phone photo is 4000 pixels wide; for a website, 1600 or 2000 is usually plenty. Enter a width in “Maximum width” and larger images are scaled down keeping their ratio.
Nothing is uploaded
Most online converters upload your images to their server. This one doesn’t: your browser does the conversion with the
canvas API, and the files never leave your device. Once the page has loaded it even works offline. The
trade-off is that the result depends on your browser’s encoder, and EXIF metadata (date, camera, location) is lost, which
on a website is usually an advantage.
Serving several formats
To give AVIF to browsers that support it and a JPG to the rest, use <picture>. Images from the
ximg.es generator can be requested in any of those formats by changing the extension, which is
handy for testing the markup before you have the real images:
<picture>
<source srcset="https://ximg.es/1200x800.avif" type="image/avif">
<source srcset="https://ximg.es/1200x800.webp" type="image/webp">
<img src="https://ximg.es/1200x800.jpg" width="1200" height="800" alt="">
</picture>