Optimizing web images: file size, formats and best practices

Choosing the right format

Format	Best for	Avoid for
JPEG	Photos, gradients	Text, logos, sharp shapes (compression blur)
PNG	Logos, icons, screenshots with transparency	Large photos (heavier files than JPEG)
WebP	Replaces JPEG/PNG at a smaller size	Very old browser support (rare today)
SVG	Logos, icons, vector illustrations	Photos (not suited to it)
AVIF	Photos, better compression than WebP	Support still partial depending on browsers

Resize to the actual display size rather than serving a full-resolution image shrunk by CSS.
Compress (a 70-85% JPEG quality is usually enough, with no visible loss).
Serve multiple sizes (srcset) so each device downloads the size that fits its screen.

A well-configured responsive image can cut the data transferred on mobile by 60-80% compared to serving the desktop image as-is.

loading="lazy" on images below the initial viewport: they only load as they approach the visible area.
Reserve the image's space (width/height attributes or CSS aspect-ratio) to avoid the page "jumping" while it loads.

Browsers' built-in performance auditing tools (Performance/Lighthouse tab) flag unoptimized images and estimate the potential savings.