当前位置：首页 > news >正文

如何利用＜picture＞标签实现更灵活的图片展示，应对不同设备和格式需求？

news 来源：原创 2025/4/26 14:56:09

大白话如何利用标签实现更灵活的图片展示，应对不同设备和格式需求？

什么是 `<picture>` 标签

<picture> 标签是 HTML5 新增的一个标签，它就像是一个图片的“指挥官”，能根据不同的设备屏幕大小、分辨率以及浏览器支持的图片格式，来选择最合适的图片展示给用户。这样做的好处是，在大屏幕设备上可以展示高清大图，在小屏幕设备上展示小图，既能保证图片清晰，又能节省流量。

基本用法示例

下面是一个简单的例子，用大白话解释每一部分代码的作用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture 标签示例</title>
</head>

<body>
    <!-- 使用 picture 标签来包裹多个图片源选项 -->
    <picture>
        <!-- source 标签用于指定不同条件下的图片源 -->
        <!-- media 属性用于设置媒体查询条件，这里表示当屏幕宽度大于等于 1200px 时 -->
        <source media="(min-width: 1200px)" srcset="large-image.jpg">
        <!-- 当屏幕宽度在 768px 到 1199px 之间时 -->
        <source media="(min-width: 768px) and (max-width: 1199px)" srcset="medium-image.jpg">
        <!-- 当屏幕宽度小于 768px 时 -->
        <source media="(max-width: 767px)" srcset="small-image.jpg">
        <!-- img 标签是必须的，它是默认的图片源，当所有 source 条件都不满足时显示 -->
        <img src="default-image.jpg" alt="默认图片">
    </picture>
</body>

</html>

代码解释

<picture> 标签：它就像一个容器，把多个 <source> 标签和一个 <img> 标签装在里面。浏览器会按照 <source> 标签的顺序，一个一个检查条件，找到第一个符合条件的图片就显示出来。
<source> 标签：
- media 属性：这是一个媒体查询条件，就像是给图片设置了一个“入场券”。只有当设备的屏幕宽度满足这个条件时，对应的图片才会被显示。
- srcset 属性：它指定了图片的文件路径，告诉浏览器应该从哪里找到这张图片。
<img> 标签：它是最后的“备胎”。如果所有 <source> 标签的条件都不满足，浏览器就会显示 <img> 标签里指定的图片。

应对不同图片格式需求

除了根据屏幕大小选择图片，<picture> 标签还能根据浏览器支持的图片格式来选择。比如，现代浏览器支持 WebP 格式的图片，这种格式的图片通常比 JPEG 或 PNG 更小，加载速度更快。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture 标签支持不同格式示例</title>
</head>

<body>
    <picture>
        <!-- 如果浏览器支持 WebP 格式，就显示 WebP 图片 -->
        <source type="image/webp" srcset="image.webp">
        <!-- 否则，显示 JPEG 图片 -->
        <img src="image.jpg" alt="图片">
    </picture>
</body>

</html>

代码解释

type 属性：它指定了图片的 MIME 类型，也就是图片的格式。浏览器会先检查是否支持这个格式，如果支持，就显示对应的图片；如果不支持，就继续往下找，直到找到合适的图片。

通过这种方式，你可以利用 <picture> 标签实现更灵活的图片展示，满足不同设备和格式的需求。

<picture>标签和<img>标签有什么区别？

<picture>标签和<img>标签都用于在网页上展示图片，但它们存在一些区别，下面详细为你介绍：

功能灵活性

<img>标签：功能相对基础，主要用于简单地插入一张图片。它只能指定一个图片源，无法根据不同的设备特性、屏幕分辨率或浏览器支持的格式来选择不同的图片。例如：

<img src="example.jpg" alt="示例图片">

上述代码中，无论在何种设备上打开网页，显示的都是example.jpg这张图片。

<picture>标签：功能更强大、灵活。它可以包含多个<source>标签，每个<source>标签能设置不同的条件，像媒体查询（依据屏幕宽度、高度、方向等）和图片格式（如 JPEG、PNG、WebP）。浏览器会依据这些条件自动挑选最合适的图片显示。例如：

<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="图片示例">
</picture>

在这个例子里，当屏幕宽度大于等于 1200px 时，显示large.jpg；宽度在 768px 到 1199px 之间，显示medium.jpg；宽度小于 768px 时，显示small.jpg。

图片格式支持

<img>标签：只能指定一个图片源，这意味着只能提供一种图片格式。要是浏览器不支持该格式，就可能无法正常显示图片。
<picture>标签：可以提供多种图片格式供浏览器选择。比如，可先提供 WebP 格式的图片，因为它的压缩率高、加载速度快；若浏览器不支持 WebP，再提供 JPEG 或 PNG 格式的图片。示例如下：

<picture>
    <source type="image/webp" srcset="image.webp">
    <img src="image.jpg" alt="图片示例">
</picture>

此代码中，浏览器若支持 WebP 格式，就显示image.webp；若不支持，则显示image.jpg。

响应式设计

<img>标签：要实现响应式图片，通常得借助 CSS 来调整图片的大小，像设置max-width: 100%; height: auto;。不过，这只是简单缩放图片，无法依据不同的屏幕尺寸更换不同分辨率的图片。
<picture>标签：天生就适合响应式设计，能根据不同的屏幕尺寸和设备特性，提供不同分辨率和尺寸的图片，从而优化用户体验并减少数据流量消耗。

兼容性

<img>标签：是 HTML 中最基础的标签之一，所有浏览器都支持，兼容性极佳。
<picture>标签：虽然大部分现代浏览器都支持，但一些旧版本的浏览器可能不支持。所以，在<picture>标签中需要包含一个<img>标签作为备用方案，以确保在不支持<picture>标签的浏览器中也能正常显示图片。