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

Question

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

1. 510 x 340(根据当前图片)
2. 510 x 339(基于原始图像)

编辑

澄清我想知道srcset是如何工作的.例如,如果我使用510 x 339图像(技术上更正确的尺寸基于原始尺寸)2x将浏览器"创建"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中添加了问答,这里解释了使用image-renderingcss属性的相同问题

编辑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.c​​sswg.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示例和解释