Summary: a step-by-step guide on optimizing images with CDN’s URL directives to get rid of Google PageSpeed image related issues.
When you analyze a website with Google PageSpeed Insights, it often
points out several image issues to fix:
- Next-generation formats
- Image size
- Lazy loading
We analyzed 10k of our users’ websites and found out that:
- Only a tiny percentage of users implements next-generation image formats, which alone can lead to a file size drop of 25–34% (source: Google).
- Almost every compressed image can be further downsized without any significant loss in visual quality.
- The problem is often about a few huge images; fixing those dramatically improves loading time.
- Often there is no lazy loading (when images are only loaded when they’ll be scrolled to soon).
- Many analyzed websites provide either no or poor Responsive Images experience.
Eliminating the issues will increase page loading speed, decrease bounce rate, and improve the user experience.
Resolving those is frustrating if you don’t know exactly what to do. Here is an ultimate guide on optimizing images in three steps:
- Optimize Size & Format — get rid of excess image weight at no significant loss in visual quality.
- Use Responsive Images — serve appropriate images to every device and screen.
- Add Lazy Loading — load only those images users are looking at.
- Create versions of images with CDN's URL directives.
Aaand add lazy loading. Profit, you've won Google PageSpeed images score. :-)
You’ll need a tool allowing you to manipulate images in real time, Image CDNs do this job well. In our examples, we’ll use Uploadcare Image Transformations.
This step is technology agnostic: you can use other tools to manipulate images.
Once you upload files (for test purposes you can do it manually, no need to code), they get cached by a CDN, which alone improves image load speed. The files will now have their permalinks starting with
https://ucarecdn.com/ followed by their UUIDs.
From there, you manipulate images by changing their URLs: include Image Transformations as URL directives:
Let’s move on to optimizing images.
docs / image format
WebP is a new image format for the web with superior compression, developed by Google. Use the
auto value to deliver WebP images to user browsers that support the format. Since WebP is not everywhere, it is a good practice to specify the
png format as a fallback.
docs / image quality
With Uploadcare, you use quality presets. Use
lightest (≈50% file size) for retina resolutions, when you don’t have to worry about the quality of individual pixels and
lighter (≈80% file size) for every other occasion.
:number: the maximum allowed ICC profile size in kilobytes
docs / ICC profile size
ICC profiles define how image colors should be displayed on your screen. The profiles can add up weight to your images, so you can reduce their size by getting rid of excessive ICC profiles. We recommend setting the limit to 10 KB (10240 bytes). Most of the common profiles (sRGB, Display P3, ProPhoto, Adobe RGB, Apple RGB) sit under the threshold.
A. Original, 539 kb:
lighter version, 291 kb, no significant visual difference — saved
lightest version, 149 kb, visible difference in quality — saved
docs / resize image proportionally
Reduces an image proportionally to fit into the given dimensions in pixels while preserving the original aspect ratio. Resizing images is a go-to for saving bandwidth.
docs / scale crop
The next important aspect of Responsive Images is cropping originals to provide a better mobile screen fit. It is a good fit for mobile experiences. It scales down an image until one of its dimensions gets equal to some of the specified ones; the rest is cropped. This proves useful when you want to fit as much of your image as possible into a box, “center” it.
docs / crop
Crops an image using specified dimensions and offsets. Great for art direction.
In the template below, we tell a user’s browser about what images and sizes are available to display on a user device.
We also added breakpoints (min/max-width) to switch between appropriate sizes. The browser then does all the work figuring out which image suits the device best.
Still, there are a few tricks to improve the lazy loading experience on your page:
- Use progressive jpegs.
- Load very light blurred instance of an image before the original.
- Or extract the major color and show it until a picture gets loaded.
- Use this color with setfill and stretch transformations.
- Play with face recognition and object recognition.
At the end of the day, here’s what you need to do to win at Google PageSpeed image score:
- Run a PageDetox report to see how images affect your website load times.
- Pick an image CDN that manipulates images on the fly, like Uploadcare.
- Get your image assets there.
- In your
srcsetholding image versions generated by your image CDN.
- Implement lazy loading.
We believe that the only thing you should be doing is uploading a single hi-res image. The image handling service then handles the rest: picks breakpoints, optimizes images for the best results, and sticks proper snippets into your code. We're working on it!
It’s common that your images are already sitting somewhere, and you don’t want to re-upload them to an image CDN.
In this case, check out Image Proxy options like Upload-Free Image Processing. It fetches your content, optimizes and delivers it to your users via Image CDN.
They don’t work for everybody right now, even in Google Chrome. Changes in the desktop version of Chrome 67 have removed support for cross-origin client hints.