How to improve your image performance
Web
—
2021-01-31
By following these steps you can improve the image performance on your site, which should improve the experience for your visitors and give you a better PageSpeed score.
- Reduce file size by using modern image formats.
- Use lazy-loading to load images as they enter viewport.
- To lower layout shift, add
widthandheight. - Use
srcsetto serve correctly sizes images. - Use placeholders to increase user experience.
1. By using modern image formats you can reduce images file size, witout losing quality. To cover all modern web browsers you can use WepB. Soon enough AVIF should be available as well everywhere.
2. Lazy-load your images using the native loading="lazy" attribute. This lets the browsers decide when it's time to load the image, right on time for you to look at it. The browser will decide this, depending on your connection speed.
<img src="cat.webp" loading="lazy">3. Add width and height to your image elment you decrease layout shift. Modern browsers will allocate space for the image before it's loaded, which will lead to less "flashing" content.
<img src="cat.avif" width="1920" height="1080">4. srcset will let the browser decide what image is best for the device and screen size. Provide multiple options and your users will only download the smallest image possible.
<img srcset="cat480w.jpg 480w, cat800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="cat800w.jpg">5. Provide a placeholder, for example a blurred image, to improve the user experience before images has been loaded.
BlurHash is perfect for this.
