How to Optimize Images for the Web
Images are often the largest assets on a web page. Optimizing them is one of the most impactful performance improvements you can make. Properly optimized images improve load times, Core Web Vitals scores, and user experience.
Why Image Optimization Matters
Unoptimized images account for a significant portion of page weight on most websites. A single uncompressed photograph can be larger than all the HTML, CSS, and JavaScript on a page combined.
Impact on Performance
Large images slow down page loads, especially on mobile networks. They increase Largest Contentful Paint times and consume bandwidth that could be used for other resources.
Impact on SEO
Page speed is a ranking factor. Google measures Core Web Vitals on real user devices, and slow-loading images directly hurt LCP scores. Faster pages rank higher.
Modern Image Formats
Newer image formats offer better compression than JPEG and PNG while maintaining quality.
WebP
WebP provides both lossy and lossless compression. It typically reduces file size by 25-35 percent compared to JPEG at equivalent quality. Browser support is now universal across modern browsers.
AVIF
AVIF offers even better compression than WebP, with file sizes 50 percent smaller than JPEG in many cases. Browser support has improved significantly, with Chrome, Firefox, and Safari all supporting it.
Choosing the Right Format
Use AVIF as the primary format with WebP as a fallback. Keep JPEG or PNG as the final fallback for older browsers. Use the HTML picture element to serve different formats based on browser support.
Responsive Images
Serving appropriately sized images for each device reduces unnecessary data transfer.
The srcset Attribute
The srcset attribute lets you provide multiple image sizes. The browser selects the most appropriate one based on the viewport width and device pixel ratio.
The sizes Attribute
The sizes attribute tells the browser how wide the image will be displayed at different viewport sizes. This allows the browser to choose the right image before the CSS is parsed.
Art Direction
The picture element enables art direction, serving different image crops or compositions based on viewport size. Use this when a wide landscape image needs a different crop on mobile.
Lazy Loading
Lazy loading defers the download of offscreen images until the user scrolls near them.
Native Lazy Loading
The loading="lazy" attribute is supported by all modern browsers. Add it to images that appear below the fold. Do not lazy load images that are visible in the initial viewport.
Width and Height Attributes
Always set width and height attributes on images. This reserves the correct space in the layout and prevents Cumulative Layout Shift when the image loads.
Compression Techniques
Proper compression reduces file size without noticeable quality loss.
Lossy Compression
For photographs, lossy compression at quality 75-85 provides a good balance between size and visual quality. Most users cannot distinguish between quality 80 and quality 100.
Lossless Compression
For images with text, sharp edges, or transparency, use lossless compression. PNG and lossless WebP preserve every pixel while still reducing file size compared to uncompressed formats.
Build-Time Optimization
Integrate image optimization into your build process. Tools like Sharp for Node.js or Hugo’s built-in image processing can resize, convert, and compress images automatically during the build.
Best Practices Summary
Set explicit dimensions on all images. Use modern formats with fallbacks. Implement lazy loading for below-the-fold images. Compress images during the build process. Serve responsive images with srcset and sizes.
Conclusion
Image optimization is one of the highest-impact performance improvements available. Start with modern formats and proper sizing, add lazy loading, and automate compression in your build pipeline. These changes often cut page weight by more than half.