PixRinse截图展示英文版应用。预设名称和设置项也提供应用内的本地化版本。
从这组设置开始
在 PixRinse 中选择 响应式 Web，再按接收平台的实际要求检查以下设置。
| 宽度 | 320 / 640 / 1280 / 1920 px |
|---|---|
| 输出 | WebP，质量 80 |
| 颜色 | sRGB |
| 尺寸较小的原图 | 跳过超出原图尺寸的输出 |
具体操作步骤
准备原始图片资源
源图片的宽度应足以覆盖所需的最大输出。每种尺寸都直接从原图生成，不会从较小的输出再次缩放。
选择响应式 Web
查看四个内置宽度和文件名。比源宽的变体将被跳过，因此请检查计划的输出计数。
导出图像集
检查所有输出。每个源有多个输出需要 Pro；免费层仍然可用于测试单一尺寸的工作流程。
将图像添加到您的页面
在 srcset 中使用宽度描述符并设置 sizes 以匹配实际布局。在图像元素上包含准确的宽度、高度和替代文本。
HTML 示例 · 请按实际布局调整
<img
src="vase-1280w.webp"
srcset="vase-320w.webp 320w,
vase-640w.webp 640w,
vase-1280w.webp 1280w,
vase-1920w.webp 1920w"
sizes="(max-width: 720px) 100vw, 960px"
width="1280" height="853"
alt="A terracotta vase with an olive branch"
>本教程的实际文件
这个案例的实际结果
3072 px 宽的源足以容纳所有四个预设宽度。每个文件都是一个单独的 WebP，直接从该源生成。
- 质量
- 80
- 色彩配置文件
- sRGB
- 单张原图的输出
- 4
| 文件 | 格式 | 像素 | 字节 |
|---|---|---|---|
| vase-1280w.webp | WebP | 1280 × 853 | 35,214 |
| vase-1920w.webp | WebP | 1920 × 1280 | 64,108 |
| vase-320w.webp | WebP | 320 × 213 | 4,018 |
| vase-640w.webp | WebP | 640 × 427 | 11,594 |
根据所示的示例文件进行测量。您的结果取决于您的原件和设置。陶瓷花瓶照片是人工智能生成的样本。应用程序屏幕截图和导出的文件测量结果都是真实的。
常见问题
如果我的源只有 1000 px 宽，会发生什么？
该模板会跳过 1280 和 1920 px 变体。仅参考实际生成的文件。
应用程序是否生成HTML？
此工作流程生成图像。在您的网站代码或内容系统中添加 srcset 和 sizes。