HTML Picture

HTML <picture> 标签用于响应式网页设计，当需要根据视口、高度、宽度、方向和像素密度加载不同的图像时使用。

The <picture> tag contains one or more <source> elements and one <img> elements.

根据视口，将从不同的 <source> 标签加载匹配的图像，如果没有任何 source 包含匹配的图像，则会在浏览器中显示 <img> 标签中存在的默认图像。

注意：此标签是 HTML5 中的新特性。

示例

输出

信息应该能够以令人愉悦的方式在任何大小和分辨率的设备上呈现，而不受其易变特性的影响。HTML，作为任何网站的基础，会随着时间的推移而改变，以满足相同的目标。这些修改之一包括该元素，并且已证明它是开发者武器库中一个强大的工具，可以显示响应式图像。

HTML 中 <picture> 的目标

以前，Web 开发人员使用此标签在其网页上显示图片。虽然有效，但这种方法需要更复杂的配置才能确保跨不同设备的最佳结果。这是为了纠正这些不足之处。

响应式设计

首先，该元素是为各种屏幕尺寸和分辨率级别设计的。开发人员可以为不同设备上的显示提供备用图像。

语法和用法

为了指定具有各自限制的不同图像源，必须将一个或多个 <source> 元素嵌套在 <picture> 元素内。此外，如果浏览器不支持 <picture>，则由 <img> 标签提供备用方案。

• 解构 <source> 组件： 定义不同的摄影源以及它们的媒体选项。
• Srcset： 指示要使用的图像文件。
• Media： 指定何时响应媒体查询显示图像的类型。

最佳实践技巧

确保始终为 Web 优化您的照片，以确保更快的下载速度。

• 提供不同的文本： 包含描述性的 alt 属性，以利于 SEO 和可访问性。
• 跨设备测试： 验证图片在各种屏幕和设备上的外观。

SEO 和可访问性的好处

使用 <picture> 元素还可以增强响应式设计，因为它提高了可访问性并确保了更好的 SEO。

开发人员可以通过包含备用文本标签作为属性来提高可访问性，以确保提供适当的图像描述。此外，此类描述有助于搜索引擎对数据进行分类，从而改进 SEO 实践。

例如，Web 开发中的灵活性和开发的一个方面可以通过 HTML <picture> 元素来说明。这强调了它在现代 Web 设计中的重要性，因为它支持大量的设备并有助于提高可访问性和可搜索性。然而，它的使用使开发人员能够确保任何照片在这种虚拟或数字世界中都能很好地显示，以便通过他们的各种智能手机为用户提供关于任何照片的优质体验。用您自己的“接受 <picture>，它有力量改变在线图像展示的范式！”来给用户惊喜。

基于分辨率的图像切换

source 元素支持 sizes 属性，该属性允许您根据设备的 D 像素密度选择图像。此方法通过为更高 D 像素密度的屏幕获取更高 D 像素的图像来增强屏幕显示。

WebP 和 <picture>

现代图像格式如 WebP 可以通过 <picture> 支持。例如，WebP 可以确保图像质量和速度的最大化，即使对于旧的浏览器回退。

兼容性 Polyfills

Picturefill.js 可用于不支持 <picture> 的旧浏览器。这些脚本可以在不影响旧平台用户功能的情况下使用 <picture>。

使用 <picture> 进行懒加载

懒加载是一种延迟加载非关键资源的技巧，直到需要时才加载，从而大大缩短页面加载时间。将 loading="lazy" 属性应用于 <picture> 元素会延迟下载图像，直到它们即将进入视口。换句话说，在用户滚动到它们附近之前，图像不会加载，因此初始页面加载时间会减少，整体性能也会提高。在此示例中，为 <source> 元素中的每个屏幕尺寸分配了不同的图像源，并将 loading="lazy" 应用于回退 <img>，确保在可能的情况下使用懒加载。

输出

用于艺术指导的响应式图像

<picture> 是 Web 上艺术指导的强大武器。通过在 source 元素中使用媒体查询，您可以根据特定情况提供不同的图像源。例如，屏幕从水平（横向）旋转到垂直（纵向）。这样，无论用户如何握持设备，或者它的屏幕以纵向或横向模式方向显示，他总是看到最适合其设备特定特性的图像。

将 <picture> 与 <video> 结合使用

它主要与图像相关，但可以与 <video> 结合使用以提供响应式视频内容。通过包含在单个 <picture> 中的 <source> 元素，开发人员可以确保在所有类型的设备、不同的屏幕尺寸和不同的网络条件下平滑播放视频。 <picture> 元素内的 <img> 标签用作回退。在视频加载失败或格式不支持的情况下，它将显示图像。

实现 <picture> 以用于 SVG 图像

<picture> 通常用于光栅图像，但也可以与 SVG 一起使用。开发人员可以使用具有 SVG 源的 <source> 元素，这些源根据特定的设备标准（例如偏好浅色或深色主题）而变化，以选择性地加载依赖于情况的不同图像。这使得可以根据用户的愿望或设备特征发送 SVG 内容。

基本上，HTML <picture> 元素是一个静态的多功能工具，用于处理不同类型的媒体 - 图像、视频，甚至 SVG - 同时适应各种设备规范。借助懒加载、图像艺术指导、在 <picture> 中处理视频以及按设备处理 SVG（设备问题）等高级技术，开发人员可以更快地打造令人愉悦的 Web 体验。

通过利用这些策略，开发人员可以在保持跨不同设备和环境的可访问性标准的同时，加快加载速度并改善用户体验。总而言之，<picture> 提供的优势使得创建有趣、经济高效且灵活的 Web 内容成为可能。

基于断点的图像交换

此示例说明了如何将媒体查询用于 <source> 元素，以便在特定断点或屏幕列处交换图像。使用 max-width 条件，为不同的屏幕尺寸加载不同的图像。

对于宽度高达 480px 的屏幕，使用较小的图像；对于宽度高达 768px 的屏幕，使用中等大小的图像，而在更宽的新闻上使用最大的图像。这保证了将根据用户设备的屏幕宽度，在用户屏幕上显示最合适的图像。这优化了视觉质量和加载速度。

输出

当视口宽度为 480 像素或更小时，显示 Image-small.jpg。

当视口宽度大于 480 像素但小于 768 像素时，将显示 Image-medium.jpg。

当视口宽度大于 768 像素时，将显示 Image-large.jpg。

如果提供的媒体要求均不匹配，将显示 fallback-image.jpg。

使用 type 和 size 属性的条件加载

结合使用时，每个 <source> 元素中的 type 和 size 属性提供了更细粒度地控制使用哪种图像格式的选项，具体取决于设备功能或视口大小。此实现指定了不同的图像类型（image/webp 和 image /jpg）[-] 为特定的视口宽度添加了 size，从而在最高级别的兼容性下支持所有可能的客户端环境。

使用 <picture> 的响应式图像网格

这是 picture 元素如何在响应式图像网格中使用的一个示例。允许在网格结构中管理每个图像。假设开发人员将每个图像放在 <picture> 容器中。在这种情况下，无论屏幕上显示的不同设备的规格如何，或者由于屏幕尺寸和分辨率级别的差异而尺寸不同，响应性都会在整个过程中得到保持。

以下示例使用 <picture> 元素根据浏览器支持显示不同的图像格式。图像以 WebP 和 JPEG 版本提供，使用 srcset 元素作为源。type 属性指定 MIME 图像格式。

示例

这是一个艺术指导的实例，根据媒体查询更改图像。在这种情况下，它使用 (orientation 根据设备是垂直还是水平握持来显示不同的图像，特别是查询 (orientation: landscape)。

带有 D 像素密度描述符的响应式图像

右侧的演示展示了如何根据设备的 D 像素密度通过 min-resolution 和 max-resolution 媒体查询来提供图像。它还确保在各种屏幕 D 像素密度下显示正确的图像。

示例

使用 <picture> 支持深色模式

此示例使用 (prefers-color-scheme: dark) 媒体查询根据用户首选的颜色方案调整图像。它为浅色和深色主题显示不同的图片，以根据用户的选择来迎合用户体验。

示例

这些示例向我们展示了如何结合使用 <picture> 元素、媒体查询和众多属性来针对多种条件显示替代图像，从而获得一个能够尽可能地在所有设备和偏好中进行自我优化的自适应体验。