Srcset 生成器
新根据你的宽度值生成带 srcset 与 sizes 的响应式 <img> 标记。
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
在一处生成 srcset、sizes 和 picture 标记
手动编写响应式图片标记非常繁琐——srcset 列表、对应的 sizes 属性、包含 WebP 和 AVIF 回退的 <picture> 块——一个拼写错误就会导致浏览器悄悄下载错误的文件。这个 srcset 生成器为您构建完整的标签：输入文件名和宽度，它会生成一个带有正确描述符、懒加载和异步解码的完整可复制响应式 <img> 或 <picture> 元素。
这是一个免费的 响应式图片生成器，完全在浏览器中运行——无需注册，不上传任何内容，加载后离线也可正常使用。
srcset 和 sizes 详解
响应式图片需要两个部分协同工作。srcset 是文件列表及其实际宽度——hero-640.jpg 640w 告诉浏览器该文件宽度为 640 像素。sizes 描述图片在布局中的显示宽度，例如 (max-width: 600px) 100vw, 600px。浏览器读取 sizes，乘以设备像素比，然后下载最接近的 srcset 候选文件。
将描述符切换为 x 可获得像素密度标记——logo.png 1x, logo@2x.png 2x——非常适合视网膜屏幕上的固定尺寸图片（如徽标和图标），此时使用 w 描述符和 sizes 会显得多余。
何时改用 picture 元素
普通 srcset 处理分辨率切换——同一张图片的不同尺寸。当您需要更多控制时请使用 <picture> 元素：提供带回退的新一代格式，或艺术指导（移动端和桌面端使用不同的裁剪方式）。
在 <picture> 模式下，此工具会生成一个 <source type="image/avif">、一个 <source type="image/webp"> 和一个 JPEG 或 PNG <img> 回退，使现代浏览器获得最小的格式，旧浏览器也能看到图片。
在本地将图片调整为每种宽度
标记只是工作的一半——您还需要实际调整大小后的文件。将图片拖入工具，它会在 HTML canvas 上将其调整为每种宽度，然后让您下载完整的文件集，文件名与生成的标记完全匹配（hero-320.jpg、hero-640.jpg 等）。
无需上传，无需构建管道。由于放大超过原始尺寸只会增加模糊度，工具会标记任何大于源图的宽度，以确保您的图片集准确无误。
与 Squoosh、Responsivebreakpoints.com 和 Cloudflare Image Resize 的比较
Squoosh（来自 Google）擅长单张图片的压缩和转换——非常适合为 WebP 或 AVIF 选择合适的质量设置。但它不会生成 srcset 标记，也不会生成可粘贴到 HTML 中的完整响应式图片标签。它是一个压缩工具，而非标记生成器。
Cloudinary 的 Responsivebreakpoints.com 会将您的图片上传至 Cloudinary 服务器以计算最佳断点并生成调整大小后的图片。结果不错，但您的文件会离开您的设备，且须遵守 Cloudinary 的条款。Cloudflare Image Resize 和 Imgix 是 CDN 服务——它们在交付时处理图片，但需要账户设置、API 集成和持续计费。UtiloKit 的 srcset 生成器处于不同位置：它在客户端本地生成完整的 HTML 标记并调整图片大小，无需上传、无需账户、无需费用，也没有文件大小限制。
宽度、断点和核心网页指标
可靠的宽度集是 320、640、960、1280 和 1920，每步大约翻倍，覆盖手机到大型视网膜显示器；为全出血主图添加 2560。提供合适大小的图片是改善核心网页指标的最大收益之一：更少的字节意味着更快的最大内容渲染 (LCP)，添加 width 和 height 属性可防止影响用户和排名的布局偏移 (CLS)。
为屏幕外的图片添加 loading="lazy"，使其仅在滚动到视图时才加载；为主图添加 fetchpriority="high"，使其优先加载——两者在此处都是一键切换。
私密、即时且离线可用——在任何设备上均可运行
无需安装任何东西，也无需创建账户。每个标签都在您输入时在浏览器中组装，您调整大小的任何图片都使用 canvas API 在本地处理——从不上传任何内容。生成器在页面加载后离线可用，因此您可以在任何地方创建响应式 img srcset 和 <picture> 标记——在飞机上、在手机上、没有 Wi-Fi 时。
Frequently asked questions
srcset 是什么，有什么用？
srcset 属性允许您列出同一张图片的多个不同宽度的版本，浏览器可以下载最适合设备的那个。不必向每位访客发送一个大文件，您只需写 srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w"，浏览器会选择看起来仍然清晰的最小图片——在手机上节省带宽，在视网膜笔记本电脑上提供清晰图片，所有这些都无需 JavaScript。
什么时候应该使用 srcset？
当图片在不同屏幕上以不同尺寸显示时——主图横幅、文章图片、产品照片，任何流动元素——都应使用 srcset。它是分辨率切换的正确工具：同一张图片，只是更大或更小。如果您需要在某些断点更改裁剪方式或实际图片（艺术指导），请使用 picture 元素。小型固定尺寸的图标和徽标根本不需要 srcset。
如何同时使用 srcset 和 sizes？
srcset 列出文件及其实际像素宽度（640w 表示该文件宽 640 像素）；sizes 告知浏览器在计算布局之前图片的显示宽度。配合使用：srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px"。浏览器读取 sizes——'600px 以下时为全视口宽度，否则为 600px'——计算所需像素（显示宽度 × 设备像素比），然后选择最接近的 srcset 候选文件。
w 描述符和 x 描述符有什么区别？
w 描述符描述每个文件的实际像素宽度——image-640.jpg 640w——必须与 sizes 配合使用；浏览器随后为任何屏幕进行计算。x 描述符仅描述像素密度——image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x——适合固定尺寸图片，如只需在视网膜屏幕上显示清晰的徽标。对于流动的、布局驱动的图片使用 w，对于固定尺寸的图片使用 x。
如何提供带回退的 WebP 和 AVIF？
使用 picture，每种现代格式对应一个 source，并用普通 img 作为回退：source type="image/avif" srcset="…"，然后 source type="image/webp" srcset="…"，然后 img src="hero.jpg" …。浏览器使用它支持的第一种格式，如果不支持任何格式则回退到 JPEG 或 PNG img——旧浏览器仍能看到图片。在 picture 模式下启用 AVIF 和 WebP，此工具会写出完整的块，包括所有描述符。
应该生成哪些图片宽度？
一个可靠的通用集是 320、640、960、1280 和 1920——每步大约翻倍，覆盖小型手机到大型视网膜屏幕；为全出血主图添加 2560。对于从不超过 800px 宽的内容，不需要超过约 1600（800 × 2 用于视网膜）的宽度。不要生成太多导致步骤毫无意义；四到六个宽度通常就够了。
为什么我的 srcset 不起作用？
常见原因：(1) 您在浏览器正确判断不需要最大文件的屏幕上测试——调整窗口大小或降速到慢速连接以观察切换；(2) sizes 缺失或错误，导致浏览器假设 100vw 并下载大文件；(3) 列出的文件在那些路径上实际不存在（检查网络标签中的 404 错误）；(4) 缓存在提供已下载的尺寸。srcset 是一个提示，浏览器可以选择更大的缓存图片——这是设计使然。
