用 srcset 和 sizes 为合适的屏幕提供合适的图片，把 picture 留给艺术指导，并掌握懒加载。
在 Kodokon 中打开本课图片通常占页面体积的一半：它们是你的第一大性能杠杆。核心机制是带 w 描述符的 srcset，它声明可用文件的实际宽度，再配合 sizes，它宣告预期的显示宽度。关键点：浏览器通过它的预加载扫描器选择图片，甚至在它计算出 CSS 布局之前。没有 sizes，它会假定 100vw，往往下载远超所需的内容。最终选择还会考虑屏幕密度：一块 2x 的屏幕在 400 px 的区域上会获取一个大约 800 px 的文件。
<img src="harbor-800.jpg"
srcset="harbor-400.jpg 400w,
harbor-800.jpg 800w,
harbor-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Old harbor at sunset"
width="800" height="533">有了 srcset/sizes，浏览器仍然掌握主动权：它可能根据密度或省流量偏好提供更轻的变体。<picture> 则反转了这个逻辑：你通过 <source media> 或 <source type> 强制指定来源。把它留给两种情形：艺术指导（在移动端换一个不同的裁剪，而不只是尺寸）和格式协商（AVIF 或 WebP，并带 JPEG 回退）。对于简单的缩放，picture 是不必要的复杂化。
<picture>
<source media="(max-width: 600px)"
srcset="hero-square.jpg">
<source type="image/avif"
srcset="hero-wide.avif">
<img src="hero-wide.jpg" alt="Museum facade"
width="1200" height="600">
</picture>对于页面上的其余一切，loading="lazy" 会把下载推迟到图片接近视口时，原生实现且无需 JavaScript。把它和 decoding="async" 搭配，这样解码不会阻塞渲染，而最重要的是和 width 与 height 搭配：浏览器据此推导宽高比并预留空间，从而消除布局偏移（CLS）。对于关键图片，做和懒加载相反的事：fetchpriority="high"。
<img src="gallery-01.jpg"
alt="Exhibition hall"
loading="lazy" decoding="async"
width="800" height="600">