这种写法的优势：
浏览器自动选择最适合当前屏幕分辨率的图片
根据视口大小动态调整加载的图片尺寸
代码简洁，性能优秀
<picture>
<picture> 不是为了替代 <img>，而是为了解决 <img> 无法处理的特定场景。
<picture> 解决的三大核心问题
1. 艺术指导（Art Direction）
在不同设备上显示不同构图或裁剪的图片：
<!-- 桌面端：宽屏全景 -->
<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. 现代格式降级 优先使用高效格式，同时兼容老旧浏览器：
代码高亮：
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="格式优化示例">
</picture>
3. 复杂条件组合 同时考虑屏幕尺寸和图片格式：
<!-- 大屏 + 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> 的场景
英雄横幅（不同裁剪）：
<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. 现代图片格式策略
<!-- 优先使用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> 的 srcset 和 sizes 属性
为关键图片使用 <picture> 进行格式优化
始终考虑性能和用户体验
掌握这两个标签的正确用法，你就能在各种场景下都做出最合适的技术选择，既保证用户体验，又避免过度工程化。
希望这篇指南能帮助你彻底理解这两个重要的HTML标签！
参考文章：原文链接
400 186 1886
