Image Optimization for the Web: Formats, Sizing, and Loading

Images are consistently one of the largest contributors to page weight, which makes image optimization one of the most reliable ways to improve overall site speed without touching anything else.

Key Takeaways

• Modern formats like WebP typically produce smaller files than older formats at similar visual quality
• Serving appropriately sized images for each device avoids wasting bandwidth on oversized files
• Lazy loading should be used for below-the-fold images, but not for critical above-the-fold content

Choosing the Right Format

Modern formats like WebP and AVIF generally achieve smaller file sizes than older formats like JPEG or PNG at comparable visual quality, and most modern browsers support them well.

Compressing Without Visible Quality Loss

Compression tools can meaningfully reduce file size with minimal, often imperceptible, impact on visual quality. Testing compressed images at actual display size (not zoomed in) helps confirm quality remains acceptable.

Responsive Images

Serving a single, large image to every device regardless of screen size wastes bandwidth on smaller screens. Using responsive image techniques lets the browser choose an appropriately sized version based on the actual device.

Lazy Loading

Deferring the loading of images below the initial viewport until a visitor scrolls near them speeds up initial page load. However, the main visible image at the top of a page (often called the hero image) should load immediately, not lazily, since delaying it can hurt perceived speed and Core Web Vitals.

Setting Explicit Dimensions

Specifying width and height attributes (or their equivalent) allows the browser to reserve the correct space before the image loads, preventing layout shift as the page renders.

Using a CDN for Images

Serving images through a content delivery network reduces load time by delivering them from a server location closer to the visitor.

Common Mistakes to Avoid

• Uploading images at their original, often much larger, resolution without resizing
• Lazy loading the primary above-the-fold hero image, delaying perceived load speed
• Never specifying image dimensions, causing layout shift as images load

Conclusion

Image optimization is one of the few performance improvements that's both high-impact and relatively simple to implement — a worthwhile place to start for any site experiencing slow load times.