Deliver Responsive and Art Directed Images For Your Website with ImageKit

Celý článek

Images are essential for all websites. Whether it is product images for an e-commerce store, photographs of picturesque locations on a travel website or images to support the content of a blog.

While they help communicate a lot more than just plain text, images are huge in terms of the bandwidth utilized. So much so, that images make up for almost 60% of the page weight of an average page on the internet. And because images are so heavy, to ensure a fast page load time, we go to great lengths to ensure that they are always optimized - compressed, in the right format and the right size.

Do I need to do more with image optimization?

YES.

In the last 10 years, the number of smartphones and similar devices has grown manifold. Combine that with cheaper and more accessible data plans, more and more people have started accessing the internet from mobile devices.

Therefore, we need to optimize our website, including the images as well, not just for our desktop users, but more importantly, for our mobile users, including the new devices with different screen sizes and resolutions that get introduced every year.

What will I need in this tutorial?

1. Basic HTML and CSS - To create a responsive web page and the styles for it
2. ImageKit.io - It is a CDN-enabled automatic image optimization server that also allows you to transform (resize, crop, blur, watermark and more) images in real-time with just a few minutes of setup. The workflow for delivering responsive images becomes significantly simple with real-time resizing.

In the examples that follow, we make use of images uploaded to the media library of a demo account created on ImageKit.

What are responsive images?

If we keep desktop devices in mind, an 800px width image would be great. However, a mobile screen requires only a 360px width image and any image significantly wider than this would consume a lot of unnecessary bandwidth. If we do the opposite, i.e. load a smaller width image on desktop devices, then it appears grainy when stretched to fit the layout on a desktop screen.

The ideal solution would be to have our images “respond” differently (or load differently) for different devices. This method of loading images is known as responsive images.

The regular img tag

In this article, we restrict ourselves to the img tag in HTML for our discussion related to responsive images.

Typically, the image tag looks like this

<img src="https://ik.imagekit.io/demo/img/image1.jpg" alt="Normal image tag" />

The src attribute of the img tags allows us to specify only one image URL for our web page. However, there are two more attributes of the img tag which allow us to create responsive images. These have been discussed later in this post.

First, let’s try to mimic a real-life use case - a product listing page on an e-commerce website. Typically on mobile devices, we would follow a one-column layout for the products (images occupy 100% of the screen width), on tablet devices, a two-column layout (images occupy 50% of screen width) and on desktop devices, a three-column layout (images occupy almost 33% of viewport width).

Here is a code demo for this layout using the img tag with just the src attribute

On both desktop and mobile devices, the same original image gets loaded, which is not the right thing to do.

How to switch to responsive images?

As mentioned earlier, the img tag provides us with two attributes that allow us to deliver responsive images to our users. These attributes are srcset and sizes.

Before we discuss in detail about the use of these two image attributes, let’s look at how does our HTML change for the above example.

<img srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320 320w,
             https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-480 480w,
             https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-720 720w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 720px) 50vw, 
            33vw"
     src="https://ik.imagekit.io/demo/resp-img/image1.jpg" alt="Responsive image tag" />

What are the srcset and sizes attributes and how does a browser use them?

To load the right image on particular screen size, we need to have the following data

1. The device dimensions - what is the device width?
2. The layout - what is the size occupied by a particular image for the current device width?
3. The appropriate image needed to fit the current layout - the image URL

The srcset and sizes attributes help answer these questions in the HTML.

The browser already knows the device width. Then the sizes attribute, written similar to CSS media queries, specifies the layout for the image for different device widths.

For example, from the sizes attribute in the responsive image tag above, if the device width is less than 480px (a mobile device), the image occupies the full viewport width (100vw). If the device width is less than 720px, the image occupies 50% of the viewport width (50vw), and for all other cases (desktop devices), the image occupies 33% of the viewport width (33vw).

The srcset attribute, on the other hand, provides a comma-separated list of image URLs that the browser can use for different layouts along with their actual pixel width.

For example, from the responsive image tag above, we provide the browser with 3 image URLs and their corresponding absolute widths. We take advantage of ImageKit’s real-time image resizing here. Using the width transformation (specified using w parameter), we are able to generate different sizes of an image in real-time.

The image URL https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320 is 320px wide and we communicate this absolute width to the browser using 320w after the image URL. Similarly https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-480 is 480px wide (width specified to the browser using 480w)and https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-720 is 720px wide (width specified to the browser using 720w).

Here is how the browser evaluates which image to load on a device with width 400px

1. Device width is 400px which is less than 480px (the first rule that matches in set specified by sizes attribute), so the image occupies 100% of the viewport width (100vw)
2. Which means that I need a 400px wide image.
3. The closest size, that is also larger than the required 400px width, from the srcset attribute is https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-480 which is 480px wide as per the srcset specification.
4. Let’s load this image.

Example code and browser behavior with responsive images

Here is a sample code that uses responsive images using the srcset and sizes attributes. Note that the CSS remains the same for both the cases, normal vs. responsive images, only the img tag in the HTML changes.

https://codepen.io/imagekit\_io/full/zbygjz

From the screenshot below, that is taken at a viewport width of 719px, the browser automatically triggers loads for 480px wide images (note tr=w-480 in all the requests in the network panel). Also, ImageKit automatically converted them to WebP ensuring even smaller image size and faster load.

On the other hand, for a desktop device, the browser automatically triggers loads for 720px wide images.

An important thing to note here is that if the browser has already loaded a larger image, even on browser resize, it is not going to trigger a request for a smaller image. In such cases, it is better to resize the image on the browser-side, than to issue another request over the network.

How to build for high-density displays?

Modern laptops and mobile devices like the MacBooks and the iPhones have high-density displays. While it is a lengthy topic in itself, a simplistic explanation would be, that for a high-density display you would need to load a larger image than a standard display, taking into account the pixel density of the high-density display.

DPR or Device Pixel Ratio is the multiplier used to specify the screen density. For example, if a high-density display has a DPR of 2, then you need to load twice the image size as compared to a standard screen for the same visual sharpness.

There can be cases where we don’t have a responsive website and instead have a separate desktop and a separate mobile website. In such a case, we don’t need different image sizes for different screen widths, but we still want to cater to multiple DPR values (a high-density screen of MacBook Pro vs. a standard screen of any other laptop - same width, but different DPR).

Here is an example where we provide different image URLs for different DPR values. We use ImageKit’s dpr transform to deliver images for different DPR values. Note that we use 1x, 2x and 3x to specify the size multiplier used for each image.

The browser automatically picks up the most appropriate image from the list specified in the srcset attribute depending on the DPR value of the device. For example, if the DPR is 2, then the browser uses the 2x image.

<img srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320,dpr-1 1x,
             https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320,dpr-2 2x,
             https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320,dpr-3 3x" 
      src="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320,dpr-3" 
      alt="DPR responsive image tag" />

Here is a live demo of responsive images to support multiple screen densities

Art Direction - Making responsive images more meaningful

In previous examples, we were able to load different images for different screen sizes and different DPR values. However, we were loading the resized versions of the same image.

Different devices may not just need different sizes of the same image but may be different images altogether to make the visual experience even better. Let’s take a look at the example below -

In this example, the image used on desktop devices contains the complete landscape along with the girl on the swing in the center. On mobile, if we use just a simple resize of the original image, then the subject of the image (the girl on the swing) becomes too small and may not have the effect intended from the image.

In such cases, we need to use a different image, where we crop a smaller, tighter region around the girl and use that for smaller screens. This art direction, utilizing different images on different devices, makes the subject stand out.

How do I get different images for art direction?

For art direction, the first step is to get a tighter crop image for the smaller screen. ImageKit makes this simple with its smart crop transformation. It automatically focuses on the most crucial part of the image to create the output image. Here is the smart crop transform in action

Original Image URL -https://ik.imagekit.io/demo/resp-img/responsive_images/image1_BJona-M_4.jpg

With ImageKit’s Smart Crop (with fo-auto parameter for auto focus) -https://ik.imagekit.io/demo/resp-img/tr:w-200,h-400,fo-auto/responsive_images/image1_BJona-M_4.jpg

The picture tag for art direction

The next step is to use the more powerful picture tag instead of the srcset and sizes attribute. This tag allows you to provide more complex specifications for which image to load, than what is possible using the srcset and sizes attributes. Here is how the updated picture tag looks like with art direction.

<picture>
    <source media="(min-width: 1081px)" srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-800">
    <source media="(min-width: 721px)" srcset="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-500,h-400,fo-auto">
    <img src="https://ik.imagekit.io/demo/resp-img/image1.jpg?tr=w-320,h-320,fo-auto" />
</picture>

Inside the picture tag, the source tag is used to provide the specification for the img tag. For desktop screens (more than width 1081px) we use ImageKit’s real-time resizing to deliver an image with width 800px, whereas for tablet and other devices we use a smart-cropped image obtained using ImageKit.

A working demo with art direction can be found here

https://codepen.io/imagekit\_io/full/ywZBzP

Here is a comparison of the same page and layout, with and without art direction. Clearly, with art direction, the subject of the image stands out in the final image.

Conclusion

Responsive images are essential for your websites. Combined with art direction, not only do they help in building a better visual experience for your users but also ensure that you are not loading any extra bytes on the page than what is needed.

ImageKit makes delivering responsive images even simpler with real-time URL-based resize and smart crop allowing us to generate different image sizes needed for different devices. Thereby, eliminating any manual efforts in building a responsive image experience (except for making the HTML changes ???? ). Additionally, ImageKit automatically delivers images in the correct format (including WebP image format) using a CDN, ensuring the lightest and fastest possible delivery of all your images.

So, go ahead and get started with ImageKit. It starts free for up to 20GB bandwidth every month! Just a few minutes to integrate with your existing images and you are ready to deliver a great visual experience on your website.