HTML5:srcset属性、imageset属性和sizes属性混淆-如何正确使用？

HTML5

srcset

属性和CSS

imageset

属性对于web开发来说似乎是非常好的改进。视网膜优化和移动优化都是由浏览器完成的，除了为同一张图片指定三个或四个不同的图片URL，但尺寸不同，对吗？错了！我很困惑

我的想法很简单：浏览器应该总是选择尽可能小的图像版本。但从未扩大规模。如果需要放大，则应选择下一个更大的版本，以此类推

使用srcset指定图像有两种不同的可能性（更多信息如下：）：

1）基于设备像素比率的选择

用户代理可以选择任何给定的资源，具体取决于 用户屏幕的像素密度、缩放级别以及可能的其他因素 例如用户的网络状况

好的，太好了。视网膜屏幕后面的浏览器很可能采用2x版本，而普通屏幕后面的浏览器则采用正常大小*然而，如果不下载至少一张图片，浏览器就不知道这些图片到底有多大，对吗

因此，如果img标签的宽度/高度属性中未规定尺寸，这对响应性设计有何用处

2）基于视口的选择

这就是为什么我决定使用基于视口的选择。现将其描述如下：

用户代理将计算每个图像的有效像素密度 来自指定w描述符和指定渲染大小的图像 在“大小”属性中。然后，它可以选择任何给定的资源 根据用户屏幕的像素密度、缩放级别和 可能还有其他因素，如用户的网络状况

这听起来很不错。请看以下示例：

<img srcset="512.jpg 512w, 1024.jpg 1024w, 2048.jpg 2048w" />

虽然这不受支持：

background-image: image-set(url(256.jpg) 256w,url(512.jpg) 512w);

也许这与“sizes”属性的问题有关

---

所以我的问题是：对于上面描述的用例，我应该如何正确地使用srcset？我应该选择哪种选择类型？（为什么）我应该使用这个尺寸属性？

你的1），不知道你在说什么。为什么浏览器需要知道图像大小？它只是通过匹配像素比例来提取图像。这对反应灵敏的部位非常有帮助，因为这将消除决定何时使用视网膜图像以及何时使用正常图像的任何逻辑image@Huangism当然，这可能是答案的一部分：x消除了视网膜问题。但是如果我想在手机上显示较小版本的图像，我不能将srcset与x一起使用，对吗？这只适用于像素密度。@据我所知，这是正确的。要更改大小，请使用基于视口的选择。在我工作过的网站中，我们简单地将浏览器<768px定义为手机，因此始终使用视网膜图像，但如果您的移动目标有4k显示器呢？我的手机分辨率比我的桌面高：（@tsnorri我们的处理方式是首先，需要有一个最大站点宽度，我们的是1920，你可以将你的设置为任何值。我们的站点在超过该宽度后居中，我们的图像在两面褪色为纯色，因此在1920年之后看起来很好。我们对每个媒体查询范围使用最大的图像宽度。例如le，从768-1280，我们使用1280个图像，因此它们永远不会是像素化的（1），不知道你在说什么。为什么浏览器需要知道图像大小？它只是通过匹配像素比例来提取图像。这对响应站点非常有用，因为这将消除任何类型的逻辑来确定何时使用视网膜图像以及何时使用正常图像image@Huangism当然，这可能是答案的一部分：x elimin解决了视网膜问题。但是如果我想在手机右侧显示较小版本的图像，我不能使用srcset和x？这只是为了像素密度。@据我所知，这是正确的。要更改大小，您可以使用基于视口的选择。在我使用的站点中，我们只是将浏览器<768px定义为手机，因此始终使用ret但如果您的移动目标具有4k显示屏，该怎么办？我的移动电话的分辨率比我的桌面高：（@tsnorri我们的处理方式是首先，需要有一个最大站点宽度，我们的是1920，你可以将你的设置为任何值。我们的站点在超过该宽度后居中，我们的图像在两面褪色为纯色，因此在1920年之后看起来很好。我们对每个媒体查询范围使用最大的图像宽度。例如le，从768-1280，我们使用1280个图像，所以它们永远不会被像素化

background-image: image-set(url(256.jpg) 1x,url(512.jpg) 2x);

background-image: image-set(url(256.jpg) 256w,url(512.jpg) 512w);