Improve image delivery

The Improve image delivery insight highlights the various ways the file size of your images should be reduced in order to make them load much faster. This insight points out specific images with issues and suggests how to reduce their file size.

Reducing the download time of images can improve the perceived load time of the page and LCP. Learn more about optimizing image size

Understanding Improve image delivery

There are a variety of audits associated with improving image delivery. Each are outlined below with explanations about how each affects image loading speed.

Increase image compression factor

This suggestion is about compressing images so their file sizes are smaller while either minimally or not affecting the visual quality of the images. The simplest solution is often to use an image optimization plugin like Imagify.

Use modern image formats

It's recommended to convert images to modern formats like WebP or AVIF because they typically offer even smaller file sizes than compressed PNG or JPG images. Image optimization plugins like Imagify will do this for you.

Serve images with responsive size

The larger an image's intrinsic width and height in pixels, the larger its file size (all else equal), so it's recommended that images should be as close as possible to the width and height in pixels at which they are displayed on a page.

For example, an image that's 1000px by 1000px should not be displayed on a page at 500px by 500px. Instead, multiple sizes of the same image should be created, and responsive images or picture elements should be used to allow the browser to select the most appropriate size in various contexts (desktop, tablet, mobile views).

Use video formats for animated content

Avoid using animated GIFs for short bits of animated content because their file sizes are unnecessarily large. Instead, convert to MPEG or WebM format and use the HTML5 video element using the steps in this guide.

How to improve image delivery

WP Rocket is not designed to compress images or create WebP or AVIF versions, so we recommend Imagify to do these things.

Additional Resources

Google’s Improve Image Delivery Insight: What It Is & How to Fix It