5

I'm reading up on responsive images in HTML5 and have a question.

When would you use the x-descriptor? If for example you have different resolution versions of the same image why would you ever not use the w-descriptor? As I understand it if you define: 

<img src="fallback.img" alt"txt"
     srcset="large.jpg 1024w,
             medium.jpg 640w,
             small.jpg  320w,"
     sizes="250px"   
     alt="txt">

Then the browser figures out the pixel densities anyway by dividing the width of the images (1024,640,320) - provided by the w-descriptor with the width that they are going to be displayed at (250) - provided by the sizes attribute. And by getting the pixel densities the browser can account for high density displays.

This is how I understand it so far, if I am wrong I would love to know it. So when is the w descriptor not the best option/when is the x descriptor preferable?

DeNag
  • 65
  • 1
  • 4
  • 1
    You understand it right. If you define just one `sizes` value in `px`, you mimic the feature of the x descriptor. The only reason to use the x descriptor in those cases would be: It is shorter syntax. Historically the x descriptor was before the w descriptor. – alexander farkas Jun 08 '16 at 23:26

1 Answers1

2

Previously, I only used the x descriptor when the rendered size of the image was fixed, which happened really not that often.

The only advantage was that some browsers supported the x descriptor but to the w one.

Now that browsers support is widespread, I only use the w descriptor, and rarely <picture>.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24