2

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?

10
  • from what I know about it should be based on screen size for example
    – codefreaK
    Jun 22, 2016 at 6:18
  • Based on screen size?
    – joshhunt
    Jun 22, 2016 at 8:36
  • yes ofcourse only thing that depends is screen size not the actual image
    – codefreaK
    Jun 22, 2016 at 9:46
  • Care to explain the downvote?
    – joshhunt
    Jun 26, 2016 at 11:02
  • I did'nt down vote you
    – codefreaK
    Jun 26, 2016 at 12:13

3 Answers 3

6
+50
<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

17
  • 3
    I believe this is from an external source. Please be kind enough to reference the URl, If it's not yours. Cheers! Jun 22, 2016 at 10:23
  • yes it is I was middle of editing and adding it need to do bit more citation and examples from w3c org
    – codefreaK
    Jun 22, 2016 at 10:39
  • @JeradRutnam Nice to point it out and sir and do your civic duty :D upvote if find it correct
    – codefreaK
    Jun 22, 2016 at 11:11
  • I'm appreciate the effort you have put in to your answer but unfortunately I don't think that it answers my question. "To what you asked specifically that change in one or two pixel does not matter" I disagree, 1px can make a lot of difference because the browser might have to resize the image which can create a "blurry" image. Example: jsfiddle.net/zj1m1q7a
    – joshhunt
    Jun 23, 2016 at 1:48
  • that is altogether a different issue the purpose of the srcset is defeated in this process.what you have to do is use photoshop to resize the image according to calculated dimension for each screen size your targeted dimension for 2x,3x,4x etc and use this method to make the image remain sharp and not blurred using photoshop sitepoint.com/resize-an-image-in-photoshop. Once you go for the multiple of the screen size it would adapt the screen size.and another thing for the targeted resize do it each time from orginal file
    – codefreaK
    Jun 23, 2016 at 5:37
2

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

Test 1 - 1

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

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.

0

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/

2
  • Sorry, I'm not sure what you are trying to say? How do you know that it should be based from the current image size and not the original image size?
    – joshhunt
    Jun 22, 2016 at 8:36
  • You are using resized images or original image on the site? Jun 22, 2016 at 8:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.