optimize images for Google pagespeed

How To Perfectly Optimize Images For Google PageSpeed

February 17, 2022

For most websites, optimizing images is the highest impact activity you can do to decrease your page's load times. Image assets tend to be the largest files on any site. Not only will optimizing images help you get a better Google PageSpeed Insights score, but more importantly, fewer users will bounce when your site is faster. If you're looking to increase your site's revenue, optimizing images may be the single best thing you can do.


Table of Contents


Does optimizing images hurt image quality?

While technically, yes, image optimization results in visual degradation, with a reasonable level of optimization , you'll see much faster page speed and website performance without noticeably hurting visual quality. With too much compression, you'll notice the low quality image, but this isn't necessary in order to have a fast site.

Lazy Loading Images

The first step to optimize images on any website should be setting them to use lazy loading. By default, the browser will load every image on a page, before the user even scrolls to where they can be seen. By using lazy loading, you can make browsers load them in as the user scrolls, so you aren't slowing down the initial load time by unnecessarily loading images the user can't see.

For the widest browser support, you'll need some JavaScript to do this. A small library called lazysizes.js can handle this for you. See the example code below.

<img data-src="some-file.jpg" class="lazyload"/>

Since the browser itself doesn't understand what "data-src" means, only src, this image will not load by default. The lazysizes library will watch for scroll events, and set the "src" attribute causing the image to load at an appropriate time.

However, a newer HTML standard lets you handle this without any extra JavaScript. By adding the "loading" attribute to an img tag, newer browsers will be able to lazy load them.

<img src="some-file.jpg" loading="lazy"/>

On unsupported browsers, your images will still work, but they'll load in all at once as the page initially loads.

If you're using WordPress, the loading attribute is supported by default in newer versions. However, you'll still probably want to use lazysizes.js to support lazy loading on older browsers. Luckily, you can do this automatically with the excellent Autoptimize plugin, no coding required. Our WordPress course covers how to do this, along with everything else you need to get a perfect PageSpeed score.

Image Optimization Tools

There are many free tools you can use for optimizing images. Here are some you can use from your browser:

Squoosh

https://squoosh.app

For resizing JPEGs, or non-transparent PNGs, Squoosh is one of the most effective and easiest tools for image optimization. It can compress images, resize them, as well as other optimizations, such as removing the color profile, EXIF data, and using more efficient chroma subsampling.

You can simply drag and drop images into your browser to upload files, adjust compression level and other settings and set the dimensions, and download the optimized images. You'll see a real time preview so you can find the best balance between quality and size.

EZGif

https://ezgif.com

EZGif can not optimize your GIFs, but is great for PNGs with transparency. It allows you to fill the background of the PNG with a solid color to match your page. Once you've uploaded images to the site, you can see the results of a variety of different options before you download the optimized images.

ImageMagick

https://imagemagick.org

If you're comfortable with using command line tools, then ImageMagick is the most flexible option for optimizing your images. You can install it on macOS with Homebrew or on Windows with Scoop. Compared to other tools that work in the browser, this is more complicated, but can be faster and more convenient if you like working with the CLI.

Properly Sizing Images

Your first step to optimizing images should be making sure their dimensions are correct. The image dimensions should generally match the rendered dimensions in pixels on your page and be no larger. In some cases, you'll want to double the rendered dimensions if you want the extra detail for high DPI screens. This can be desirable on small images like icons and logos. Generally, large images will slow your site down, and you should pick a reasonable maximum width such as 1200px.

To find the image dimensions, you can right click images on your page and inspect them. Through your browser's inspector, you'll be able to see what size the images actually are displayed at. Keep these dimensions handy for when you use a tool for optimizing and resizing images.

Optimizing JPEG Images

JPEG is a compression process that makes images smaller. It's a lossy format, meaning image quality does degrade, but with the proper quality settings, the human eye will have a very difficult time seeing the difference.

It's likely that you can use a higher compression ratio for JPEG images already on your site, and significantly reduce the size without noticeably reducing the quality. Lossy compression is almost always the best choice for a images on a website.

Optimizing PNG Images

PNG is a lossless compression format for images. This means that image quality won't suffer at all by applying PNG compression. However, since JPEGs can further be compressed, it's usually a good idea to convert PNG to JPEG. While lossless formats offer the highest quality, it comes at a significant cost in file size.

If your PNG has a transparent background, you'll need to fill it with a solid color to match the background of your site. The PNG format supports transparency, however, JPEG doesn't.

In some cases, with very simple images with limited color palettes, PNG images can be smaller than JPEG. Make sure to compare the file sizes and use whichever format is smaller for each image.

Optimizing GIF Images

GIFs are used commonly for animated images. However, these files can be quite large. You can use something like EZGIF to optimize your GIFs. However, considering converting GIFs to a more efficient format such as MP4, or using the WebP format.

Using WebP Images

WebP is a more efficient image format with better compression that all modern browsers have support for, such as the latest versions of Google Chrome, Safari, Firefox, and Microsoft Edge.

If you're seeing a message in Google PageSpeed Insights recommending you use next-gen image formats, then using WebP will fix that.

For most sites, setting up Cloudflare and purchasing the Pro plan is the easiest way to start using WebP. With this plan, simply enable WebP from the Cloudflare settings. Cloudflare will then re-compress the images on your site.

For WordPress sites, the WebP Converter for Media plugin is free. It automatically generates new versions for every all the images you upload, and configures your web server to serve WebP image files to supported clients. Any existing images will be converted when you set up the plugin.

With either of these options, WebP images will be served in cases where the new version is smaller than the original image. In some cases, and PNG or JPEG will have a smaller file size, and in that case, the original image will still be used. They will take care of using the optimal format automatically.

Using Img Srcset

For responsive images on your site, the rendered dimensions will be small compared to when the page is viewed on desktop. With the srcset attribute, you can specify different versions of images that should be loaded depending on screen resolution.

If you're using WordPress or another CMS, the platform will automatically optimize images by creating various images sizes from the original image, and will insert the srcset parameters.

If you're writing HTML by hand or using a static site generator, check out Mozilla's documentation on how to use srcset.

Cache Control for Images

While not part of optimizing the images themselves, setting up proper cache control headers on your server is also important. If your Google PageSpeed Insights page is reporting you need to "Leverage Browser Caching," then configuring cache headers will fix it.

Cache control headers work by instructing browers to store the downloaded files for a specified period of time. This speeds up the site for repeat visitors, since the files will be cached in the user's browser, and they won't have to download it again.

The exact method will depend on your host and/or what web server software you're using, such as Apache or Nginx. You'll find many online guides for how to do this, or you can check out the Fastify course for step-by-step video guides on how to do this, along with everything else you need to optimize your page speed.

In Conclusion...

Page speed is incredibly important for any website, and unoptimized images are usually the biggest reason for a slow website. You need to optimize images to offer the best user experience, and make sure your traffic doesn't get tired of waiting for your slow loading web page and bounce. Your Google Page Speed Insights is also important if you're doing SEO, since Google uses loading speed as a ranking factor.

Consider the following for each image on your page. Images on your page should first be properly sized based on their rendered dimensions. In most cases, you should convert PNGs to JPEG, filling in transparent backgrounds with a solid color. After you've uploaded your optimized images, you should also use WebP, either through Cloudflare, or if using WordPress, a free plugin.

You should also lazy load images on your site. This keeps the initial page load time fast by only loading images as they come into view. Combined with optimizing the files yourself and lazy loading, you'll have significantly made your site faster and will get an easy lift in conversion rate, sales, and revenue.


Written By 
Mason Wiley
My name is Mason, and I cofounded Fastify after years of experience with SEO and affiliate marketing in a highly competitive industry. I've worked through countless pages of documentation and ran countless experiments to find all the hidden secrets to making screaming fast pages.
menucross-circle