由于 ，因此优化图像对于运行高性能网站极其重要。您无需传输即可提供内容的每个字节都意味着为您的用户提供更精简的页面和更快的加载时间。 典型页面的重量近 50% 由图像组成 本教程介绍了使用 属性的详细信息，以及 imgix 如何使该过程变得更容易。 srcset 提供正确大小的图像非常重要，因为它可以最大限度地减少传输的字节数和 。  属性是当今实现此目的的最佳方法之一。  CPU 开销 srcset  srcset 和显示密度 提供了一种简单的方法来为不同的设备分辨率指定不同的图像。它允许网站向具有高分辨率显示器的现代设备提供 2x、3x 或更高版本的图像。在 标签中使用它很简单： srcset img   <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" > 虽然这为用户提供了最好的资产，但它却将生成和存储每个资产的每个版本的负担转移给了服务。这可能会导致存储成本激增，并且您可能永远无法为生成的每项资产提供服务。 当处理大型库或用户生成的内容时，这是站不住脚的。 有了 imgix，您的整个图像库即可立即准备好  。 srcset 将 srcset 与 imgix 一起使用 使用 imgix  和  URL 参数，我们可以简化在图像上生成 属性所需的工作量。对于本示例，我们将使用位于以下位置的图像： w dpr 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" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true 我们获得一个图像标签，该标签根据设备像素比 (DPR) 为每个设备提供最佳分辨率。当给定 参数时，imgix 将自动提供更多像素。 dpr 计算设备像素比 您可以看到我们已分别将  、  和 应用于我们的 1x、2x 和 3x 资产。  参数指示 imgix 将 参数视为与 （也称为“CSS 像素”）。 dpr=1 dpr=2 dpr=3 dpr w 设备无关的像素 因此，  时的 400×300 图像实际上将是 800×600 像素图像。  图像将为 1200×900 像素。  dpr=2 dpr=3 这为您提供了两全其美的优势：为支持它的设备提供完整的分辨率，而不会向不使用它的设备提供不必要的数据。通过使用 imgix，我们只需存储原始资源，然后动态操作它，如我们上面所见。 这也消除了 设备问世时的麻烦。 imgix 目前最多支持  。 4x dpr=5 这种做法最适合固定图像布局。目前 将 与 一起使用。 广泛支持 srcset dpr 在媒体查询中使用 和 srcset sizes 处理流体布局的响应式图像的另一种方法是使用 的尺寸定义。该解决方案使您能够根据 属性中的媒体查询定义来确定尺寸目标。 srcset sizes 浏览器将请求最合适的图像，或者根据浏览器的不同，从缓存中加载可用的最佳图像。  以下示例演示了使用 imgix 将三个图像的大小调整为 1024、640 和 480 像素宽。使用 属性，我们针对图像行为进行两次查询。 sizes 在 或以上的视口中，图像将以视口宽度的 1/3 显示。 36em 低于该尺寸，图像将以视口的完整尺寸显示。在这些尺寸下，浏览器将确定当页面以给定的目标尺寸呈现时要加载哪个图像。   <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> 上。   https://codepen.io/imgix/pen/VLNZaW?embedable=true 使用 imgix 的最佳实践 使用 和 imgix 提供尽可能最佳的图像时，还有更多需要考虑的事情。 srcset  imgix 能够添加额外的操作，以便您更好地控制输出图像，并且由于它们是在 URL 中定义的，因此您可以微调设置并在决策发生变化时进行后期编辑。 使用 的挑战之一是您希望生成足够的大小，以便大多数用户下载的图像大小与他们在屏幕上看到的图像接近，但如果生成太多大小，最终可能会影响缓存-能力，这可能会对性能产生负面影响。 srcset 幸运的是，许多 可以自动为您生成最佳的  。 imgix 库 srcset 使用 fit=max 在 imgix URL 上使用 参数将确保传递的图像永远不会大于其原始大小。这样，当请求 图像时，不会有任何图像外推。阅读文档中有关 更多信息。 fit=max dpr=3 fit 使用 auto=format   参数将为支持它的浏览器（Chrome、Firefox 等）提供轻量级 WebP 图像，并为其他实例回退到原始格式。 auto=format  WebP 等更现代的格式可以大大减少发送到客户端的图像数据量；有时高达 35%。在文档中阅读有关 的更多信息。 自动内容协商 使用可变质量 使用 imgix 设置 时，您可能需要考虑调整图像的质量。将 参数设置为较低的值以获得较高的 DPR，可以减小文件大小，同时保持图像的更密集的像素集。 dpr q   图像大小为21.3kB。  。  ?q=80 尝试一下，看看 Sandbox 中的差异   图像大小为34.7kB。  ?dpr=2&q=40 尝试一下，看看沙盒中的差异。    图像大小为42.1kB。  ?dpr=3&q=20 尝试一下，看看沙盒中的差异。  使用 imgix URL API 可以使这种常见做法变得更容易。调整质量对于 WebP 和 JPEG 等有损格式尤其有效。 把它们放在一起 以下是将这些示例应用于我们的  DPR 示例的实现： srcset   <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> 上。 摘要和相关教程 响应式图像是一个快速变化的实施领域，不同的方法适用于不同的用例。这是我们涉及响应式设计各个方面的其他教程。 针对 Retina 进行设计，使用 imgix 进行部署 带有客户提示的下一代响应式图像 将 imgix 与 <图片> 一起使用

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

加密货币增长：创建有效的用户角色

数字游民请注意：您需要了解泰国新推出的 DTV 签证

从论坛到信息流：社交媒体算法如何塑造数字互动

使用这 18 种开发工具来提高你的工作效率 🚀🔥

加密货币增长：创建有效的用户角色

数字游民请注意：您需要了解泰国新推出的 DTV 签证

从论坛到信息流：社交媒体算法如何塑造数字互动

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps