How to Optimize Images for Website Performance
Learn how image format, dimensions, compression, responsive images, lazy loading, and prioritization affect website performance and Core Web Vitals.
Why Image Optimization Matters
Images can represent a large portion of a page's transferred bytes. Poorly sized or unnecessarily large images can increase loading time and affect the experience of users on slower connections.
Choose the Right Image Format
Modern formats such as WebP and AVIF can reduce file size for many image types. Choose a format based on browser support, image characteristics, quality requirements, and your delivery pipeline.
Serve the Correct Dimensions
Do not send a 3000-pixel image when the browser only displays it at 600 pixels. Generate responsive variants and use srcset and sizes where appropriate.
Compress Images
Compression should reduce unnecessary data while preserving acceptable visual quality. Test compression settings instead of applying the same setting to every image.
Use Lazy Loading Carefully
Below-the-fold images can often be lazy loaded. Avoid lazily loading the primary content that users need immediately, especially when it is the LCP element.
Reserve Layout Space
Always provide dimensions or aspect-ratio information so the browser can reserve space before an image loads. This also helps prevent layout shifts.
See our LCP guide and CLS guide for related performance considerations.
Conclusion
Image optimization is not simply about making files smaller. Deliver the right image, at the right dimensions, in an appropriate format, at the right time.