953 讀數

初学者指南：使用 srcset 的响应式图像

经过 imgix5m2023/06/23

太長; 讀書

优化图像对于运行高性能网站和实现响应式设计极其重要。 `srcset` 属性是当今最好的方法之一。使用 imgix，您可以轻松地以流体宽度或固定宽度形式自动化 srcset，并利用自动压缩、格式转换和可变质量设置。

由于典型页面的重量近 50% 由图像组成，因此优化图像对于运行高性能网站极其重要。您无需传输即可提供内容的每个字节都意味着为您的用户提供更精简的页面和更快的加载时间。

本教程介绍了使用srcset属性的详细信息，以及 imgix 如何使该过程变得更容易。

提供正确大小的图像非常重要，因为它可以最大限度地减少传输的字节数和CPU 开销。 srcset属性是当今实现此目的的最佳方法之一。

srcset 和显示密度

srcset提供了一种简单的方法来为不同的设备分辨率指定不同的图像。它允许网站向具有高分辨率显示器的现代设备提供 2x、3x 或更高版本的图像。在img标签中使用它很简单：

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

虽然这为用户提供了最好的资产，但它却将生成和存储每个资产的每个版本的负担转移给了服务。这可能会导致存储成本激增，并且您可能永远无法为生成的每项资产提供服务。

当处理大型库或用户生成的内容时，这是站不住脚的。

有了 imgix，您的整个图像库即可立即准备好srcset 。

将 srcset 与 imgix 一起使用

使用 imgix w和dpr URL 参数，我们可以简化在图像上生成srcset属性所需的工作量。对于本示例，我们将使用位于以下位置的图像：

https://assets.imgix.net/examples/bluehat.jpg

我们希望以 400 像素宽提供此图像：

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

我们获得一个图像标签，该标签根据设备像素比 (DPR) 为每个设备提供最佳分辨率。当给定dpr参数时，imgix 将自动提供更多像素。

计算设备像素比

您可以看到我们已分别将dpr=1 、 dpr=2和dpr=3应用于我们的 1x、2x 和 3x 资产。 dpr参数指示 imgix 将w参数视为与设备无关的像素（也称为“CSS 像素”）。

因此， dpr=2时的 400×300 图像实际上将是 800×600 像素图像。 dpr=3图像将为 1200×900 像素。

这为您提供了两全其美的优势：为支持它的设备提供完整的分辨率，而不会向不使用它的设备提供不必要的数据。通过使用 imgix，我们只需存储原始资源，然后动态操作它，如我们上面所见。

这也消除了4x设备问世时的麻烦。 imgix 目前最多支持dpr=5 。

这种做法最适合固定图像布局。目前广泛支持将srcset与dpr一起使用。

在媒体查询中使用`srcset`和`sizes`

处理流体布局的响应式图像的另一种方法是使用srcset的尺寸定义。该解决方案使您能够根据sizes属性中的媒体查询定义来确定尺寸目标。

浏览器将请求最合适的图像，或者根据浏览器的不同，从缓存中加载可用的最佳图像。

以下示例演示了使用 imgix 将三个图像的大小调整为 1024、640 和 480 像素宽。使用sizes属性，我们针对图像行为进行两次查询。

在36em或以上的视口中，图像将以视口宽度的 1/3 显示。

低于该尺寸，图像将以视口的完整尺寸显示。在这些尺寸下，浏览器将确定当页面以给定的目标尺寸呈现时要加载哪个图像。

 <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >

请参阅 imgix 的笔 <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) 在 <a href="https://codepen.io" target="_blank">CodePen</a> 上。

使用 imgix 的最佳实践

使用srcset和 imgix 提供尽可能最佳的图像时，还有更多需要考虑的事情。

imgix 能够添加额外的操作，以便您更好地控制输出图像，并且由于它们是在 URL 中定义的，因此您可以微调设置并在决策发生变化时进行后期编辑。

使用srcset的挑战之一是您希望生成足够的大小，以便大多数用户下载的图像大小与他们在屏幕上看到的图像接近，但如果生成太多大小，最终可能会影响缓存-能力，这可能会对性能产生负面影响。

幸运的是，许多imgix 库可以自动为您生成最佳的srcset 。

使用`fit=max`

在 imgix URL 上使用fit=max参数将确保传递的图像永远不会大于其原始大小。这样，当请求dpr=3图像时，不会有任何图像外推。阅读文档中有关fit更多信息。

使用`auto=format`

auto=format参数将为支持它的浏览器（Chrome、Firefox 等）提供轻量级 WebP 图像，并为其他实例回退到原始格式。

WebP 等更现代的格式可以大大减少发送到客户端的图像数据量；有时高达 35%。在文档中阅读有关自动内容协商的更多信息。

使用可变质量

使用 imgix 设置dpr时，您可能需要考虑调整图像的质量。将q参数设置为较低的值以获得较高的 DPR，可以减小文件大小，同时保持图像的更密集的像素集。

?q=80图像大小为21.3kB。尝试一下，看看 Sandbox 中的差异。

?dpr=2&q=40图像大小为34.7kB。尝试一下，看看沙盒中的差异。

?dpr=3&q=20图像大小为42.1kB。尝试一下，看看沙盒中的差异。

使用 imgix URL API 可以使这种常见做法变得更容易。调整质量对于 WebP 和 JPEG 等有损格式尤其有效。

把它们放在一起

以下是将这些示例应用于我们的srcset DPR 示例的实现：

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

请参阅 imgix 的笔 <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) 在 <a href="https://codepen.io" target="_blank">CodePen</a> 上。