使用<picture>为不同的用户环境动态渲染图像

响应式设计需要性能和灵活性之间的平衡——为所有可能的设备提供正确大小和优化的图像并不意味着加载时间很慢。

鉴于实现响应式设计的方法多种多样，了解哪些方法最适合不同的用例非常重要。

在本教程中，我们将讨论何时使用<picture>元素以及如何使用 imgix 最有效地实现它。

艺术指导与分辨率切换

响应式图像通常用于解决两个问题之一：需要修改图像以适应根据设备而变化的设计（艺术方向），或者需要调整图像的分辨率以适应设备（分辨率切换）。

在实现方面，需要选择是向浏览器提供足够的信息来决定使用哪个版本的图像，还是直接命令它。

<picture>元素最适合用于艺术指导用例，因为所需的更改可能包括更改宽高比、以不同方式裁剪图像以及比仅提供更高分辨率图像更复杂的其他设计方面。

在这种情况下，您确实希望直接命令浏览器，尽管可能会影响性能。

使用 imgix 和<picture>进行艺术指导

使用<picture>元素时，imgix 有两个主要好处。首先，它不需要为每个视口大小维护单独的、预处理的图像副本。根据需要应用任何参数来调整大小、裁剪和设备像素比。

其次，它通过优化图像和缓存所请求的所有不同版本来帮助最大限度地减少性能损失。

注意： <picture>元素对于某些旧版浏览器不可用。您可以使用Picturefill添加对这些客户端的支持。

让我们看看所有这些如何结合在一起。我们将从横向图像开始，然后提供不同的参数来为可能具有其他方向的不同设备显示图像中最有意义的部分。

单击图像可查看全尺寸视口的变化

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>

尽管它们的尺寸可能不适合设备（考虑到可用的屏幕尺寸多种多样），但设置一些简单的视口断点并应用一些参数可以让您以比生成不同原始图像更少的开销完成大部分工作。每个尺寸。

您可以根据需要继续扩展断点数量，具体取决于您对用户设备的了解。

即使通过<picture>的这种简单实现，我们也已经介绍了基础知识，根据需要调整单个图像，以为每个目标尺寸提供最引人注目的图像版本。

但是，通过对此代码进行一些添加，可以使<picture>成为一个强大的工具，用于在整个图像集（而不仅仅是单个孤立的照片）中自动进行艺术指导。

自动化艺术指导

在上面的示例中，裁剪很简单，因为有意义的内容位于中间（这是fit=crop的默认值）。

但是，如果图像最相关的部分未居中，您仍然可以使用 imgix 的crop模式以编程方式调整裁剪开始的位置，而无需手动输出不同纵横比的预裁剪版本。

imgix 提供了两种根据图像内容进行裁剪的模式： crop=faces和crop=entropy 。它们的工作原理类似，即评估图像并检测人脸或高对比度区域，然后对中心的区域进行裁剪。

有关如何使用这些模式的更多详细信息，请参阅我们有关制作头像和兴趣点裁剪的指南。

让我们看看如何使用<picture>和关键的 imgix 功能（例如文本叠加和水印）创建一组完全品牌化的图像，这些图像可以裁剪和更改以适合任何设备屏幕。

这些图像的每个版本都是根据视口大小即时从原始图像文件创建并缓存的，这极大地减少了图像存储和<picture>通常可能导致的任何性能影响。

裁剪

在 CodePen 中查看面部/熵裁剪示例

请参阅CodePen上的 imgix ( @imgix ) 的 Pen Picture Element & Art Direction with imgix 。

在 CodePen 示例中，图像的大小和纵横比会根据视口进行调整，并且裁剪样式会根据这些尺寸所需的内容而变化，以保持奥巴马总统居中。

根据图像变化，这是通过crop=faces 、 crop=entropy 、裁剪对齐（ crop=top等）来完成的，有时还可以使用rect以较小的尺寸放大图像的一部分。

徽标水印和照片信用也调整了大小和填充，以适应视口的变化和位置的变化，以避免与主题重叠。

缩放文本和水印

添加到图像中的任何文本叠加、混合或水印都可以与图像一起缩放和调整。这是一个更戏剧性地利用<picture>进行艺术指导的示例。

在 CodePen 中查看水印/混合示例

添加 DPR 支持

如果您想在<picture>中支持多个像素分辨率，可以通过向每个srcset添加DPR变体来实现。例如，如果我们想为我们的原始示例支持更高密度的设备，代码将如下所示：

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>

再次注意，无需创建图像的新版本 - 只需创建源的副本，向 URL 添加dpr参数，并使用适当的像素密度描述符（ 1x 、 2x等）标记每个图像。

随着您的需求和设计的变化，您只需原始图像即可创建无限的变化。

概括

imgix是解决快速变化的设计中响应式图像复杂性的强大盟友。通过简单的参数更改，您可以以编程方式处理新的设计容器、设备和设备分辨率，而无需重新处理整个图像目录。

我们还支持前瞻性的方法，例如尝试简化响应式设计和实施的客户端提示。

立即创建一个免费帐户以利用 imgix。

相关imgix参数

• crop |裁剪模式
• dpr |设备像素比
• fit |调整大小适合模式
• rect |源矩形区域

其他资源

• 媒体查询：使用媒体查询精选响应式设计的网站。对于了解艺术指导的不同方法很有用。

• 响应式图像 101 ： Cloud Four Design 的介绍系列，涵盖了响应式图像的所有方法及其权衡和用例

• 响应式艺术指导的焦点裁剪：了解如何将<picture>与 imgix 的焦点裁剪参数结合使用，使您的图像在任何尺寸下都引人注目。