响应式图片、srcset 与 WebP 工作流
在本地生成多宽度图片资源，理解 srcset 与 sizes，并复制 picture 或 Next.js 片段，无需上传源图。
主图、博客封面与文档截图常以单一高分辨率发布，但手机、平板与窄栏布局需要更小的变体。你可以在本地生成这些尺寸，并复制与导出文件一致的标记。
何时使用 srcset
srcset 告诉浏览器有哪些宽度对应的文件。配合 sizes，浏览器能在绘制前选择更合适的资源。
对许多静态站点与组件库，典型流程是：
- 从一张源图导出多个宽度。
- 将文件放到页面旁或
public/目录。 - 粘贴引用这些文件名的
<img srcset>或<picture>。
本地实操步骤
- 准备一张源图（例如 1920×1080 的主图 JPEG）。
- 打开响应式图片生成器。
- 保留默认宽度（480、768、1024、1280），或按布局调整。
- 托管支持现代格式时选 WebP；需要最大兼容时选 JPEG。
- 点击生成图片，查看各文件体积，下载 zip。
- 复制
srcset、<picture>或 Next.js<Image>片段，并按页面更新sizes与alt。
处理全程在本机完成。
WebP 与回退
导出 WebP 时，<picture> 片段包含 WebP <source> 与回退 <img>。若流水线仍需 JPEG/PNG，可在生成前切换输出格式并使用 <img srcset> 片段。
若仅缩小宽度仍不够，可将单个输出再送入图片压缩工具。
相关工具
- 图片裁剪 — 生成多宽度前先调整比例。
- 图片压缩 — 在宽度选择之外进一步缩小体积。
- Markdown 预览 — 预览嵌入响应式图片的文档。