Image Optimization
Image optimization reduces the performance cost of images while preserving the visual quality needed for their purpose.
It includes selecting appropriate dimensions, formats, compression, loading behaviour, and responsive image sources.
What It Means in Practice
An image displayed at 600 pixels wide usually does not need to be delivered as a 4,000-pixel original.
Likewise, every visitor does not necessarily need the same image dimensions or file format.
Optimization aims to deliver enough image data for the actual use case without transferring unnecessary bytes.
What Affects Image Performance
Important factors include:
- Image dimensions
- File format
- Compression quality
- Responsive image sources
- Device resolution
- Lazy loading
- Loading priority
- Whether the image appears in the initial viewport
- Whether explicit dimensions reserve layout space
Images are often among the largest resources on a page.
Why It Matters
Large images can increase page weight and compete with more important resources for available bandwidth.
Images near the top of the page can also directly affect Largest Contentful Paint.
Missing dimensions may contribute to layout movement and Cumulative Layout Shift.
Common Problems
Common problems include:
- Uploading full-resolution originals
- Serving one image size to every device
- Using inefficient formats
- Over-compressing important visuals
- Applying lazy loading to a hero or LCP image
- Loading large images that are never seen
- Missing width and height information
- Background images that cannot be prioritized effectively
How to Improve
Resize images around their actual display requirements.
Use responsive image markup where appropriate, choose an efficient format, and balance compression with acceptable visual quality.
Lazy-load offscreen images, but allow important initial images to be discovered and requested early.