What is the correct way to resize srcset images? For example say I have an image that is 2000 x 1337. I resize it to 255 x 170. For 2x srcset should it be:
The correct way is option 1: 510 x 340 (based on current image)
If you use 510 x 339 (based on original image) the browser will just stretch it until it fits inside the 2x box.
Test 1 - 600x300 (3x) image inside 200x200 img container on Chrome, Nexus 5
<img src='200x200.png' srcset='600x300.png 3x' width="200" height="200">
This image originally contains a circle, as you can see the browser stretches the image to fill the 510 x 340 container.
Test 2 - 600x600 (3x) vs 600x599 (3x) image inside 200x200 img container on Chrome, Nexus 5
<img src='200x200.png' srcset='600x600.png 3x' width="200" height="200">
<img src='200x200.png' srcset='600x599.png 3x' width="200" height="200">
Checking just in case the browser has some smarts to leave images that are 1px different alone (because it is possible that these images would be the "correct" dimensions). Doesn't seem to.