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

Question

调整srcset图像大小的正确方法是什么？例如，假设我的图像是2000 x 1337.我将其大小调整为255 x 170.对于2x srcset应该是：

1. 510 x 340（基于当前图像）
2. 510 x 339（基于原始图像）

修改

澄清我想知道srcset是如何工作的。例如，如果我使用510 x 339图像（技术上基于原始尺寸更正确的尺寸）2x浏览器＆＃34;创建＆＃34;一个510 x 340的容器（当前尺寸x 2），然后调整510 x 339图像的大小以适应它内部？

Answer 1

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

使用srcset，浏览器可以确定哪个图像最好

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

Mat Marquis通过展示浏览器如何通过数学方法来证明这一点。假设您使用的屏幕宽度为320像素，并且是1倍（非视网膜）显示器。你拥有的图像是small.jpg（500px宽），medium.jpg（1000px宽）和large.jpg（2000px宽）。

浏览器：

Lemme做一些除了我以外无人问津的快速数学。

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

好的，因为我是1x显示器，1.5625最接近我的需要。它有点高，但与其他太高的选择相比，它是最好的选择。 现在另一个浏览器访问该网站。它也是320px的显示器，但它是一个视网膜（2x）显示器。该浏览器执行相同的数学计算，然后才进行：

好的，所以因为我是一个2倍的显示器，所以我要丢掉1.5625的图像，因为它对我来说太低了，可能看起来很糟糕。我将使用3.125图像。 看看它是如何有用的？你让浏览器做的工作是找出最适合它的东西，而不是试图找出它

  

你特别要求一个或两个像素的变化   没关系。你应该看什么基本上是为了更高   像素密度将加载大图像

     

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

通过使用sizes属性以及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像素，则图像将显示250px宽（因为50vw）。现在，这相当于指定：

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

因此，对于1.5倍显示器，images / space-needle-2x.jpg将由浏览器下载，因为它的设备像素比率为1.6倍（最适合1.5倍显示器）。

编辑1： - 而你实际上正在寻找的不是srcset。你不希望你的图像在调整大小时变得模糊，或者你所谓的响应图像应保持其原始质量并且不要模糊。 我在这里添加了来自SO的Q＆amp; A问题 这解释了使用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来解决，现在可以在缩放图像上进行尝试。文档如下所示。

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

不，它不会srcset取决于使用的限制只采用适合该显示的最佳图片，像素密度或屏幕尺寸可能是给定的约束.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

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 2

正确的方法是选项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容器。

在Chrome，Nexus 5上的200x200 img容器内测试2 - 600x600（3x）对比600x599（3x）图像 <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不同的图像（因为这些图像可能是＆＃34;正确的＆＃34;尺寸）。似乎没有。

Answer 3

如果图像容器固定为255 x 170，请进行

的数学计算

（2x = * 2）=（CurrentImageSize * 2 = x）

比率正在从低到高计算（升序）

e.g。

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

技术上：if（1x = 57）然后（2x = 114）

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