HTML picture 标签

HTML picture 语法

在 HTML 中，picture 标签用于为不同尺寸的屏幕设备提供不同大小或格式的图片，以节省流量、加快加载速度并提升视觉体验。

语法：

<picture>
    <source srcset="小图.jpg" media="(max-width: 600px)">
    <source srcset="中图.jpg" media="(max-width: 1200px)">
    <img src="默认图.jpg" alt="图片描述">
</picture>

说明：

picture 是一个图片容器，内部可以包含多个 source 标签和一个 img 标签。每个 source 标签指定一个图片资源，并使用 media 属性定义其适用条件。如果所有 source 标签都不匹配，则会显示 img 标签指定的图片。

picture 标签本身没有任何属性，source 标签支持以下 2 个属性。

srcset（必选）：定义图片路径，用来指定不同版本的图片。
media（必选）：定义图片的媒体查询条件，比如屏幕宽度、分辨率等。

注意: picture 标签内部只能有一个 img 标签。

HTML picture 摘要

属于	HTML 图片
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

HTML picture 示例

接下来，我们通过一个简单的例子来讲解一下 HTML picture 标签是如何使用的。

示例：picture 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <picture>
        <source srcset="imgs/bird-2x.jpg" media="(min-width: 1200px)">
        <img src="imgs/bird-1x.jpg" alt="小鸟">
    </picture>
</body>
</html>

页面效果如下图所示。

HTML picture标签示例

分析：

在上面例子中，我们把 bird-1x.jpg（小图）放在 img 标签中作为默认图片。当设备屏幕宽度大于或等于 1200px 时，浏览器会优先加载 source 标签中的 bird-2x.jpg（大图）；否则，直接显示默认的 img 图片。

小伙伴们可以自行改变一下浏览器的窗口大小，然后看看页面效果如何。