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

Question

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

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

编辑

澄清一下，我想知道 srcset 是如何工作的。例如，如果我将 510 x 339 图像（技术上基于原始尺寸更正确）用于 2x，浏览器将 "create" 一个 510 x 340 容器（当前尺寸 x 2），然后将 510 x 339 图像调整为适合里面吗？

Answer 1

如果您的图像容器固定为 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)

技术上：if (1x = 57) then (2x = 114)

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

Answer 2

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

使用 srcset，浏览器会确定最佳图像

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

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

浏览器运行：

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

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

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

好的，既然我是 2x 显示器，我将丢弃那个 1.5625 图像，因为它对我来说太低而且可能看起来很糟糕。我将使用 3.125 图像。看看这已经很有用了吗？您让浏览器完成找出最适合它的工作，而不是您试图找出答案

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

您想要在不同屏幕尺寸上使用不同尺寸图像（不同高度、宽度）的实际实现是通过使用 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.You 不希望您的图像在调整大小时变得模糊，或者您所谓的响应式图像应该保持其原始质量并且不模糊。我在这里添加了 SO 关于同一问题的问答这解释了使用 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 upto and extant try it on the scaled image.Documentation are given below.

关于浏览器是否会通过调整图像以适应容器大小来改变图像大小的问题答案是即从 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

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

正确的方法是选项 1：510 x 340（基于当前图像）

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

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

测试 1 - Chrome、Nexus 5

上 200x200 img 容器内的 600x300 (3x) 图像

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

这张图片原本包含一个圆圈，您可以看到浏览器拉伸图片以填充 200 x 200 的容器。

测试 2 - Chrome、Nexus 5 上 200x200 img 容器内的 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 不同的图像（因为这些图像可能是 "correct" 尺寸）。好像没有。

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

Correct way to resize srcset images

html

image

srcset

使用 srcset，浏览器会确定最佳图像