WebP vs JPG vs AVIF: which image format makes your site faster without ruining quality
Images are the heaviest part of most pages. This is a straight comparison of JPG, PNG, WebP and AVIF, with simple rules for which one to pick for which job and what quality setting shrinks files without visible loss.
On almost every website, images weigh more than all the code combined. When a page feels slow, the first thing to check is not the JavaScript but the pictures, and choosing the right format is the biggest win you can get without touching the design.
How the four main formats differ
JPG has been the standard photo format for thirty years. It opens everywhere, uses lossy compression and has no transparency. At the same file size it is clearly beaten by newer formats.
PNG is lossless and supports transparency, which makes it right for logos, icons and screenshots with sharp text. Store a photo as PNG and the file will be several times larger than a JPG.
WebP, from Google, produces files roughly 25–35% smaller than JPG at equal quality, supports transparency and animation, and every major browser now handles it. It is the sensible default for general web work today.
AVIF goes one step further, often halving the size of a JPG at the same quality. The trade-off is slower encoding, and some tools (older image editors, some back-office systems) still cannot open it.
Simple rules for choosing
- Everyday web images (product photos, article illustrations, banners): use WebP by default. Small and compatible.
- Smallest possible files, such as a home page with many large images or a gallery that loads dozens at once: use AVIF.
- Logos, icons, screenshots with text: PNG or lossless WebP. Never JPG, or the edges of the text will fuzz.
- Files another system requires as JPG/PNG, such as a marketplace or a print service: keep the original format and reduce quality or dimensions instead.
What quality setting is enough
The "quality" number in a lossy format is not a percentage of sharpness; it is how much detail you allow to be discarded. At quality 80 most people cannot tell the result from the original, yet the file is already much smaller. Pushing to 95–100 doubles the file size with no visible gain.
A practical approach: start at 80 and look at the result on a real screen. Images with smooth gradients such as skies or gradient backgrounds may need 85 to avoid banding; images that are already busy with detail still look fine down at 70.
A more direct approach is to set a target file size instead, say no more than 200 KB per image, and let the tool find the matching quality. The Uppic image optimizer has this mode and shows the percentage saved for each file before you download.
Resize the image, not just the file
A phone photo is 4,000 pixels wide, but the spot on your page is 800 pixels wide. Compression alone leaves millions of pixels nobody will see. Resizing the width to what is actually displayed (doubled for high-density screens) usually cuts more bytes than changing the format does.
A recommended routine
- 1Resize to the displayed width, doubled for Retina screens.
- 2Convert to WebP at quality 80 (or AVIF when you need the smallest files).
- 3Keep logos and icons as PNG or SVG separately.
- 4If you need to hand a file to someone else, host it at a direct link instead of attaching it, for example upload and get a link where it is served with long-lived caching.
Do these four things to every image before it goes live and page weight usually drops by more than half, without readers noticing anything changed.