Optimizing images on autopilot with Uploadcare (to improve page load speed)

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:

1. Next-generation formats
2. Image size
3. Responsiveness
4. 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:

1. Optimize Size & Format — get rid of excess image weight at no significant loss in visual quality.
2. Use Responsive Images — serve appropriate images to every device and screen.
3. Add Lazy Loading — load only those images users are looking at.

Short version of the guide

• Use srcset instead of src.
• Create versions of images with CDN's URL directives.

Aaand add lazy loading. Profit, you've won Google PageSpeed images score. :-)

Full version

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:

https://ucarecdn.com/{FILE-UUID}/-/{DIRECTIVES}/

Let’s move on to optimizing images.

Step 1. Size & Format

1.1. Next-gen formats — saves ≈25-34%

-/format/:format/
:format: jepg, png, webp, auto
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 jpeg or png format as a fallback.

1.2. Quality — saves up to ≈50%

-/quality/:value/
:value: lightest, lighter, normal, better, best
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.

1.3. ICC profile size threshold (image meta) — can save up to ≈1 MB for some images

-/max_icc_size/:number/
: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.

Let’s check out the combined impact of those optimizations

A. Original, 539 kb:

https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/

B. lighter version, 291 kb, no significant visual difference — saved
46 %:

https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/-/format/auto/-/quality/lighter/-/progressive/yes/-/max_icc_size/10/

C. lightest version, 149 kb, visible difference in quality — saved
72 %:

https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/-/format/auto/-/quality/lightest/-/progressive/yes/-/max_icc_size/10/

Step 2. Resizing, Cropping & Responsive Images

2.1. Resize, a key to Responsive Images

-/preview/:two_dimensions/
:two_dimensions: e.g. 300x300, 300x, x300
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.

2.2. Scale crop

-/scale_crop/:two_dimensions/
-/scale_crop/:two_dimensions/center/
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.

2.3. Crop

-/crop/:two_dimensions/:two_coords/
-/crop/:two_dimensions/center/
docs / crop

Crops an image using specified dimensions and offsets. Great for art direction.

Let’s make a responsive image

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.

To become a pro in responsiveness, check out MDN web docs and our course Introduction to Responsive Images and learn more about why it matters: performance, art direction, WebP, and breakpoints.

Lazy loading

Lazy loading is not an image property. It has to deal with adding some JavaScript code; you can find implementations of lazy loading for different JavaScript frameworks on GitHub:

• Vanilla JS
• React
• Vue
• Angular

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.

Conclusion

At the end of the day, here’s what you need to do to win at Google PageSpeed image score:

1. Run a PageDetox report to see how images affect your website load times.
2. Pick an image CDN that manipulates images on the fly, like Uploadcare.
3. Get your image assets there.
4. In your <img> elements, replace src with srcset holding image versions generated by your image CDN.
5. 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!

FAQ

What if I don’t want to upload files to Uploadcare / another CDN?

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.

What about Client Hints?

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.