Web Performance: Images
High-quality images can significantly boost your website's appeal. They make an excellent first impression on users and effectively communicate your insights.
We want to deliver high-quality images while minimizing performance loss, which necessitates extensive and in-depth image optimization.
🔽 Reduce Image Quality
Among all possible solutions, brute force always seems to be the most intuitive one. The less information in an image, the easier it is to compress, the better the performance.
- Blur: If we only want to emphasize the foreground of image, we can blur the background, which reduces the amount of information while keeping all of the important parts.
- Zoom: Zoom out to 87% of the original image, and then zoom in to 115% of the current one. In the end, the size did not change, but many pixels vanished during the zooming process.
- Tool: Use tools like Squoosh to further compress the image.
After the above processing, the size of an image can be reduced to ~3%, with humans barely noticing the difference.
🎞️ Choose Correct Format
|Ordinary Pictures||WebP, Jpeg|
|Complex graphics||PNG, Jpeg|
|With transparency||PNG, WebP|
🚀 Faster Delivery
- Host images on CDN.
- Use HTTP/2.0 whenever possible.
- Utilize HTTP caching. Set
max-agefor hashed resources (
ETagfor non-hashed resources (
- Adjust the width to somewhere between 320px and 1920px.
- Opaque is preferred to transparent.
- Remove all unnecessary shapes in SVG.
- Integrate tools like Sharp and Imagemin into the build scripts.
🖼️ Responsive Images
If we provide a 1920px wide image for laptops, mobile devices will also receive the same 1920px wide image, which is completely unnecessary.
srcset is a native attribute of
<img> that allows us to provide images of different sizes for devices of different widths. The
size attribute can then be used to run media query based on these images.
<img srcset="image-small.jpg 320w 👈 for devices under 320px image-medium.jpg 600w 👈 for devices under 600px image-large.jpg 1200w 👈 for devices under 1200px image-full.jpg 1920w 👈 for devices under 1920px " size="(min-width:1200px) 1200px, 100vw 👈 1200px for devices above 1200px, or 100vw otherwise" src="image.jpg" alt="A nice image." />
Typically, 4-5 options would suffice. Going too far is as bad as not going far enough.
🛏️ Lazy Loading
Lazy loading is to postpone the loading of the image until the user scrolls to it.
<img src="image.png" alt="A nice image." loading="lazy" />
Simple as the attribute is, it can boost the performance a lot.
loading="lazy" should be the default for every image.
Exception: It is not recommended to apply lazy loading to LCP. It would only have negative impacts on the performance.
For manual control over exactly when the image will be loaded, use
IntersectionObserver API. This is often used in scenarios like infinite scrolling.