响应式图片生成器（srcset 和 sizes）

响应式图片生成器（srcset 和 sizes）: 用途

响应式图片让手机下载小图、大屏幕下载大图，在不损失清晰度的前提下让网站更快。为此需要同一张照片的多个尺寸，以及含 srcset 和 sizes 的代码。

上传图片，选择宽度、格式和质量，把所有版本下载成 .zip。代码已准备好：含 srcset、根据图片在页面中的位置设置的 sizes、避免布局跳动的 width 和 height、主图用的 loading=lazy 或 fetchpriority=high（带 preload），还可选带 JPG 备用图的 <picture>。

使用方法

1. 选择图片。
2. 设置宽度、格式和显示位置。
3. 下载 .zip 并复制代码。

使用场景

• 商店的商品照片。
• 落地页主图。
• 图库和博客。

常见问题

srcset 和 sizes 有什么用？

srcset 列出同一图片的各个版本及其宽度（例如 640w、1280w）。sizes 说明图片在屏幕上占多大空间。有了这两者，浏览器会选择在该屏幕上仍然清晰的最小版本，手机就不会下载 2000 px 的照片。

为什么标签里要写 width 和 height？

有了 width 和 height，浏览器会在图片加载前预留空间，照片出现时文字不会向下跳动。这能改善 CLS，它是谷歌 Core Web Vitals 的指标之一。

什么时候用 loading=lazy？

用于页面靠下的图片。打开页面就能看到的主图绝不能用 lazy：它应使用 fetchpriority=high，以尽快加载。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具