PixRinseスクリーンショットは英語のアプリを示しています。プリセット名とコントロールは、アプリの言語でも使用できます。
あなたの出発点
PixRinse で レスポンシブWeb を使用し、実際の目的地に照らしてこれらの設定を確認してください。
| 幅 | 320 / 640 / 1280 / 1920 px |
|---|---|
| 出力 | WebP、品質 80 |
| 色 | sRGB |
| 小規模な情報源 | より大きなバリアントはスキップされます |
やり方
元のアセットから始める
必要な最大のバリアントに対応できる十分な幅のソースを使用してください。すべての派生物は、繰り返しサイズ変更されるのではなく、オリジナルから生成されます。
レスポンシブWeb を選択してください
4 つの組み込みの幅とファイル名を確認してください。ソースより幅の広いバリアントはスキップされるため、計画された出力数を調べてください。
画像セットをエクスポートする
すべての出力を確認します。ソースごとに複数の出力を使用するには Pro が必要です。無料利用枠は、シングルサイズのワークフローをテストするために引き続き使用できます。
ページに画像を追加する
srcset で幅記述子を使用し、実際のレイアウトと一致するように sizes を設定します。画像要素に正確な幅、高さ、代替テキストを含めます。
<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 幅のソースは、4 つのプリセット幅すべてに十分な大きさです。各ファイルは個別の WebP であり、そのソースから直接生成されます。
- 品質
- 80
- カラープロファイル
- sRGB
- 1つのソースからの出力
- 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 |
示されているサンプル ファイルで測定されています。結果はオリジナルと設定によって異なります。陶花瓶の写真はAI生成サンプルです。アプリのスクリーンショットとエクスポートされたファイルの測定値は本物です。
よくある質問のいくつか
ソースの幅が 1000 px のみの場合はどうなりますか?
テンプレートは、1280 および 1920 px バリアントをスキップします。実際に生成されたファイルのみを参照してください。
アプリは HTML を生成しますか?
このワークフローでは画像が生成されます。 Web サイトのコードまたはコンテンツ システムに srcset と sizes を追加します。
ワークフローを機能させましょう。
PixRinse を開き、いくつかの画像を追加し、上記の設定から始めます。
Mac版をダウンロード無料: バッチごとに最大 10 イメージ、ソースごとに 1 つの出力。このワークフローの複数の出力には Pro が必要です。 無料とプロを比較します。