图片标签用 img 还是 picture？很多人彻底弄混了！

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

在网页开发中，图片处理是每个前端开发者都会遇到的基础任务。面对 <img> 和 <picture> 这两个标签，很多人存在误解：要么认为它们是互相替代的关系，要么在不合适的场景下使用了复杂的解决方案。今天，我们来彻底理清这两个标签的真正用途。

<img> 标签

<img> 是 HTML 中最基础且强大的图片标签，但它远比很多人想象的要智能。

基本语法：

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

核心属性：

• src：图片路径（必需）
• alt：替代文本（无障碍必需）
• srcset：提供多分辨率图片源
• sizes：定义图片显示尺寸
• loading：懒加载控制

<img> 的响应式能力被低估了

很多人认为 <img> 不具备响应式能力，这是错误的认知：

<img 
  src="image-800w.jpg"
  srcset="image-320w.jpg 320w,
          image-480w.jpg 480w,
          image-800w.jpg 800w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  alt="响应式图片示例"
>

这种写法的优势：

• 浏览器自动选择最适合当前屏幕分辨率的图片
• 根据视口大小动态调整加载的图片尺寸
• 代码简洁，性能优秀

<picture> 标签

<picture> 不是为了替代 <img>，而是为了解决 <img> 无法处理的特定场景。

<picture> 解决的三大核心问题

1. 艺术指导（Art Direction） 在不同设备上显示不同构图或裁剪的图片：

<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>

2. 现代格式降级 优先使用高效格式，同时兼容老旧浏览器：

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

3. 复杂条件组合 同时考虑屏幕尺寸和图片格式：

<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>

关键区别与选择指南

常见误区纠正

误区一：<picture> 用于响应式图片

• 事实： <img> 配合 srcset 和 sizes 已经能处理大多数响应式需求
• 真相： <picture> 主要用于艺术指导和格式降级

误区二：<picture> 更现代，应该优先使用

• 事实： 在不需要艺术指导或格式降级的场景下，<img> 是更好的选择
• 真相： 合适的工具用在合适的场景才是最佳实践

误区三：响应式图片一定要用 <picture>

• 事实： 很多响应式场景用 <img> + srcset 更合适
• 真相： 评估需求，选择最简单的解决方案

场景分析

应该使用 <img> 的场景

网站Logo：

<img src="logo.svg" alt="公司Logo" width="120" height="60">

用户头像：

<img 
  src="avatar.jpg"
  srcset="avatar.jpg 1x, avatar@2x.jpg 2x"
  alt="用户头像"
  width="80" 
  height="80"
>

文章配图：

<img 
  src="article-image.jpg"
  srcset="article-image-600w.jpg 600w,
          article-image-1200w.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 600px"
  alt="文章插图"
  loading="lazy"
>

应该使用 <picture> 的场景

英雄横幅（不同裁剪）：

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="hero-square.jpg">
  <img src="hero-mobile.jpg" alt="产品横幅" loading="eager">
</picture>

产品展示（格式优化）：

<picture>
  <source type="image/avif" srcset="product.avif">
  <source type="image/webp" srcset="product.webp">
  <img src="product.jpg" alt="产品详情" loading="lazy">
</picture>

最佳实践

1. 始终遵循的规则

<!-- 正确：始终提供 alt 属性 -->
<img src="photo.jpg" alt="描述文本">

<!-- 错误：缺少 alt 属性 -->
<img src="photo.jpg">

<!-- 装饰性图片使用空 alt -->
<img src="decoration.jpg" alt="">

2. 性能优化策略

<!-- 优先加载关键图片 -->
<img src="hero.jpg" alt="重要图片" loading="eager" fetchpriority="high">

<!-- 非关键图片延迟加载 -->
<img src="content-image.jpg" alt="内容图片" loading="lazy">

<!-- 指定尺寸避免布局偏移 -->
<img src="product.jpg" alt="商品" width="400" height="300">

3. 现代图片格式策略

<picture>
  <!-- 优先使用AVIF，压缩率最高 -->
  <source type="image/avif" srcset="image.avif">
  <!-- 其次WebP，广泛支持 -->
  <source type="image/webp" srcset="image.webp">
  <!-- 最终回退到JPEG -->
  <img src="image.jpg" alt="现代格式示例">
</picture>

总结

<img> 和 <picture> 不是竞争关系，而是互补的工具：

• <img>：处理大多数日常图片需求，特别是分辨率适配
• <picture>：解决特定复杂场景，如艺术指导和格式降级

核心建议：

1. 从最简单的 <img> 开始，只在必要时升级到 <picture>
2. 充分利用 <img> 的 srcset 和 sizes 属性
3. 为关键图片使用 <picture> 进行格式优化
4. 始终考虑性能和用户体验

掌握这两个标签的正确用法，你就能在各种场景下都做出最合适的技术选择，既保证用户体验，又避免过度工程化。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。