Published: Oct 8, 2025
Reducing the download time of images can improve the perceived load time of the page and LCP.
How the insight fails
The insight will highlight images that have unnecessarily large download sizes. The estimated byte savings are calculated by comparing the download size of the image to an efficient bytes/pixel ratio for the image format.
How to improve image download time
There are several strategies recommended by this insight to improve image download time depending on the displayed size and file format of the image. Deploying an image CDN can be extremely helpful for all of these strategies.
Increase image compression factor
Most image formats support a compression level that can be tuned to improve the image file size at the cost of image quality. You can use image tools like ImageOptim, Squoosh, and Imagemin to optimize the image compression factor.
Use modern image formats
AVIF and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these newer formats is a good strategy to reduce the download size of images.
AVIF is supported in the latest version of all major browsers and offers smaller file sizes compared to other formats with the same quality settings. See Serving AVIF Images Codelab for more on AVIF.
WebP is supported by all major browsers and provides better lossy and lossless compression for images on the web. See Use WebP images for more on WebP.
Use video formats for animated content
Large GIFs are inefficient for delivering animated content compared to videos. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes.
See Replace animated GIFs with video for faster page loads to learn how to replace GIF images with videos.
Serve images with responsive size
Ideally, your page should never serve images that are larger than the version that's rendered on the user's screen. Anything larger than that just results in wasted bytes and slows down page load time.
One strategy is to use vector-based image formats, like SVG. With a finite amount of code, an SVG image can scale to any size. See Replace complex icons with SVG to learn more.
If vector-based images are not an option then it is best to serve images that are "responsive". With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so forth.
For example, the <img> element has srcset and sizes attributes which can specify image URLs for different sizes:
If you need to change the image completely then you can use the <picture> element:
See Responsive images and The picture element to learn more.
Stack-specific guidance
This insight also offers stack-specific guidance for pages using the following technologies:
AMP
- Consider displaying all
amp-imgcomponents in WebP formats while specifying an appropriate fallback for other browsers. - For animated content, use
amp-animto minimize CPU usage when the content is offscreen.
Drupal
- Consider using a module that automatically optimizes and reduces the size of images uploaded through the site while retaining quality.
- Ensure you are using the built-in Responsive Image Styles provided from Drupal for all images rendered on the site.
Joomla
Consider using a plugin or service that will automatically convert your uploaded images to the optimal formats.
Magento
Consider using a third-party Magento extension that optimizes images.
WordPress
Consider using an image optimization WordPress plugin that compresses your images while retaining quality.