Here's my HTML:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>serset test</title>
</head>
<body>
<img srcset="/img/about/icon-320.png 320w,
/img/about/icon-480.jpg 480w,
/img/buy/icon-640.png 640w,
/img/buy/icon-780.jpg 780w,
/img/buy/icon-1280.png 1280w"
src="/img/buy/fallback.png"
alt="responsive image">
</body>
</html>
I tried on few devices and most of them load the icon-1280.png, only few loaded the icon-780.jpg, none of the devices that I tried loaded the smaller images, regardless of the screen resolution.
Even on chrome developer tools when I change to "low-end mobile" it still loads only the large images, even on small resolutions. I also tried with fiddler "Simulate modem speed" and it also didn't change anything.
I keep clearing my cache before each try so it's not a cache issue.
I want my site to load as fast as possible on mobile by serving only the required images by its screen size. What should I do and why is the img element with srcset still loads the large images regardless of the actual device resolution? (I know I could resort to <picture> but still want to give a shot with srcset as it's suppose to be to right tool for this job)
The issue is due to pixel density of the device, if you are using a retina phone or a phone with higher than 1 pixel density then the browser will choose the bigger image. You would need to use js in combination with your markup to determine which image is best to be used.
On some sites like toyota.ca or lexus.ca you will notice the image is different for different screen size and changing your browser width, will trigger the change. You could grab code from those sites after unminifiying them. It is unfortunate that srcset by itself cannot do this job.