<img> 和 <picture>标签使用场景

在前端开发中，处理图片是每个前端开发者都会遇到的基础任务。在处理图片中，有两个标签可以使用，分别是 <img> 和 <picture> ，在使用的过程中，对于这两种标签的使用场景可能有一些误解，今天，我们就来详细的解析一下这两个标签，有助于我们理清这两个标签真正的用途，也能让我们在开发的过程中可以合理使用这两个标签。

<img> 标签

<img> 图像嵌入元素， <img> HTML 元素将一张图像嵌入文档。

基本语法

<img src="image.jpg" alt="图片描述信息">

基本属性

src 用于指定嵌入图片的路径

alt 用于存储图片代替的文本(必须) , 这个属性对于无障碍访问具有机器重要的作用，屏幕阅读器会向用户阅读该属性值，使其理解图片所传达的信息。当图片因网络原因错误、内容屏蔽或链接失效等原因无法加载时，替代文本会在页面上展示。

支持的图片格式（web常用的图片格式）

• APNG(动态可移植网络图形) — 无损动画序列的不错选择(GIF性能较差)
• AVIF(AV1图像文件格式) — 静态图像或动态图像的不错选择，性能较好
• GIF(图像互换格式) — 简单图像和动画的不错选择
• JPEG(联合图像专家小组图像) — 有损压缩静态图像的不错选择(目前最流行的格式)
• PNG(便携式网络图像) — 无损压缩静态图像的选择(质量略好于JPEG)
• SVG(可缩放矢量图形) — 矢量图像格式。用于以不同尺寸准确描绘的图像
• WebP(网络图片格式) — 静态图像和动态图像的选择

推荐使用诸如WebP和AVIF等图像格式，因为它们在静态图像和动态图像的性能均比 PNG、JPEG、GIF 好得多。

对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

图像加载错误

如果在加载或渲染图像时发生错误，且设置了 onerror 事件处理器来处理 error 事件，设置事件的处理器会被调用。可能在以下几种场景中出现错误：

• src 属性值为”” 或者 null
• src 属性的 URL 和正在浏览的页面 URL 完全相同
• 图像损坏，无法加载
• 图像元数据被破坏，无法检测分辨率/宽高，而且在 img 元素的属性中没有指定宽高
• 图片格式未支持

<picture> 标签

HTML <pinture> 标签通过包含零个或多个 <source> 元素和一个 img 元素来为不同的场景提供图像版本。浏览器会选择最匹配的 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性的 URL 。

基本语法

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="格式优化示例">
</picture>

<picture> 常见的使用场景

• 艺术指导， 针对不同的媒体查询(media)条件剪裁或修改图形

  <picture>
    <!-- 桌面端：宽屏全景 -->
    <source media="(min-width: 1200px)" srcset="hero-desktop.jpg">
    <!-- 平板端：适中裁剪 -->
    <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
    <!-- 移动端：竖版特写 -->
    <img src="hero-mobile.jpg" alt="产品展示">
  </picture>
  

• 遇到不支持的特定格式时，提供替代的图像格式

• 通过加载合适图像，节省带宽和提高页面加载速度

  <picture>
    <!-- 大屏 + AVIF -->
    <source media="(min-width: 1200px)" type="image/avif" srcset="large.avif">
    <!-- 大屏 + WebP -->
    <source media="(min-width: 1200px)" type="image/webp" srcset="large.webp">
    <!-- 大屏降级 -->
    <source media="(min-width: 1200px)" srcset="large.jpg">
    
    <!-- 移动端方案 -->
    <img src="small.jpg" alt="复杂条件图片">
  </picture>
  

使用建议

何时使用 <img> 标签

1. 简单图片展示

   • 当页面只需要显示一张固定图片时
   • 示例：文章中的插图、产品展示图

2. 性能敏感场景

   • 当图片较大且不需要针对不同设备优化时
   • 示例：背景图、装饰性图片

3. 内容管理系统(CMS)集成

   • 当CMS系统只提供单一图片源时

4. 简单响应式需求

   • 只需通过CSS控制图片大小，不需要不同分辨率的图片
   • 示例：

<img src="image.jpg" alt="描述" style="max-width: 100%; height: auto;">

何时使用 <picture> 标签

1. 响应式图片需求

   • 需要根据屏幕宽度提供不同分辨率的图片
   • 示例：

   <picture>
     <source media="(max-width: 600px)" srcset="small.jpg">
     <source media="(max-width: 1200px)" srcset="medium.jpg">
     <img src="large.jpg" alt="描述">
   </picture>
   

2. 艺术指导(Art Direction)需求

   • 需要根据屏幕尺寸显示图片的不同部分
   • 示例：横版图片在手机上可能需要显示中间部分，隐藏两侧

   <picture>
     <source media="(max-width: 768px)" srcset="image-portrait.jpg">
     <source media="(min-width: 769px)" srcset="image-landscape.jpg">
     <img src="image-landscape.jpg" alt="描述">
   </picture>
   

3. 现代图片格式支持

   • 希望使用WebP等现代格式，同时提供回退方案

   <picture>
     <source type="image/webp" srcset="image.webp">
     <source type="image/jpeg" srcset="image.jpg">
     <img src="image.jpg" alt="描述">
   </picture>
   

4. 不同屏幕方向需求

   • 需要为横屏和竖屏提供不同布局的图片

   <picture>
     <source media="(orientation: portrait)" srcset="portrait.jpg">
     <source media="(orientation: landscape)" srcset="landscape.jpg">
     <img src="landscape.jpg" alt="描述">
   </picture>
   

性能优化建议

1. 使用 <img> 时的优化

   • 始终添加 alt 属性
   • 使用 loading="lazy" 实现懒加载
   • 为图片设置合适的尺寸
   • 考虑使用 srcset 和 sizes 属性实现响应式图片

   <img src="image.jpg"
        alt="描述"
        loading="lazy"
        srcset="image-320w.jpg 320w, image-640w.jpg 640w, image-1024w.jpg 1024w"
        sizes="(max-width: 320px) 280px, (max-width: 640px) 600px, 1024px">
   

2. 使用 <picture> 时的优化

   • 将最常用的条件放在前面
   • 确保最后一个 <source> 之后有一个回退的 <img> 元素
   • 考虑使用 type 属性指定图片格式，帮助浏览器快速选择
   • 为所有图片添加适当的 alt 属性

兼容性考虑

1. <img> 标签具有极好的浏览器兼容性，几乎所有浏览器都支持

2. <picture> 标签在现代浏览器中支持良好，但在非常旧的浏览器中可能不支持

   • 确保回退的 <img> 元素包含所有必要的属性

总结建议

• 优先使用 <picture> ：如果你需要响应式图片、艺术指导或现代图片格式支持
• 使用 <img> ：如果只是简单展示图片，或者项目规模较小、不需要复杂的图片控制
• 混合使用：可以在同一页面中根据需要同时使用两种标签

选择合适的图片标签不仅关系到用户体验，还直接影响网站性能和加载速度。根据你的具体需求做出最佳选择，并始终考虑不同设备和浏览器的兼容性。