html中的<picture>标签

今天在看medium.com的html结构时，发现它的图片并不是单纯的使用的img标签包裹，而是又在外面套了一层<picture>，所以就有了本文。

HTML中的<picture>标签是用于在网页上展示不同尺寸和分辨率的图片的标签。这个标签可以让网页在不同设备上展示最适合的图片，从而提高网页的性能和用户体验。

语法

<picture>标签的语法如下：

<picture>
  <source srcset="image-1.webp" type="image/webp">
  <source srcset="image-1.jpg" type="image/jpeg">
  <img src="image-1.jpg" alt="Image description">
</picture>

<picture>标签包含了多个<source>标签和一个<img>标签。每个<source>标签都包含了一个srcset属性和一个type属性，用于指定不同尺寸和分辨率的图片的URL和类型。<img>标签包含了一个src属性和一个alt属性，用于指定默认的图片URL和图片的描述。

示例

下面是一个使用<picture>标签的示例：

<picture>
  <source srcset="image-1.webp" type="image/webp">
  <source srcset="image-1.jpg" type="image/jpeg">
  <img src="image-1.jpg" alt="Image description">
</picture>

在这个示例中，如果浏览器支持WebP格式的图片，就会加载image-1.webp这个图片；否则，就会加载image-1.jpg这个图片。

注意事项

• <picture>标签必须包含至少一个<source>标签和一个<img>标签。
• <source>标签必须包含一个srcset属性和一个type属性。
• srcset属性用于指定不同尺寸和分辨率的图片的URL，多个URL之间用逗号分隔。
• type属性用于指定图片的类型，常用的类型有image/webp、image/jpeg和image/png。
• <img>标签必须包含一个src属性和一个alt属性。
• src属性用于指定默认的图片URL。
• alt属性用于指定图片的描述，这个属性对于SEO和无障碍访问非常重要。

总之，<picture>标签是一个非常有用的标签，可以让网页在不同设备上展示最适合的图片，提高网页的性能和用户体验。