响应式图片实战指南

响应式图片会根据设备提供不同版本的图片。手机不需要 4000px 宽的照片，桌面浏览器也不应该只能看到手机缩略图。使用响应式图片技术可以提升加载速度，避免浪费带宽。

为什么响应式图片很重要

现代网站会在从小手机到大显示器等各种屏幕上被访问。如果所有设备都下载同一张图片，移动端用户就要承担桌面级文件体积。响应式图片让浏览器选择最合适的文件来解决这个问题。

两种主要技术

srcset 和 sizes

srcset 列出同一张图片的多个版本，浏览器会根据视口、设备像素比和 sizes 属性选择最合适的文件。

<img
  src="photo-1200.jpg"
  srcset="photo-600.jpg 600w, photo-1200.jpg 1200w, photo-2000.jpg 2000w"
  sizes="(min-width: 1024px) 80vw, 100vw"
  alt="对照片的描述"
>

picture 元素

picture 元素可以按格式提供替代版本，例如 AVIF 或 WebP，并保留 JPEG 作为回退。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="对照片的描述">
</picture>

可复用的响应式工作流

1. 确定每张图片的最大展示宽度。
2. 为常见布局导出 600、1200 和 2000 像素版本。
3. 使用 WebP 或 AVIF 等现代格式。
4. 给图片添加 srcset 和 sizes。
5. 设置明确的宽度和高度，避免布局抖动。
6. 在移动端和桌面端确认浏览器下载的是预期文件。

应该避免的做法

• 只用 CSS 宽度缩小大图
• 让所有设备下载同一张巨型图片
• 缺少 Alt 文本或描述性文件名
• 忽略图片加载造成的布局偏移

实施检查清单

• 确定每张图片的最大展示宽度。
• 按布局实际需要的宽度导出多个版本。
• 使用 WebP 或 AVIF 等现代格式。
• 使用准确的 srcset 和 sizes 值。
• 设置明确的宽度和高度，避免布局抖动。
• 在开发者工具中确认移动端和桌面端加载的是预期文件。

目标是在不下载过大文件的前提下，为每个设备提供足够清晰度。

常见问题

srcset 和 picture 有什么区别？ srcset 用于在同一格式内选择不同尺寸。picture 用于选择不同格式或不同裁剪版本。

每张图片都需要响应式吗？ 最重要的内容是正文图片和 Hero 图。小图标和简单图形通常用一个优化文件即可。

响应式图片会影响 SEO 吗？ 不会。更快的加载和正确的图片标记通常有利于性能和可访问性，进而支持 SEO。

可以本地测试响应式图片吗？ 可以。使用浏览器开发者工具模拟不同视口，并检查实际请求的是哪个图片文件。

延伸阅读

• Web.dev：响应式图片
• MDN：响应式图片
• MDN：img 元素