2

I want to download the 80w image on screens with a max-width of 991px and the 160w image on screens with a min-width of 992px.

With the code below both images are downloaded on screens with a max-width of 991px, what is wrong?

   <img src="img-160.jpg" 
     srcset="img-160.jpg 160w, img-80.jpg 80w"
     sizes="(max-width: 991px) 80px, (min-width: 992px) 160px">
Gabriel Souza
  • 965
  • 5
  • 16
  • 36
  • Is the other image downloading on it's "should be 992 as min" browser? @GabrielSouza –  Jan 25 '18 at 21:46
  • Yes, it's downloading – Gabriel Souza Jan 25 '18 at 21:49
  • I have added an alternate route to take. @GabrielSouza –  Jan 25 '18 at 22:01
  • FYI: The media condition should be omitted on the last part of your `sizes` attribute (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes). This should give you `sizes="(max-width: 991px) 80px, 160px"`. I don’t think this is the cause of your double-loading problem, however – keithjgrant Sep 13 '18 at 19:47

0 Answers0