Images typically account for 50-70% of a webpage's total weight. Optimizing them is one of the highest-impact performance improvements you can make. Here's a comprehensive guide to modern image optimization.
Choose the Right Format
Modern browsers support several image formats, each with different strengths:
- WEBP: 25-35% smaller than JPEG at equivalent quality. Supported by all modern browsers. The default choice for most photographs.
- AVIF: Even better compression than WEBP (20-30% smaller), but slower to encode and not yet universally supported.
- JPEG: The legacy standard. Still widely used and universally supported. Use when WEBP/AVIF aren't options.
- PNG: Lossless compression. Use for images requiring transparency or sharp edges (logos, screenshots, diagrams).
- SVG: Vector format for icons, logos, and illustrations. Infinitely scalable with tiny file sizes.
Responsive Images
Serve different image sizes for different screen sizes using srcset and sizes attributes. This prevents mobile users from downloading desktop-sized images.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="A beautiful landscape"
/>Lazy Loading
Use loading="lazy" for below-the-fold images. This defers loading until the image is near the viewport, improving initial page load time. For above-the-fold images, use fetchpriority="high" instead.
Compression Quality
For most photographs, quality levels of 75-85% provide the best balance between file size and visual quality. Above 85%, file sizes increase rapidly with minimal visual improvement.
Dimension Attributes
Always specify width and height attributes on <img> tags. This prevents Cumulative Layout Shift (CLS) by reserving space for the image before it loads.
Image CDN
For production websites, use an image CDN that automatically handles format conversion, resizing, and compression. Popular options include Cloudinary, imgix, and Cloudflare Images.
Audit Your Images
Use tools like Image Extractor to audit all images on your website. Check for oversized images, missing dimensions, and opportunities to convert to modern formats.