What Is It?

This audit lists all unoptimized images, with potential savings in kilobytes. Optimizing the images listed will make the page load faster and consume less data.

Why Does It Display?

Lighthouse collects all the JPEG or BMP images on the page, sets each image's compression level to 85, and then compares the original version with the compressed version. If the potential savings are 4KB or greater, Lighthouse flags the image as optimizable.

How Do You Fix It?

There are many ways to address this audit. Optimized images should be used on all websites, because if you fail to compress/address them, a single image can add 5-10 seconds of loading time to your website. See the example above: the optimized kitten2.jpg image is 11 Megabytes and adds about 20ish seconds to the page loading time.

Here are several ways to increase your PageSpeed by optimizing images:

Compress images.

Uncompressed images bloat your pages with unnecessary bytes. The photo on the right is 40% smaller than the one on the left, yet would probably look identical to the average user.

There are two routes to image compression: lossless and lossy. JPEG is lossy while PNG is lossless — this means that compressing JPEG files leads to lost data and is irreversible. If done right, this compression leads to pretty sizable file reductions while still looking decent. If done wrong, the image rapidly loses quality.  

Lossless compression, which is what PNGs use, is where the image is reduced without any quality loss. This is usually done by removing metadata. You’ll see a file size reduction, but not a massive one (pretty logical, think about removing a few lines of data vs whole chunks).

In some cases, you can compress images by up to 85% which will materially alter the loading time of your site.

With WordPress, there are tons of plugins that can compress your images automatically. We like Smush and Ewww (in our experience Ewww’s more powerful, but has a more complex interface when compared to Smush).

You simply install a plugin and then click “bulk optimize images”. The plugin will then run through all of the images installed on your website, choose the best method of image compression, and then apply it to the image. 

Replacing animated GIFs with video.

GIFs nuke your loading times due to their massive sizes. Gifts are basically large collections of images that your browser plays in rapid succession to make a video like graphic.

Converting gifs into MP4s or WebM videos seriously diminishes their size, has the same functionality, and allows your website to load much quicker.

In this example by Google, the GIF is 3.7M, while converting it into a MP4 reduces the filesize by 80ish percent. Converting it into a WebM video makes the file size even smaller.

Out of the box, video files are missing three key components that make GIFs GIFs:

• GIFs play automatically.
• GIFs loop continuously (usually, but it is possible to prevent looping).
• GIFs are silent.

If you add the following attributes to your Video element, you can recreate the GIF functionality.

<video autoplay loop muted playsinline></video>

You can even specify multiple sources with the video element, which allows you to run WebM videos on browsers that support them, and fall back to MP4 videos on browsers that do not.

<video autoplay loop muted playsinline>

  <source src="my-animation.webm" type="video/webm">

  <source src="my-animation.mp4" type="video/mp4">

</video>

In WordPress, the best thing to do is go in manually and convert all of your GIFs to videos. You can convert these GIFs into videos using a free, online tool like EZGif. 

Lazy loading images.

Like we mentioned in the section above, lazy loading images can save  your browser from rendering unnecessary assets. Images below the fold are rendered on demand, ie. when visitors scroll to them. Implementing this simple solution can drastically increase your website loading time. 

Serving images with correct dimensions.

Serving desktop-sized images to mobile devices can use 2–4x more data than needed (This is also known as serving scaled images). Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.

This fix can be implemented pretty quickly and easily --  you simply generate multiple versions of one image with different sizes. Depending on the viewport size, you serve the best version of the image. You can do this manually, but the EWWW plugin will do this automatically for you.

If for some reason the plugin is unable to resize an image, Google will specify which images you should manually take a look at when generating it's PageSpeed report. You can then resize the image using online tools or PhotoShop, and re-upload it onto the website.

Using WebP images.

WebP, created by Google, is another file type (like PNG/JPEG) that most modern browsers will accept as an image format. It offers massive benefits when compared to these legacy methods and will really speed up your website.

The format offers both lossless and lossy styles: what you choose should depend on how you’re using the image in your website. (These next stats are directly from Google.) WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% lower than comparable JPEG images at the equivalent SSIM quality index. WebP supports true-color web graphics, XMP metadata, color profiles, tiling, animation, and transparency. This next one is my favorite stat: lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG. Browser support includes pretty much everything modern but Safari.

TLDR; it does everything that JPEG and PNGs can, just quicker, better and smaller…WITH higher image quality throughout. 

On WordPress, the best solution to convert existing images into WebP images, as well as convert newly uploaded images into WebP images automatically is the free EWWW plugin. On our agency website we were able to compress some files by up to 55% with this format:

Implementing this format on browsers is pretty simple. You simply go to the web page tab on the EWWW settings page and check off JPG/PNG to WebP. You then run a bulk optimization of all existing images on your website, and you’re good to go. 

If the WebP format is not supported by the browser, this plugin will fall back to JPG or PNG formats, automatically. Additionally, newly uploaded images are automatically converted to WebP format and served to browsers that support it. When it comes to images and PageSpeed, implementing this new format is probably the most impactful thing you can do.