4

I have the following tag and checking the network panel, I see it is not working as I was expecting. I don't know if this is the normal behaviour for local or good-bandwith testing or if there is something wrong with my code:

<img sizes="
  (min-width: 300px) 300px,
  (min-width: 450px) 600px,
  (min-width: 1000px) 1200px,
  ((max-width: 450px) and (min-resolution: 2dppx)) 600px"
srcset="
  /uploaded/coso_300.jpg 300w,
  /uploaded/coso_600.jpg 600w,
  /uploaded/coso_1200.jpg 1200w,
  /uploaded/coso_2000.jpg 2000w"
src="/uploaded/coso.jpg" >

The files are being selected at a 320px wide viewport in this order:

  • coso_600.jpg > coso.jpg (I expected coso_300.jpg)

at a 600px wide:

  • same as before (I expected coso_300.jpg)

at a 1300px wide:

  • coso_300.jpg > coso.jpg > coso_600.jpg (I expected coso_1200.jpg)

at a 2500px wide screen:

  • same (I expected coso_2000.jpg)
Vandervals
  • 5,774
  • 6
  • 48
  • 94

1 Answers1

1

Try using <picture> tag. Refer HTML element

<picture>
  <source 
    media="(min-width: 300px)"
    srcset="coso_300.jpg">
  <source 
    media="(min-width: 600px)"
    srcset="coso_600.jpg">
  <source 
    media="(min-width: 1200px)"
    srcset="coso_1200.jpg">
  <source 
    media="(min-width: 2000px)"
    srcset="coso_2000.jpg">
  <img 
    src="/uploaded/coso.jpg" 
    alt="Image">
</picture>
Geethu Jose
  • 1,953
  • 2
  • 14
  • 30