图片标签用 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. 艺术指导
在不同设备上显示不同构图或裁剪的图片：
<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>如何选择：img 还是 picture？
| 情况 | 推荐方案 | 理由 |
|---|---|---|
| 同一图片，不同分辨率 | <img> + srcset + sizes | 代码简单，浏览器自动优化 |
| 不同构图或裁剪 | <picture> | 艺术指导必需 |
| 现代格式兼容 | <picture> | 格式降级必需 |
| 简单静态图片 | <img> | 不需要复杂功能 |
| 兼容老浏览器 | <img> | 支持最广泛 |
常见错误观念
错误一：picture 用于响应式图片
事实：<img> 配合 srcset 和 sizes 已经能处理大部分响应式需求
真相：<picture> 主要用于艺术指导和格式降级
错误二：picture 更先进，应该优先使用
事实：在不需要艺术指导或格式降级的场景下，<img> 是更好的选择
真相：合适的工具用在合适的地方才是最好的做法
错误三：响应式图片用 picture
事实：很多响应式场景用 <img> + srcset 更合适
真相：先评估需求，选择最简单的解决方案
实际使用场景
应该使用 img 的场景
网站标志：
<img src="logo.svg" alt="公司标志" 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>最佳做法
必须遵守的规则
<!-- 正确：始终提供 alt 属性 -->
<img src="photo.jpg" alt="描述文字">
<!-- 错误：缺少 alt 属性 -->
<img src="photo.jpg">
<!-- 装饰性图片使用空 alt -->
<img src="decoration.jpg" alt="">性能优化方法
<!-- 重要图片优先加载 -->
<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">现代图片格式策略
<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>：解决特定复杂情况，如艺术指导和格式降级
核心建议：
从简单的 <img> 开始，只在真正需要时再用 <picture>
充分利用 <img> 的 srcset 和 sizes 属性
对重要图片使用 <picture> 做格式优化
始终考虑性能和用户体验
掌握这两个标签的正确用法，你就能在各种情况下都做出合适的技术选择，既保证用户体验，又不会把简单问题复杂化。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
