1

I'm trying to use srcset for the first time, with the code below:

<img srcset="url-1000x552.jpg 1000w, url-670x370.jpg 670w, url-400x221jpg 400w" src="url-670x370.jpg" sizes="(min-width:300px) 400w, (min-width:768px) 670w, (min-width:992px) 1000w">

This works in Firefox and Edge, but Chrome, Safari and Android always serve up the largest image size - and obviously the last browsers two are the ones I care most about.

I've tried:

  • Specifying sizes="100vw" instead
  • Changing order of srcset sizes
  • Removing src

Another post (Img Srcset Attribute Not Picking Smaller Image) suggests testing a srcset image in browsers - and indeed the codepen image there is only showing the larger one in my Chrome browser and on my Android phone.

Is there anything I can do about this? Is there much point in actually using srcset if it's not working in browsers??

JohnG
  • 486
  • 3
  • 22
  • "Chrome does not switch the size because Chrome already has a larger image in cache." please check this one: https://stackoverflow.com/a/28160797/737915 – sunsay Mar 03 '20 at 11:12
  • When you're working on a device with retina display (double resolution), this is taken in account, according to https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ – Esger Feb 23 '21 at 11:26

0 Answers0