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。