Format showdown: AVIF vs WebP vs JPG
For decades, JPG and PNG were web defaults. Today, modern codecs provide far superior compression algorithms:
- WebP: Developed by Google. Supported by 97%+ of global browsers. Produces 25% to 35% smaller files than comparable JPGs with equal perceived sharpness, and supports alpha transparency.
- AVIF: Derived from the open-source AV1 video codec. Supported by all modern evergreen browsers (Chrome, Firefox, Safari, Edge). Compresses up to 50% smaller than JPG and 20% smaller than WebP, especially in high-color photography.
File size comparison on a 1920x1080 hero photograph
| Format | File size | Compression ratio | Browser compatibility |
|---|---|---|---|
| Legacy JPEG | 840 KB | Baseline | 100% universal |
| Optimized WebP | 280 KB | 66% savings | 97.8% global coverage |
| Modern AVIF | 175 KB | 79% savings | 93.5% global coverage |
| SVG (Vector logos/icons) | 4 KB | Infinite resolution | 100% universal |
Serving responsive resolutions with srcset and sizes
Serving a 1920px wide desktop image to a mobile phone with a 390px viewport wastes mobile bandwidth. Use the HTML5 srcset attribute to let the browser automatically choose the optimal file:
<img
src="/images/hero-800.webp"
srcset="/images/hero-400.webp 400w,
/images/hero-800.webp 800w,
/images/hero-1400.webp 1400w"
sizes="(max-width: 640px) 100vw, 1200px"
width="1200"
height="630"
alt="CodeCrest Studio work showcase"
loading="eager"
fetchpriority="high"
/>How to prevent Cumulative Layout Shift (CLS)
When an image tag lacks explicit dimensions, the browser initially renders it with a height of 0px. When the image file finally finishes downloading, the browser abruptly pushes down all surrounding text, causing a jarring layout shift.
Always declare explicit width and height attributes on your <img> tags, or apply CSS aspect-ratio: 16 / 9;. This allows the browser to reserve the exact layout box space before the image asset has downloaded.
