标准答案
- srcset 提供多张候选图片，浏览器会结合 DPR、视口宽度和网络情况选择合适资源。
- sizes 告诉浏览器这张图在不同视口下大概会显示多宽，主要配合 srcset 的宽度描述符使用。
- loading 控制加载时机，lazy 适合非首屏图片，eager 适合需要尽早加载的关键图片。
- decoding 控制解码方式，async 表示允许浏览器异步解码，减少图片解码阻塞渲染的概率。
- 首屏 LCP 主图通常不要 lazy；同时 img 要写 width 和 height 或预留比例，避免图片加载后造成布局偏移。
题目解析
- srcset：提供不同宽度或不同 DPR 的图片候选。
- sizes：描述图片最终展示宽度，主要配合宽度描述符使用。
- loading：lazy 表示延迟加载，eager 表示尽早加载。
- decoding：async 表示可异步解码，sync 表示同步解码，auto 由浏览器决定。
如果 sizes 写错，浏览器可能下载过大的图片，浪费带宽。首屏关键图片如果设置 lazy，可能延迟 LCP。图片必须写 width 和 height 或使用 CSS 预留比例，避免布局偏移。
代码示例
文章卡片、商品图、头像列表等非首屏图片可以这样写。首屏 LCP 图通常不要 lazy。
HTML
<img
src="/images/article-800.webp"
srcset="/images/article-400.webp 400w, /images/article-800.webp 800w, /images/article-1200.webp 1200w"
sizes="(max-width: 720px) 100vw, 680px"
width="800"
height="450"
loading="lazy"
decoding="async"
alt="文章封面图"
>常见误区
- 只写 srcset 不写 sizes，导致浏览器按默认 100vw 估算，资源选择不准。
- 所有图片都 lazy，包括首屏主图，反而拖慢关键渲染。
- alt 写成文件名或关键词堆叠，不能表达图片含义。