joshhunt joshhunt - 5 months ago 21
HTML Question

Correct way to resize srcset images

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:


  1. 510 x 340 (based on current image)

  2. 510 x 339 (based on original image)



Edit

To clarify I want to know how srcset works. For example if I use the 510 x 339 image (technically more correct dimensions based on the original) for 2x will the browser "create" a 510 x 340 container (current dimensions x 2) and then resize the 510 x 339 image to fit inside it?

Answer

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">

Test 1 - 1

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">

Test 2 - 1

Test 2 - 2

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.

Comments