使用 srcset 和 sizes 实现响应式图像
为不同屏幕密度提供尺寸合适的图像。
使用 srcset 和 sizes 实现响应式图像 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
单一图像的问题
向所有设备提供同一张大图，会浪费小屏幕上的带宽：
- 屏幕宽度为 390px 的手机不需要 2400px 的图像
- 4K 显示器应使用比 96dpi 更高分辨率的图像
- 响应式图像会为合适的屏幕提供合适的图像
srcset 属性
srcset 提供带有宽度信息的图像来源列表：
<img
src="photo-800.jpg"
srcset="
photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1600.jpg 1600w
"
alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->像素密度描述符
对于不同分辨率下的固定尺寸图像，请使用 1x、2x 和 3x 描述符：
<img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
alt="Coddy logo"
width="120"
height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->sizes 属性
sizes 告诉浏览器图像在不同视口尺寸下的显示宽度：
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw,
800px"
alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->浏览器如何选择图像
浏览器会计算：sizes 值 × 设备像素比，然后从 srcset 中选择图像：
- 600px 视口、2× DPR、size=100vw → 需要 1200px 图像 → 选择 1600w
- 1200px 视口、1× DPR、size=50vw → 需要 600px 图像 → 选择 800w
- 加载后，浏览器会缓存图像，之后可能不会重新加载
默认 sizes 值
没有 sizes 时，浏览器会假设图像占据整个视口宽度（100vw）：
<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->
<img
srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="100vw" <!-- explicit full-width -->
src="hero-1600.jpg"
alt="Hero image"
>srcset 宽度描述符与 x 描述符
srcset 有两种模式：
- 宽度描述符（w）——与
sizes搭配使用：根据流式布局智能选择 - 像素密度描述符（x）——适用于多种分辨率的固定尺寸图像
大多数响应式图像应使用 w 描述符。图标、标志和固定尺寸元素应使用 x。
生成 srcset 文件
用于生成响应式图像变体的工具：
- Sharp（Node.js）——以编程方式调整图像大小
- Squoosh——基于浏览器，支持可视化比较
- Cloudinary / Imgix——基于网址按需调整大小
- Webpack / Vite 插件——在构建时生成
srcset 与 WebP 及回退格式
将 srcset 与 <picture> 结合使用，以提供格式回退：
<picture>
<!-- Modern browsers: WebP -->
<source
type="image/webp"
srcset="photo-400.webp 400w, photo-800.webp 800w"
sizes="(max-width: 600px) 100vw, 50vw"
>
<!-- Fallback: JPEG -->
<img
srcset="photo-400.jpg 400w, photo-800.jpg 800w"
sizes="(max-width: 600px) 100vw, 50vw"
src="photo-800.jpg"
alt="Mountain photo"
>
</picture>艺术指导与分辨率切换
响应式图像有两类问题：
- 分辨率切换——同一张图像使用不同分辨率 → 使用
srcset+sizes - 艺术指导——不同屏幕使用不同裁剪或构图 → 使用带有
<source media>的<picture>
测试响应式图像
验证 srcset 是否正常工作的方法：
- 打开 DevTools → Network 标签页 → 筛选 Images
- 将设备模拟设置为不同的视口尺寸和 DPR
- 重新加载页面——检查浏览器请求了哪个文件
- 另外检查：Lighthouse → Performance → Properly sized images 审计
srcset 浏览器支持
浏览器对 srcset 的支持非常完善：
- 所有现代浏览器均支持（Chrome、Firefox、Safari、Edge）
src回退可处理旧版浏览器- 用于生产环境时不需要填充程序
快速检查
sizes 属性会告诉浏览器什么信息？
回顾：srcset 和 sizes
响应式图像要点：
srcset——包含图像固有宽度或像素密度的图像文件列表sizes——描述图像显示宽度的媒体条件- 浏览器选择最佳匹配项：sizes 值 × 设备 DPR
- 流式图像使用宽度描述符（
w）；固定尺寸元素使用x - 始终提供
src作为回退
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「使用 srcset 和 sizes 实现响应式图像」课时是免费的吗？
是的 — 「使用 srcset 和 sizes 实现响应式图像」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「使用 srcset 和 sizes 实现响应式图像」这节课中我会学到什么？
为不同屏幕密度提供尺寸合适的图像。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 srcset 和 sizes 实现响应式图像」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- img 元素：src、alt、width 与 height
- 使用 srcset 和 sizes 实现响应式图像
- 用于艺术指导的 picture 元素
- figure 与 figcaption