Introduction to responsive HTML images

With the advent of different screen sizes, resultions, gadgets (smartphones, tables, etc.) WEB pages needed to adapt to it. 

Long before that, the majority of websites had a fixed width of 1024px(or something similar) and there wasn't any need to make CSS adaptable to screen size.

Responsive WEB design basically means the WEB pages adapt nicely visually when we opened on many different screen sizes and different types devices.

Introduction to responsive HTML <img>

If we play with width (and/or  max-width) and media queries CSS properties, we can pretty much make web images adapt to any possible screen size.

We can make img { width: 100% } and it will always occupy full container width. 

Or we can use @media queries to make image width different in each breakpoint, .e.g:

@media (min-width: 576px) {
    img {
        width: 400px;
    }
}

@media (min-width: 768px) {
    img {
        width: 600px;
    }
}
...

So if we had a high dimensions image, we could make it look responsive with either of these ways or a combination of both, depending of what exactly we needed. This way image can be scaled down or up, depending on our screen resolution.

However, the main disadvantage of this solution is that on smaller screens and handheld devices, where loading big images means slow loading times and lost bandwidth, means the same image will be loaded on small screen as on big screens. This automatically means useless transfer of data and slow loading times on mobile devices, which is a big minus.

Solution to offer

Luckily, <img> tag now has srcset and sizes attributes. 

With srcset you can define the set of images and their sizes for the browser to choose from. 

As an example, your image tag could look like this:

<img srcset="some-toy-480w.jpg 480w, some-toy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px, 800px"
    src="some-toy-800w.jpg" alt="Some toy...">

Let's try to understand the srcset and sizes attributes separately. 

srcset

You can see what with srcset we are defining a coma separated list of images and their sizes for the different screen sizes. 

From "some-toy-480w.jpg 480w" you can see that the format is like the following: Image path followed by space, then image width in pixels (although you can nocice w used instead of px, you can read more about this on mdn website)

sizes

This is quite simple, as it defined the list of @media conditions, which basically means that we can define any range of screen sizes and make suggestions for the browser on what size of image to load for a specific browser width.

The format is simple: "(max-width: 600px) 480px, 800px" means what for screen sizes with max-width = 600px, we instruct to use 480px width images, otherwise 800px width image will always be loaded.

What's the difference ?

Before we started using srcset and sizes attributes, we only had 1 image size used for all screen sizes. This meant that we needed this image to be big enough to look nicely on the bigger screens, this also meant the size of the file was significant.

So now that we have srcset and sizes attributes working, when the page is loaded in small screen or a handheld devices, 480px width image will be loaded always as long the screen width doesn't exceed 600px;

This makes a difference, because a smaller image usually means smaller file size and faster loading times, we don't need to use images adapted to big screens and scale them down with css to use them in smartphones.  

Summary

<img  srcset and sizes is a good way to save bandwitdh and improve page loading time in smaller devices and in responsive WEB designs in general.

It has some additional intricacies, for instance such as if you open browser in full screen, meaning bigger image is loaded, it will not load the smaller one when you resize the screen size, because it's not practical. Or it may not work exactly the sam way in different browsers (and doesn't support IE, only Edge). 

However, in general It is a simple and quite reliable way to make images look nice on any screen sizes without compromising image loading times.