Attributes srcset + sizes in <img> tag

Responsive images with HTML

in this post, I will introduce you to the usage of img tag efficiently and performant way, why efficiently? because it works and why performant? because the usage of the resources is optimized based on the device that is showing our content let's dive into the action:

First than all thanks to Kevin Powell for the end of post video that inspired me

This is my reume of it:

I will talk to you about the src-set and sizes attributes and how to use them:

let's begin with src-set, according to MDN Mozzilla Webdocs:

: The Image Embed element - HTML: HyperText Markup Language | MDN

When we use the srcset attribute it will accept as many arguments as images in different densities you have separated by commas, but how do you tell the browser which of them will load?

Easy you can use 2 approaches one is to use the popular pixel ratio value that can be 2x 3x likethis:

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 2x,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 3x" />

Remember to set the original src attribute to allow old browsers to render an image but for a recommendation, this image should be the smallest in quality because if it is an older browser maybe is an older screen ;), let's dig into it.

We see 3 sources based on img quality and of course img weight after these sources, we define the pixel density of the screen, who will render the image and the browser will make the calculation to render the best image in each situation.

But there is another method that in my opinion es better than the pixel ratio and the method consist in define the width of the src image the only difference is that instead of using 2x and 3x we use the amount of pixel width followed by the w char like this:

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w" />

With this information, the browser will detect the image based on its width, dividing the actual width screen with the pixel ratio and approximating this calc to the image size for the device.

But that is not all, because the width of the browser is not always the size of the image and you can have a better performance if you tell the browser exactly how much of the width of the browser have this image to cover, to make that you must assign an extra attribute the Size attribute:

here is de MDN definition:

: The Image Embed element - HTML: HyperText Markup Language | MDN

It contains a set of source sizes separated by commas, which can tell you how much of the viewport will be occupied with the image in every breakpoint of the CSS media queries, this width, should be defined with two parameters, the media query used in the image example `(min-width: 600px)`(this put as an example of what happen if the image has this min-width ) and the width of the image that can be 50% of the viewport represented by 50vw and you can separate every media query + width with commas letting the last one (the minimum in this case without media query to use as default. here is a complete example

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg"
srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-500.jpg 500w,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1000.jpg 1000w,
        https://s3-us-west-2.amazonaws.com/s.cdpn.io/308367/cat-1500.jpg 1500w" 
     sizes="(min-width: 600px) 50vw, 
            100vw"   
     alt="alternative text">

here is the video that inspires this post thanks to Kevin Powell

and here the working example