Optimizing images on autopilot with Uploadcare (to improve page load speed)
Tags: imageoptimization, pagespeed, beginners, webperf
Published: 2019-02-15 14:01:18

---

title: Optimizing images on autopilot with Uploadcare (to improve page load speed)
published: true
description: A step-by-step guide on optimizing images with CDN’s URL directives to get rid of Google PageSpeed image related issues.
tags: #imageoptimization #pagespeed #beginners #webperf
canonical_url: https://blog.uploadcare.com/pagedetox-pagespeed-image-optimizations-guide-697056f9d895
cover_image: https://ucarecdn.com/146be6dd-84ae-4852-9358-74308a35aa24/-/preview/1000x1000/
---

**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](https://developers.google.com/speed/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](https://developers.google.com/speed/webp/docs/webp_study)).
  * 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.

{% gist https://gist.github.com/rsedykh/d36fbfbb12609930347cba3de10b1336 %}

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](https://uploadcare.com/docs/image_transformations/?utm_source=devto&utm_content=imageoptimizationguide).

**This step is technology agnostic: you can use [other tools](https://docs.google.com/spreadsheets/d/1e4qdGEoq7tqDCnY7iSSnl3OFoWkzhRfVAly-73A3uCc/edit) 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](https://uploadcare.com/docs/image_transformations/compression_performance/#operation-format?utm_source=devto&utm_content=imageoptimizationguide)

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](https://caniuse.com/#feat=webp). Since WebP is not everywhere, it is a good practice to specify the `jpeg` or `png` format as a fallback.

![](https://ucarecdn.com/0347f607-eff1-4ac7-adac-8ed703094e2d/11.png)

#### 1.2. Quality — saves up to ≈50%

`-/quality/:value/` 
`:value`: `lightest`, `lighter`, `normal`, `better`, `best`
[docs / image quality](https://uploadcare.com/docs/image_transformations/compression_performance/#operation-quality?utm_source=devto&utm_content=imageoptimizationguide)

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.

![](https://ucarecdn.com/eb632d22-abd6-4604-97c2-66b31209f1ee/12.png)

#### 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](https://uploadcare.com/docs/image_transformations/compression_performance/#operation-max_icc_size?utm_source=devto&utm_content=imageoptimizationguide)

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.

![](https://ucarecdn.com/c0fae55b-25fd-4183-9105-f408846eaad3/13.png)

#### Let’s check out the combined impact of those optimizations

A. [Original](https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/), **539** kb:
    
    https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/

B. `lighter` [version](https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/-/format/auto/-/quality/lighter/-/progressive/yes/-/max_icc_size/10/), **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](https://ucarecdn.com/c4bd2b28-e3de-4731-a2e3-2bdbf044be47/-/format/auto/-/quality/lightest/-/progressive/yes/-/max_icc_size/10/), **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/

![](https://ucarecdn.com/7e616a22-ec4e-438c-b694-8ccbb12e127e/1example.png)

### 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](https://uploadcare.com/docs/image_transformations/resize_crop/#operation-preview?utm_source=devto&utm_content=imageoptimizationguide)

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.

![](https://ucarecdn.com/28b53ad6-b7d4-4176-be57-e94f074a2603/21.png)

#### 2.2. Scale crop

`-/scale_crop/:two_dimensions/`
`-/scale_crop/:two_dimensions/center/`
[docs / scale crop](https://uploadcare.com/docs/image_transformations/resize_crop/#operation-
scale-crop?utm_source=devto&utm_content=imageoptimizationguide)

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.

![](https://ucarecdn.com/e321de1c-bddd-4838-8fd7-00d9f4fbef92/22.png)

#### 2.3. Crop

`-/crop/:two_dimensions/:two_coords/`
`-/crop/:two_dimensions/center/`
[docs / crop](https://uploadcare.com/docs/image_transformations/resize_crop/#operation-crop?utm_source=devto&utm_content=imageoptimizationguide)

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

![](https://ucarecdn.com/1d722887-178b-4f5d-bab5-1c58cb9fa493/23.png)

####  **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.

{% gist https://gist.github.com/rsedykh/d36fbfbb12609930347cba3de10b1336 %}

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](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) and our course [Introduction to Responsive Images](http://academy.pagedetox.com/?utm_source=devto&utm_content=imageoptimizationguide) 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](https://github.com/search?o=desc&q=lazy+load&s=stars&type=Repositories)
  * [React](https://github.com/search?o=desc&q=lazy+load+react&s=stars&type=Repositories)
  * [Vue](https://github.com/search?o=desc&q=lazy+load+vue&s=stars&type=Repositories)
  * [Angular](https://github.com/search?o=desc&q=lazy+load+angular&s=stars&type=Repositories)

Still, there are a few tricks to improve the lazy loading experience on your page:

  * Use [progressive jpegs](https://uploadcare.com/docs/image_transformations/compression_performance/#operation-progressive?utm_source=devto&utm_content=imageoptimizationguide).
  * Load very light [blurred](https://uploadcare.com/docs/image_transformations/filters/#operation-blur?utm_source=devto&utm_content=imageoptimizationguide) instance of an image before the original.
  * Or [extract the major color](https://uploadcare.com/docs/image_transformations/color_recognition/?utm_source=devto&utm_content=imageoptimizationguide) and show it until a picture gets loaded.
  * Use this color with [setfill](https://uploadcare.com/docs/image_transformations/resize_crop/#operation-setfill?utm_source=devto&utm_content=imageoptimizationguide) and [stretch](https://uploadcare.com/docs/image_transformations/resize_crop/#operation-stretch?utm_source=devto&utm_content=imageoptimizationguide) transformations.
  * Play with [face recognition](https://uploadcare.com/docs/image_transformations/face_recognition/?utm_source=devto&utm_content=imageoptimizationguide) and [object recognition](https://uploadcare.com/docs/image_transformations/object_recognition/?utm_source=devto&utm_content=imageoptimizationguide).

### 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](https://pagedetox.com?utm_source=devto&utm_content=imageoptimizationguide) report to see how images affect your website load times.
  2. Pick an image CDN that manipulates images on the fly, like [Uploadcare](https://uploadcare.com?utm_source=devto&utm_content=imageoptimizationguide).
  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](https://uploadcare.com/docs/image_transformations/proxy/?utm_source=devto&utm_content=imageoptimizationguide). 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.