问调整srcset图像大小的正确方法

EN

正确的方法是选择1: 510 x 340 (基于当前图像)。

如果您使用510 x 339 (基于原始图像)，浏览器将只是拉伸它，直到它适合2x框。

您使用的图像必须具有可被2( 2x)或3( 3x)整除的尺寸，否则即使没有宽度或高度设置，浏览器也会调整其大小。

在Chrome，Nexus 5上测试200x200 img容器内的1-600x300 (3x)图像

<img src='200x200.png' srcset='600x300.png 3x' width="200" height="200">

​

​

此图像最初包含一个圆圈，因为您可以看到浏览器拉伸图像以填充200 x 200容器。

测试2- 600x600 (3x) vs600x599 (3x)映像在200x200img容器内的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">

​

​

​

​

如果浏览器有一些智能来保留1px不同的图像(因为这些图像可能是“正确的”维度)，请进行检查。似乎不是。

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

使用srcset，浏览器可以确定哪个图像是最佳的。

在上面这个简单的例子中，我们所做的只是告诉浏览器我们有一些可用的图像，以及它们的大小。然后浏览器完成所有的工作，找出哪一个是最好的。

Marquis通过展示浏览器是如何用数学处理它来演示这一点的。假设你在一个屏幕宽度为320 1x的设备上，它是1x(非视网膜)显示器。您拥有的图像是small.jpg (500 1000px)、medium.jpg (1000 1000px)和large.jpg (2000 1000px)。

浏览器上写着：

让我做一些除了我以外没有人关心的快速数学。

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

好的，因为我是1倍的显示器，1.5625是最接近我所需要的。这是有点高，但这是最好的选择相比，其他的是太高。现在，另一个浏览器访问该网站。这也是一个320 2x显示器，但它是视网膜(2x)显示器。那个浏览器做同样的数学运算，只有这样才行：

好的，因为我是2倍的显示器，所以我要扔掉那个1.5625的图像，因为它对我来说太低了，看起来可能很糟糕。我要用3.125图像。看看这怎么已经有用了？你让浏览器做的工作是找出什么最适合它，而不是你试图找出它

对于你特别要求的，改变一个或两个像素并不重要，你应该看的.What基本上是为了更高的像素密度，大图像将被加载。 对于2X，只需使用两倍的宽度，就不需要100%的精度，要获得想要的宽度，可以使用w描述符：

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

在不同屏幕大小上需要不同大小的图像(不同的高度、宽度)的实际实现是通过使用size属性和srcset属性的w描述符来完成的。让我们再通过几个例子来学习：

示例1假设您希望在视口宽度的一半范围内查看图像。你可以输入：

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

浏览器现在将根据浏览器的宽度和设备像素比来决定要下载的图像。例如：

如果浏览器宽度为500 CSS像素，图像将显示250 If宽(因为50 If)。现在，这相当于指定：

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

因此，对于1.5x显示器，图像/空间针-2x.jpg将通过浏览器下载，因为它给出的设备像素比为1.6x (这最适合于1.5x显示器)。

编辑1:-和你真正想要的是什么，而不是srcset.You，不希望你的图像在调整大小时变得模糊，或者你所称的响应图像应该保持其自身的质量，而不是模糊。因此，我在这里添加了同样的问题，这说明了使用image-rendering的css属性。

编辑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;
}

有关缩放图像绘制的问题可以使用图像呈现css proprety来解决，下面给出了在缩放的图像.Documentation上尝试它的方法。

关于浏览器是否会通过调整图像以适应容器大小来改变图像大小的问题答案是从539更改为540 :-

不，它不会使用srcset，取决于所使用的约束，只拍摄适合于该显示器的最佳图片，wrt像素密度或屏幕大小，这可能是给定的contraint.Rest取决于css。

没有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

基于CSS…的图像降维图像在几种浏览器中都是模糊的 http://heygrady.com/blog/2012/05/25/responsive-images-without-javascript/

外部参考1

外部参考2

原文本段摘自何地

W3c示例和解释

如果您的图像容器固定为255 x 170，则对

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

比率计算最低至高(上升)

例如：

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

技术上:如果(1x = 57)那么(2x = 114)

演示示例：https://webkit.org/demos/srcset/