Back to glossary

Term

Image Optimization (WebP / AVIF)

Using modern image formats (WebP, AVIF) plus appropriate sizes and compression to dramatically shrink image payloads without visible quality loss.

Image Optimization (WebP / AVIF) — explained in more detail

Images account for 50–70% of page size on typical websites — making optimization a high-leverage move. WebP (Google, 2010) delivers ~25–35% smaller files than JPEG at the same quality. AVIF (2019, based on AV1) adds another 30–50% on top, though it’s more CPU-intensive to encode.

Full leverage comes from three steps: the right format (AVIF with WebP/JPEG fallback via <picture>), the right dimensions (responsive srcset for different viewports), and the right compression (quality 70–85 is usually visually sufficient). Build tools like astro:assets, next/image, or cloud services (Cloudinary, imgix) automate this.

Example / practical use

A hero image as a 1.4 MB JPEG drops to ~180 KB as AVIF — with identical perceived quality. LCP improves by seconds on slow connections.

Image optimization is lossy (image quality is intentionally sacrificed); Brotli/Gzip, by contrast, are lossless. Lazy loading complements: optimization shrinks the individual file; lazy loading defers the load entirely.

Entdecke mehr