HTML Img tag and srcset attribute-CodePudding

I am a bit confused about the use of srcset attribute in the HTML img tag. I read several tutorials on the Web but I think stuff doesn't work as these tutorial report. First of all, let's start with an easy example:

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w">

I have two images:

assets/img/software-developer.jpeg 450x450 pixels
assets/img/software-developer-300.jpeg 300x300 pixels

Now I use Chrome Developer Tools for tests, but whatever screen size I select I always see that assets/img/software-developer.jpeg is downloaded. I can see it in the Developer Tools Properties tab looking at the property currentSrc.

Can anyone help me to understand why? I want that:

for screen with size >= 450px then assets/img/software-developer.jpeg is downloaded
for screen with size < 450px then assets/img/software-developer-300.jpeg is downloaded

Another thing that it's not clear to me is: what happens with screen size < 300px?

If the image with lowest width is assets/img/software-developer-300.jpeg that is 300x300 pixels, how I can modify the code to let it resize (become smaller in this case) to fit the viewport?

For example, Developer Tools by defaul has Galaxy Fold device that has a width of 280 pixel. In this case, both the images don't fit the screen size: how I can define my srcset to let it resize in this situation?

Web is full of information about this stuff, at a first read things are a bit confusing so I decided to start with small tests. The first tests I decided to work on is with srcset and check if the image downloaded is the one expected. It seems the tag doesn't work as expected. I know that I am missing something, hoping someone here can help to clarify.

CodePudding user response：

I think you are missing the sizes tag in there.

sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true.

The correct way to write the code to achieve would be

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" sizes="(max-width: 449px) 300px, 450px" srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w">

CodePudding user response：

I figure out the answer by myself. First of all, the srcset tag alone doesn't make too much sense, it must be always used in conjuction with sizes.

The srcset tells the browser which imahes are available, for example:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w"

Basically this attributes tells to the browser:

Hey there are two images you can use:

assets/img/software-developer-300.jpeg 300 pixel wide
assets/img/software-developer.jpeg 450 pixel wide

Now you have to tell the browser to use the former for screen < 450 px and the latter for screen >= 450. You can do this with the attribute sizes:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w" sizes="(max-width: 449px) 300px,  (min-width: 450px) 450px"

Basically, for screen up to 449px you can use the 300px image version, for screen starting from 450px you caan use the 450px version. The problem is that there are phone with screen size less than 300px (i.e. Gaalaxy Fold is 280px wide). On these screen the image is cropped and to avoid this you must tell the browser that if the screen size is less than 299px the image must be resized to 100vw. Now in my case, 100vw doesn't work properly so I just reduced it to 75vw.