图片标签用 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>：解决特定复杂场景，如艺术指导和格式降级
  

核心建议：

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

希望这篇指南能帮助你彻底理解这两个重要的HTML标签！

本文首发于公众号：程序员刘大华，专注分享前后端开发的实战笔记。关注我，少走弯路，一起进步！

📌往期精彩

《SpringBoot+Vue3 整合 SSE 实现实时消息推送》

《这20条SQL优化方案，让你的数据库查询速度提升10倍》

《SpringBoot 动态菜单权限系统设计的企业级解决方案》

《Vue3和Vue2的核心区别？很多开发者都没完全搞懂的10个细节》