Lighter and automatic responsive images with Client Hints

Rahul Nanwani
With the latest updates in Chrome, versions 67 and above on desktops no longer send Client Hints to third-party domain names because of privacy concerns. So if you have a website at www.example.com, Client Hints will not be sent to images.example.com or ik.imagekit.io. Client hints continue to work on mobile devices.

We are pretty excited to announce that ImageKit now supports automatic image transformations based on Client Hints – DPR, Width and Save-Data. The support for these Client Hints is available via new transformations dpr-auto for automatic image DPR, w-auto for automatic image width and a dashboard setting to enable the Save-Data mode for your images. Combine these with ImageKit’s existing image optimization, transformation and delivery capabilities, it becomes even simpler to deliver responsive images. Images, optimized and resized perfectly for each device and layout, with absolutely minimal effort.

Responsive images without Client Hints

With the growing number of devices and screen sizes, it is absolutely essential that we design our websites and apps in a way that ensures a great user experience across all these devices. Your website should work well and look great on an Android Phone, on the latest Apple iPhone, on a tablet device and on a laptop.

demo of responsive images

While it has become easier to implement fluid and responsive layouts for our HTML by using CSS libraries like Bootstrap, the same is not true for images. We often stick to using just one large image across devices which is a major reason for slow loading websites. And even the new srcset and sizes attributes for images, which solve the problem of adapting images in a responsive layout, haven’t become very popular with the developer community.

There are two main reasons for it

  1. Resource-generation complexity

    Using srcset for responsive images requires you to generate different sizes of the same image, usually more than 3, to cater to different requirements on different devices.

    For example, for an image that stretches across the entire page, you would need images with width 1440px for laptops, 960px for tablets, 480px & High-density image for bigger phones, and 320px for smaller phones.

    It is complex to generate so many variations of images, especially if you are dealing with millions of images. Thankfully, ImageKit already solved this part for you, by enabling real-time resizing and cropping using URL parameters.

  2. Markup Complexity

    The other reason, and the more complex one to solve, is the markup required for responsive images. In our blog, we have covered the use and function of srcset and sizes attribute for responsive images across devices. Using similar logic, here is a small example implementing the responsive image with the breakpoints that we mentioned in point one.

    <img src="https://ik.imagekit.io/demo/img/default-image.jpg" sizes="(max-width: 960px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/img/tr:w-360/default-image.jpg 360w, https://ik.imagekit.io/demo/img/tr:w-480/default-image.jpg 480w, https://ik.imagekit.io/demo/img/tr:w-960/default-image.jpg 960w, https://ik.imagekit.io/demo/img/tr:w-1440/default-image.jpg 1440w" />

    Now imagine having to generate this markup for all the images for your website – banners, product images, profile pictures etc. The markup is already very complex and it gets even more complex if you try solving for other factors like DPR. It is often because of the development effort involved in switching to this markup, that companies with access to real-time image resizing capabilities, do not switch to completely responsive images.

Additionally, the above markup has its limitations. For example, a user’s preferences like the Data-Saver mode, cannot be passed to the image server with this markup.

The use of Client Hints

The basic idea of Client Hints is very simple – the device (“client”) sends some “hints” to the server about its requirement, and the server is responsible for serving the right resource based on those hints. Instead of writing the complex markup on the frontend, you let the server do the heavy lifting for you.

For example, with client hints enabled, the browser can tell the server, that it needs a 400px wide image for the current layout and the device DPR is 2. The server can decide what image to serve on the basis of these hints.

Client Hint Demo

Or, the client can tell the server that the user has enabled the Data-Saver mode on his device, and the server can send a lighter version of the same image back to the user instead of the normal high-resolution version.

Save-Data request demo

Since, it is the browser and the server interacting with each other via Client Hints, your job gets much simpler. Shorter, readable markup that can achieve the same functionality as the one shared above. Let’s look at some examples of how we can start using client hints for our images.

Using Client Hints with ImageKit

You can now leverage the power of client hints – DPR, Width and Save-Data – for your images being delivered via ImageKit. We will first cover the DPR and Width client hints and later talk about using the Save-Data client hint.

Using automatic DPR for images with ImageKit

The first step towards using client hints is enabling the browser to advertise these hints to the server. By default, client hints are disabled. You need a simple meta tag in the beginning of your HTML to enable them.


The above code example, enables the browser to send DPR client hint to the browser.

DPR Request Header

ImageKit already supported numeric DPR transformation using the dpr transformation parameter like dpr-1 to get a 1x image, dpr-2 to get a 2x image. To support automatic DPR, you can now use dpr-auto in your transformation string and ImageKit will automatically delivery different images to different devices based on their pixel density.

<img src="https://ik.imagekit.io/demo/img/tr:dpr-auto/default-image.jpg" />

The above URL gives a 1x image if the DPR client hint is 1. It gives a 2x image if the DPR client hint is 2 and so on. One URL to deliver different images customized for each device.

Using automatic width for images with ImageKit

Similar to dpr-auto for automatic DPR in images, you can now use w-auto to resize your images automatically for different layouts using the Width Client-Hint.

We need to advertise the Width client hint to ImageKit. We can send both, DPR and Width client hints to ImageKit using the following meta tag in the HTML


Additionally, for automatic width to work, you need to tell the server the size of the image in the layout using the sizes attribute. Automatic resizing works only if the browser sends the Width header to ImageKit and the browser would send the Width header only if you specify the sizes attribute with the image tag. So sizes is essential for automatic resizing to work. You can read more about sizes attribute here.

The image tag for an image that occupies 100% of the viewport width (vw) with automatic resizing would look like

<img src="https://ik.imagekit.io/demo/img/tr:w-auto/default-image.jpg" sizes="100vw" />

With both the tag and the sizes attribute taken care of, the browser starts sending the Width header along with the DPR header.

 

Similarly, let’s say, for our images we want a 2-column layout on desktops and 1-column layout on mobile devices. The automatic resizing image tag would look like

<img src="https://ik.imagekit.io/demo/img/tr:w-auto/default-image.jpg" sizes="(max-width: 480px) 50vw, 100vw" />

How does ImageKit use the Width client?

Once ImageKit gets the Width header for an image request, it uses that header value to resize the image. The Width header value is rounded to the next 100 to ensure better caching and performance. For example, if Width header is 476 or 484, ImageKit delivers a 500px wide image in both the cases. If the Width header is 512, then ImageKit delivers a 600px wide image.

Also, the Width header sent by the browser automatically takes into account the DPR value. Thus, if your device DPR is 2 and you specify the size as 200px, the browser would send 400 in the header. So we do not need to specify the dpr-auto transformation in the URL.

Fallback for automatic width

Not all browsers support client hints (we will talk about that later in this post). In such cases, we need to have a fallback width. This width can be used for resizing in case the Width header is not available.

We can accomplish that using the following transformation in our image

<img src="https://ik.imagekit.io/demo/img/tr:w-auto-400/default-image.jpg" sizes="100vw" />

The transformation `w-auto-400` tells ImageKit to use the Width client hint header if available, else use width equal to 400px to resize the image. This ensures that you are not loading an unnecessarily large image on devices that do not support Client Hints.

Combining automatic width with aspect ratio for accurate resizing

The w-auto transformation allows automatic resizing based on the image width. As the width gets adjusted automatically, the height of the output image also changes. This will happen to preserve the complete image and original aspect ratio.

Thus, we can control the image width. But, we are not able to control the output height or the aspect ratio of the final image.

You could specify a fixed height transformation in the URL, like `h-200` but it may not give you the desired output for different widths. For example, with the Width header equal to 100, the output image would be 100×200. With the Width header equal to 300, the output image will be 300×200.

The aspect ratio transform allows you to control the final dimension of the image by specifying a relative ratio of the width and height. For example, if our layout needs an image to always be in an aspect ratio of 1:1 (i.e a square; 1 part of width to 1 part of height), we can use the following image transformation

<img src="https://ik.imagekit.io/demo/img/tr:w-auto-400,ar-1-1/default-image.jpg" sizes="100vw" />

In this case, with the Width header equal to 100, the output image would be 100×100 (1:1 ratio). With the Width header equal to 300, the output image will be 300×300 (1:1 ratio again).

Thus combining w-auto with a fallback width and the aspect-ratio transform will give you easy access to responsive images with great control on the final image output.

Using Save-Data Client Hint

We have talked about automatic DPR and automatic width transform for images. Another client hint that is now supported in ImageKit is Save-Data. Mobile browsers such as Chrome Mobile and Opera Mobile, allow the user to activate a data saver mode. With this mode enabled, the browsers sends the Save-Data header with the request, with the value set as on. With this mode disabled, the Save-Data header is not sent at all.

As mentioned in Google’s post about the Save-Data header,

By identifying this header, a web page can customize and deliver an optimized user experience to cost- and performance-constrained users.

This is exactly what ImageKit allows you to do.

If a user is using the data saver mode in his browser, ImageKit compresses the image even further. This reduces the size of the image to ensure faster delivery and lighter resources for that user. If a user doesn’t use the data saver mode, he continues to get the same image as always. Exactly the same URL that caters to different performance requirements of different users.

 

 

The images are almost 33% smaller when accessed by a client with Save-Data enabled. You can test this in your Chrome desktop by installing this plugin.

Note, that the Save-Data client, unlike DPR and Width client hints, will be passed to the server without any changes in your HTML. The Save-Data header will be passed as “on” when the data-saver mode is enabled.

Save-Data header

Using Save-Data mode with ImageKit

To start utilizing this Save-Data client hint with ImageKit, you need to enable it from your ImageKit dashboard. Log in to your dashboard, go to “Image Settings” tab and under “Optimization”. Set “ENABLE SUPPORT FOR OF DATA-SAVER MODE” to “Yes”.

imagekit save-data dashboard setting

We have kept this setting as an opt-in as there might be certain internal guidelines you might not want additional compression of your images.

Browser Support of Client hints

Client Hints is a relatively new specification and not all browsers implement it. At the time of writing of this post, Chrome (desktop and mobile), UC Browser and Samsung Browser. Chrome alone makes up for almost 60% of the traffic on most websites, if not more.

The Save-Data header is supported by Chrome Mobile 49+, Opera Mobile 35+ and Yandex 16.2+ browser as per Google’s blog post. Again, a significant percentage of mobile browsing traffic comes from Chrome Mobile and Opera Mobile.

What’s the point  of using client hints if not all browsers support it?

If you realize the importance of image optimization, you should definitely implement responsive images on your website. The best way (the one that is supported in all the browsers) is to write the extensive markup involving srcset and sizes attributes of the `img` tag like we discussed earlier in the post.

However, if that is not possible, then using these client hint based transforms, is a simple step towards responsive images. It provides tremendous performance gains for at least 60% of your users and gracefully falls back to the defaults for the other 40%. Using the client hint based transforms involves minimal code changes. Developers can get started with responsive images on their website immediately.

For the greater good

Also, for new specs being implemented in browsers, it is a lot like a chicken and egg problem. Browsers won’t implement a specification, if users don’t start adopting it. And user’s won’t adopt the specification, if a lot of browsers don’t implement it. For example, Firefox still doesn’t support WebP and that is one of the reasons why WebP adoption is low. Services like ImageKit make it easier to utilise WebP images wherever possible with minimum effort.

So, for everyone’s benefit, we urge you, that if you have not implemented responsive images on your website yet, start using the above client hint based transforms for your images. Your users would love the great experience with perfect images for each device and the performance boost that lighter images bring to your website.