<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