响应式图像、srcset 和尺寸答案

【问题标题】：Responsive image, srcset and sizes响应式图像、srcset 和尺寸
【发布时间】：2020-08-16 20:00:30
【问题描述】：

我开始使用响应式图片，但我有一点疑问。

我有一个图标。我网站上的这个图标总是有两种尺寸：一个小版本，74 像素宽，一个大版本，94 像素宽。

<img alt="Sezione Gino" style="background-color: #dd0505" srcset="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=1&amp;q=75 1x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=2&amp;q=50 2x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=3&amp;q=35 3x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=4&amp;q=23 4x,
https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress&amp;dpr=5&amp;q=20 5x" sizes="94px" src="https://website.imgix.net/system/uploads/section/icon/1/immuni_t.jpg?ixlib=rails-4.0.0&amp;w=94&amp;h=72&amp;fit=crop&amp;sizes=94px&amp;auto=format%2Ccompress">

我使用 imgix 为大图标创建了这个 srcset。我检查了图像，它们以正确的方式调整大小，1x 是 94 像素宽，2x 是 188 像素宽。

我将尺寸固定为 94，因为在大版本中，图像始终为 94 像素。

现在我的问题是：对于 74 像素版本，所以小图标，我必须使用 74 像素的大小重新创建集合？

【问题讨论】：

标签： html responsive-design imgix

【解决方案1】：

是的，您必须重新创建集合。

如果它们是同一个图标，您可以复制并粘贴并将w=94 替换为w=74，但您可能还需要调整高度以免图像失真。

【讨论】：