一张缩略图要出五个尺寸：目录站的图片档位怎么定，srcset 和 sizes 怎么写

移动端实测，分类页的图片传输 1.8MB，实际显示宽度 160px。也就是说八成流量花在了用户看不见的像素上。目录站一页几十个缩略图，这个浪费会被放大几十倍。

图片来源：网络，版权归原作者所有，侵权请联系删除

先算显示宽度，再定档位

档位不该拍脑袋定，要从布局反推。移动端两列布局，减去间距，每张图约 160px 宽；桌面三列约 240px；详情页顶部大图约 640px。这三个数字乘以你要支持的最高像素密度，就是需要的图片宽度。

位置	显示宽度	需要的图
移动两列	约 160px	320w
桌面三列	约 240px	480w
详情页大图	约 640px	1280w
分享卡片	1200×630	单独出一张，别拿缩略图裁

三到四档就够。每多一档，构建时间、存储、CDN 缓存条目都在涨，而收益递减得很快。我见过出到八档的，实际命中集中在其中两档。

用宽度描述符，不要用密度描述符

两种写法都能用，但适用场景不同。1x 与 2x 这种密度描述符适合固定尺寸的图，比如 logo 和图标，宽度不随布局变化。w 宽度描述符适合会随视口变化的图，浏览器会结合 sizes 算出需要多少物理像素，再挑最接近的那档。

目录站的缩略图属于后者。同一个条目卡片，在手机上 160px、桌面上 240px，用密度描述符表达不了这种情况。

sizes 写错等于没写

不写 sizes 时，浏览器默认按 100vw 计算，也就是「这张图占满整个视口宽度」。它于是会挑一张 1000 多像素的图给你，显示在 160px 的格子里。

正确的写法要和 CSS 断点对上：

<img src="site-480.jpg"
     srcset="site-320.jpg 320w, site-480.jpg 480w, site-640.jpg 640w"
     sizes="(max-width: 600px) 45vw, (max-width: 1024px) 30vw, 240px"
     width="480" height="300" alt="站点名 - 分类名">

这里 45vw 和三列布局的 30vw 是从 CSS 里反算出来的。麻烦的地方在于：改布局就要同步改 sizes，两处不同步就会重新掉回「下大图」的状态。我把它写在了布局的注释旁边，改的时候能看见。

picture 只在两种情况用

一是需要换裁切：移动端用方形、桌面用横图，主题在画面正中时才需要，硬裁会切掉主体。二是需要换格式：AVIF、WebP、JPEG 三层降级。

官方文档里有一条硬要求：picture 里面必须有带 src 的 img 元素作为兜底，因为部分浏览器和抓取工具不理解 source。爬虫认的也是那个 img。

只为了分辨率切换就用 srcset，不要套 picture。picture 的维护成本高，多一层 source 就多一处可能写错的地方。

宽高属性不是可选项

给 img 写 width 和 height，浏览器才能在图片加载前预留出空间。目录站一页几十张图，不写这两个属性，加载过程会一直抖，累积布局偏移直接爆掉。

同一张图的不同档位要保持相同宽高比。如果 320w 是 4:3、640w 是 16:9，浏览器切换档位时会跳一下，比不写还糟。

CDN 裁切的缓存键

用图片 CDN 的实时裁切时，宽度是 URL 参数，比如 ?w=320。这个参数必须进缓存键，否则 320 和 640 会互相覆盖，用户随机拿到模糊或者超大的图。多数图片 CDN 默认会处理，但自己搭的反向代理容易漏。

另一件事：图片 sitemap 里可以列 CDN 域名下的图片地址，官方允许跨域。前提是你在站点验证里也验证了那个 CDN 域名，否则抓取出错时你收不到通知。

两个顺手能做的

首屏之外的图加 loading="lazy"，首屏内的图不要加。首屏那张如果是列表顶部的大图，反而可以给 fetchpriority="high"。

alt 写「站点名 + 用途」，比如「站酷 - 设计素材类目缩略图」。不要堆关键词，也不要用「图片1」这种。图片搜索带来的流量不大，但成本几乎为零。