AI 摘要：本文指出大多数开发者在前端实现中无意间给用户加载了远大于实际需求的图片，这浪费了带宽与计算资源。作者以 NextJS <Image> 组件为例，解释 sizes 属性在响应式图片 (responsive images) 中的重要性，并系统讲解了 srcset、sizes、图片加载策略 (lazy vs eager loading)、设备像素比 (DPR) 等概念，最终提供完整的 “Cheat Sheet” 实用总结，帮助开发者高效地为不同屏幕设备提供最佳尺寸的图片。

1. 现实检视 (Reality Check)
• 使用高分辨率原图在小屏幕设备上会导致带宽浪费
• 即使使用 NextJS <Image> ，若缺少 sizes 属性，仍会传输超大图

2. sizes 属性的核心作用
• 明确规定图片渲染尺寸，帮助浏览器选择最佳匹配
• 设置 sizes="100vw" 显著压缩文件大小（最高可减少 25 倍）

3. 响应式图片的基本概念
• 像素限制**：超过屏幕物理限制的像素冗余无意义
• 引入 srcset 与 sizes：提供多种分辨率图片并让浏览器选择最优版本

4. 在复杂布局中的使用
• 当图片宽度并非等于屏幕宽度时，必须结合 sizes 指定实际渲染逻辑
• 支持多断点 (media queries)，可为不同 viewport 设置不同加载策略
• sizes="auto" 仅在懒加载 (lazy loading) 模式下生效，且浏览器兼容性有限

5. 图片加载策略
• loading="eager"：默认立即加载，适合首屏关键图片 (FCP)
• loading="lazy"：延迟加载，推荐用于非关键图片，高效节省资源

6. 设备像素比 (Device Pixel Ratio, DPR)
• 区分 **CSS pixel 与 device pixel
• 对应关系由 DPR 决定，例如 DPR=2 需要两倍分辨率图片
• srcset 支持 w 单位（推荐）和 x 单位（DPR 描述符），前者更适合响应式

7. 实用指南 (Cheat Sheet)
• 固定尺寸图片（如 icon）：设置固定 sizes，srcset 使用 DPR 描述符即可
• 响应式图片：
• 若为首屏内容：指定具体 sizes
• 若非首屏内容：加上 loading="lazy" 并优先用 sizes="auto, ...fallback"

8. 参考资料
• MDN Responsive Images
• HTML Living Standard
• Use density descriptors (web.dev)

Reason Under Pressure

Your Images Are (Probably) Oversized

Or why you should always set the `sizes` and `srcset` attributes on your (responsive) <img> tags.