Responsive Images Tutorial

In this post I am writing about what are responsive images and how to implement them in your website. If you are building a responsive website then responsive images is one of the most important components you must deal with.

What are Responsive Images?

Responsive images are used in responsive websites. In responsive websites we resize the image width according to the width of the container. And make we make our website look awesome. But it doesn’t end here. There are two major problems happening in this case.

Suppose our image resolution is very large and we are displaying the image in a small sized screen, in this case we don’t need such a large image. Its wastage of bandwidth, instead we should show a smaller sized version of that image. Displaying a higher resolution image in small size makes the image look even more worse.

Sometimes objects on the images become very tiny in smaller screens and therefore are not visible. Sometimes its beneficial to crop some images to be shown in smaller screens so that important objects on the image don’t miss out.

Therefore bandwidth consumed by images and cropping of images are two issues we have while making our websites responsive.

So responsive image is defined as providing different images for different screen sizes.

Responsive Image Solutions

There are many different solutions that have been purposed for responsive images. Four major techniques are classical solution, srcset and sizes attributes, picture element and src.sencha.io.

Classical Solution to Responsive Image

We can detect viewport or device width using media queries and provide alternative images accordingly.

The problem with this approach is that user cannot download the image.

<img> tag srcset and sizes attributes as Responsive Image solution

sizes attribute provides the image render width to the browser based on viewport width. Browser first finds the image render width and then downloads best fit image from the list of images specified in the srcset attribute. srcset attribute is used to provide alternative versions of images using the image dimensions and device pixel density.

srcset attribute can take multiple values comma separated. Each value has a image URL in the beginning and then image dimension width and/or pixel density. Dimension width is measured in ‘w’ unit equivalent to pixels. 1x and 2x represent regular displays and retina displays respectively. src attribute become fallback for srcset attribute.

Using sizes attribute we can provide the image display width and the browser will choose the best image according to it from the srcset images.

sizes attribute takes multiple values. Each values composed of media query and/or render width. Browser matches the media query and then finds its respective image render width. If sizes attribute is not provided then browser selects the best fit image according to the viewport width.

Format of sizes attribute:

Here we defined the sizes attribute to be 50%. Its in percentage therefore browser calculates it based on the width of viewport. So if viewport width is 1024px then image render width is 512px. So browser will try to download a image whose resolution is less than equal to 512px from the srcset. If it cannot then it will fallback to src attribute.

This is a more advanced usage of srcset and sizes attribute.

Here we make the image render in 100px if viewport width is more than 100px. Similarly image render width is 400px if viewport width is more than 200px. Similarly render width is 3000px if viewport size is more than 1000px. Now browser finds the best image from the srcset according to the calculated render width.

<picture> Element as Responsive Image Solution

<picture> can also be used as a solution infact its the best solution. Picture tag contains many <source> tags just like audio and video tags. Source tags has three major attributes i.e., media, sizes and srcset.

sizes and srcset attribute on source tag works the same way as it works in the img tag. As there are multiple source tags, any one is choosed based on the media tag which contains media queries.

So first browser selects a source tag based on media query. Then interprets the sizes attribute and then the srcset attribute.

Let’s see an basic example of picture tag:

Whichever source tag matches first is interpreted. Therefore only one source tag is interpreted by the browser.

More advanced usage of picture tag

Many browsers don’t support sizes attribute, srcset attribute, picture tag and source tag. Therefore you can use Picture Fill Polyfill.

src.sencha.io

Sencha provides a cloud solution to responsive images. More on it here.

Conclusion

I tried to cover everything I can in this article. I will be updating it further more and I find new techniques. Please share it if you liked it. Thanks for reading.