Optimize your images for a faster largest contentful paint
The TL; DR
With Core Web Vitals soon to be a ranking factor, publishers need to know how to deliver a fast First Input Delay, a low Cumulative Layout Shift, and a high-speed Largest Contentful Paint.
Often, the largest contentful paint on any page is the image. Optimize your images the right way and you will give yourself the best chance at improving your largest contentful paint score with minimal effort.
Here's everything you need:
It's a common practice to upload an image in the original size and then use CSS to resize it to fit the page. This gives the original size - known as the intrinsic size - and the size that the user actually sees on the screen. This is called the visible size.
Google will calculate the image size based on whichever of these sizes is smaller. It is still possible to get a good largest contentful paint score with a large intrinsic image size but the best practice is to serve images at the size they get rendered at. Large images often can't be displayed as big as the original image so it just wastes time and bandwidth to download them.
What you have is a huge file yet a small image. The browser still has to download this monster image and then just squashes into the tiny box allocated for it on your page.
There's a great example from Victorzhou that shows how having a large image in a thumbnail is a waste of resources.
Using a huge image that is going to be shrunk down into a tiny thumbnail doesn't give the user a better experience. They won't notice the difference, just the delay in loading the image.
By resizing the original image, it reduces the file to 66 kB from 213 kB, making the file 69% smaller with no real loss in quality for the user. Don't waste bandwidth using huge intrinsic sizes when it won't be used.
The main difference is that Sharp can be used as a Node Script that can be run to resize multiple images, in multiple sizes. ImageMagik is more suited to resize specific images as it is run from the command line.
Specify multiple image versions and the browser will choose the best one to use. The more options you have, the better, but 3-5 sizes is generally enough to see decent performance improvements. The best and simplest practice is to prepare 2 or 3 different images at different sizes, dependant on the targeted screens - eg desktop, tablet, mobile Designs should already be prepared this way, so you just need to get the dimensions the design calls for.
Another option you will want to consider is also offering a 'retina' version of the image that can be used by screens with higher pixel density. To do this, you will need to serve the image at 2x the dimensions that the layout requires, and specify that it be used by retina screens in the < picture > element.
We all know PNG and JPEG. They are so commonly used because they are supported by every browser. But now most modern browsers now also support WebP, which offers better overall compression than older formats, and should be used where possible.
From Google's analysis, WebP lossless images are 26% smaller in size compared to PNGs. and 25-34% smaller than comparable JPEG images at the equivalent SSIM quality index. When Google changed the format for Youtube thumbnails to WebP, it increased their site speed by 10%.
If you're worried about your audience not using browsers that support WebP, you can use WebP along with another image format as a fallback. Check out the browsers and versions that support WebP here.
The CDN will then automatically resize, compress and convert large original images into optimized images, using next-gen file formats. Then, when a comparable device requests the image again, the CDN can respond immediately with the cached image. Switching to an image CDN can yield a 40–80% savings in image file size.
Thumbor is the only self-managed image CDN available today. While it is open-source and free to use, it generally has fewer features than most commercial CDNs. Other CDNs use tiered payment systems, based on your amount of usage.
Important: You should know that Images served from another domain, like from a CDN, are generally not counted in the Largest Contentful Paint calculation. If you want your fast image to be counted as part of the largest contentful paint calculation, you need to set a Timing-Allow-Origin header.
Important: Browsers don't know which source provides the best performance, so the order of your source matters. If you specify an MP4 video first — even if the browser supports a lighter format like WebM, the browsers will skip the WebM source to use the MP4 instead. If you want the browser to use the WebM where possible, it needs to be first in the order.
And, check out the images on major websites, these are simple wins that people are not doing.
By optimizing your images as much as possible you will not just be keeping up with best practices, but out-performing your competitors on page speed and largest contentful paint.
- Match your image sizes to the space on your page
- Use WebP with a backup if your audience uses older browsers
- Use a CDN and compress your images
- Choose video over heavy gifs
With Core Web Vitals soon to be a ranking factor, publishers need to know how to deliver a fast First Input Delay, a low Cumulative Layout Shift, and a high-speed Largest Contentful Paint.
Often, the largest contentful paint on any page is the image. Optimize your images the right way and you will give yourself the best chance at improving your largest contentful paint score with minimal effort.
Here's everything you need:
Know the difference between intrinsic image size and visible image size
With different screen sizes available, the size of an image is not always the size of an image. When your Core Web Vitals score might rely on this image, it's good to know exactly what Google is measuring.It's a common practice to upload an image in the original size and then use CSS to resize it to fit the page. This gives the original size - known as the intrinsic size - and the size that the user actually sees on the screen. This is called the visible size.
Google will calculate the image size based on whichever of these sizes is smaller. It is still possible to get a good largest contentful paint score with a large intrinsic image size but the best practice is to serve images at the size they get rendered at. Large images often can't be displayed as big as the original image so it just wastes time and bandwidth to download them.
What you have is a huge file yet a small image. The browser still has to download this monster image and then just squashes into the tiny box allocated for it on your page.
There's a great example from Victorzhou that shows how having a large image in a thumbnail is a waste of resources.
Using a huge image that is going to be shrunk down into a tiny thumbnail doesn't give the user a better experience. They won't notice the difference, just the delay in loading the image.
By resizing the original image, it reduces the file to 66 kB from 213 kB, making the file 69% smaller with no real loss in quality for the user. Don't waste bandwidth using huge intrinsic sizes when it won't be used.
Serve responsive images
In order to cut down image sizes, you can use tools to resize images automatically. The sharp npm package and the ImageMagick CLI tool are the two most popular currently available.The main difference is that Sharp can be used as a Node Script that can be run to resize multiple images, in multiple sizes. ImageMagik is more suited to resize specific images as it is run from the command line.
Specify multiple image versions and the browser will choose the best one to use. The more options you have, the better, but 3-5 sizes is generally enough to see decent performance improvements. The best and simplest practice is to prepare 2 or 3 different images at different sizes, dependant on the targeted screens - eg desktop, tablet, mobile Designs should already be prepared this way, so you just need to get the dimensions the design calls for.
Another option you will want to consider is also offering a 'retina' version of the image that can be used by screens with higher pixel density. To do this, you will need to serve the image at 2x the dimensions that the layout requires, and specify that it be used by retina screens in the < picture > element.
Use lighter image formats
Once the image size has been set to not download anything that will be wasted, we can choose the lightest possible image format to keep cutting LCP time down.We all know PNG and JPEG. They are so commonly used because they are supported by every browser. But now most modern browsers now also support WebP, which offers better overall compression than older formats, and should be used where possible.
From Google's analysis, WebP lossless images are 26% smaller in size compared to PNGs. and 25-34% smaller than comparable JPEG images at the equivalent SSIM quality index. When Google changed the format for Youtube thumbnails to WebP, it increased their site speed by 10%.
If you're worried about your audience not using browsers that support WebP, you can use WebP along with another image format as a fallback. Check out the browsers and versions that support WebP here.
Use image CDNs to optimize your images
Image content delivery networks (CDNs) are excellent at optimizing images. An image CDN will detect the user's device model and other factors that will impact the image size.The CDN will then automatically resize, compress and convert large original images into optimized images, using next-gen file formats. Then, when a comparable device requests the image again, the CDN can respond immediately with the cached image. Switching to an image CDN can yield a 40–80% savings in image file size.
Thumbor is the only self-managed image CDN available today. While it is open-source and free to use, it generally has fewer features than most commercial CDNs. Other CDNs use tiered payment systems, based on your amount of usage.
Important: You should know that Images served from another domain, like from a CDN, are generally not counted in the Largest Contentful Paint calculation. If you want your fast image to be counted as part of the largest contentful paint calculation, you need to set a Timing-Allow-Origin header.
Swap GIFs for videos
It may seem surprising, but GIFs are often far heavier than videos and can really harm your Largest Contentful Paint score. Use Lighthouse to see if you have heavy GIFs that could be replaced by video.Important: Browsers don't know which source provides the best performance, so the order of your source matters. If you specify an MP4 video first — even if the browser supports a lighter format like WebM, the browsers will skip the WebM source to use the MP4 instead. If you want the browser to use the WebM where possible, it needs to be first in the order.
Optimize images for faster Largest Contentful Paints
As images take up an average of 20% of a website's weight and are often classed as the largest contentful paint. Compared to a non-optimized image, applying these techniques can cut down on the image file size by up to around 90%. It can be the fastest, most impactful way to improve your website performance, and thanks to Core Web Vitals, your SEO results.And, check out the images on major websites, these are simple wins that people are not doing.
By optimizing your images as much as possible you will not just be keeping up with best practices, but out-performing your competitors on page speed and largest contentful paint.
