Every image file on the web has been compressed. The mechanism is either lossy — permanently discarding detail the eye is unlikely to miss, ideal for photographs — or lossless, which reconstructs the original exactly, the right call for logos, diagrams and anything that must survive round-trips intact. That distinction still governs every format decision. What has changed is the menu of formats available.
01The three developers actually reach for
PNG arrived in the mid-1990s as a patent-free GIF alternative: 24-bit colour, full alpha transparency, lossless compression. For flat-colour graphics, logos, screenshots and pixel-perfect fidelity it remains the right tool; its weakness is photographic file size.
WebP, released by Google in 2010, was the first serious attempt to replace both JPEG and PNG with one format — lossy and lossless modes, transparency, basic animation, and now-universal browser support. AVIF is newer and more ambitious, built on the AV1 codec: it often substantially outperforms WebP at the same perceptual quality, with wide-gamut and HDR support. The trade-off is encoding speed.
02Choosing the right format
For photographs, AVIF then WebP, JPEG as the safety net. For graphics, logos and transparency, PNG for tooling ubiquity; lossless WebP or AVIF when the size gain justifies a more complex pipeline. For animation, WebP is broadly supported, but video (MP4, WebM) is almost always more efficient beyond a few frames.
03Delivering the right format
The <picture> element exists precisely for this. Offer AVIF first, WebP second, a JPEG or PNG fallback last — the browser walks the list and picks the first it understands:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>Pair this with srcset to serve appropriately sized files at different viewport widths, and strip metadata before publishing. See it live in the Format Table.