Correct way to resize srcset images

Question

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 1

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.

The image you use must have dimensions divisible by 2 (for 2x) or 3 (for 3x) otherwise the browser will resize it even if you don't have a width or height set.

---

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 200 x 200 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.

Answer 2

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

With srcset, the browser does the work of figuring out which image is best

In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best.

Mat Marquis demonstrated this by showing how the browser approaches it with math. Say you're on a device with a screen width of 320px and is a 1x (non-retina) display. and the images you have are small.jpg (500px wide), medium.jpg (1000px wide), and large.jpg (2000px wide).

The browser goes:

Lemme do some quick math that nobody cares about except me.

500 / 320 = 1.5625
1000 / 320 = 3.125
2000 / 320 = 6.25

OK, so since I'm a 1x display, 1.5625 is the closest to what I need. It's a little high, but it's the best option compared to those other that are way too high. Now another browser visits the site. It's also a 320px display but it's a retina (2x) display. That browser does the same math, only then goes:

OK, so since I'm a 2x display, I'm going to throw out that 1.5625 image because it's too low for me and might look bad. I'm going to use the 3.125 image. See how that's already useful? You're letting the browser do the work of figuring out what's best for it rather than you trying to figure it out

To what you asked specifically that change in one or two pixel does not matter .What you should be looking at is basically for higher pixel density the large image will be loaded

and for 2X just use double the width 100% percent precision is not required and for getting the width you want you can use the w descriptor:

<img src="images/space-needle.jpg"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

The actual implementation where you’d want a different size image (different height, width) on different screen sizes is accomplished by using sizes attribute along with the w descriptor of srcset attribute. Let’s again learn through a couple of examples:

Example 1 Say you want the image to be viewed in half of the viewport width. You’ll type:

<img src="images/space-needle.jpg" sizes="50vw"
srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w,
images/space-needle-hd.jpg 600w">

The browser will now decide which image to download based on the browser width and the device pixel ratio. For example:

If the browser width is 500 CSS pixels, the image will be displayed 250px wide (because of 50vw). Now, this is equivalent to specifying:

srcset="images/space-needle.jpg 0.8x, images/space-needle-2x.jpg 1.6x,
images/space-needle-hd.jpg 2.4x"

So, for a 1.5x display, images/space-needle-2x.jpg will be downloaded by a browser, since it gives a device-pixel ratio of 1.6x (which is most suitable for a 1.5x display).

EDIT 1:- And what you are actually looking for is rather than srcset.You dont want your images to be blurred in resize or what you call responsive images should maintain its orginal quality and do not blurr. I have added the Q&A from SO regardiing the same issue here which explains the use image-rendering css property

EDIT 2:-

img{

      image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

The issue regarding image rendering on scaling can be addressed using the image rendering css proprety upto and extant try it out on the scaled image .Documentation is given below.

On the question whether browser will change the size of image by adjusting the image to fit to the container size answer is ie changing from 539 to 540 :-

NO it wont srcset depending upon the constraints used only takes the best picture suited for that display wrt pixel density or screen size which ever may be the given contraint.Rest depends upon the css .

Simple example without srcset https://jsfiddle.net/f03hwb7p/1/

https://drafts.csswg.org/css-images-3/#the-image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Image downscaling with CSS … Images are blurry in several Browsers http://heygrady.com/blog/2012/05/25/responsive-images-without-javascript/

External Reference 1

External Reference 2

Orginal Article from where this paragraph was taken

W3c examples adn explanation

Answer 3

If your image container is fixed to 255 x 170, do the math for

(2x = *2) = (CurrentImageSize * 2 = x)

Ratio is calculating lowest to high (Ascending)

e.g.

iPhone: 57 x 57 (1x)   
Retina iPhone: 114 x 114 (2x)    
iPad: 72 x 72 (3x)   
Retina iPad: 144 x 144 (4x)

Technically: if (1x = 57) then (2x = 114)

Demo Example: https://webkit.org/demos/srcset/