実践的な制作手順
商品画像をWebPに書き出す：容量と画質の違いを確認
ショップで承認済みのマグを変えずに画像容量を減らしたいとき、必要なのは画像の再生成とは異なる作業です。原本は保持し、候補の出力で違いを見えるようにします。
既存の架空のマグ画像を制御した原本に使いました。合成された編集用画像で、店舗の商品写真ではありません。Ciyoは元バイト列を取得し、3候補をエンコードして実ファイルから比較ボードを作りました。以下はこの画像だけの結果です。
書き出す前に原本を記録する
承認済み原本を保管し、寸法、モード、透明度を調べます。ページ上で透明に見えても、実際は明るい不透明な背景の場合があります。ファイルのデータから形式を選びます。
原本PNGは1024×1024のRGBでアルファチャンネルはありません。容量は1,105,072バイトです。SHA-256は内容に基づくURLと一致し、エンコード後も原本は未変更でした。この例のJPEGでは背景の合成は不要です。
設定を明示して候補を作る
CiyoはPillowで可逆WebP、品質85のWebP、品質90のJPEGを作りました。すべて元の寸法です。品質値は異なるエンコーダに属し、同等の見た目を意味しません。
原本が透明なら、不透明な出力でどう扱うか指定します。透明な原本を保ち、意図した背景色を確認します。変換時に知らないうちに不要な背景を作らないようにします。
既存の商品PNGをバイト単位でそのまま使い、原本を変更せず保管してください。同じ寸法で可逆WebP、非可逆WebP品質85、JPEG品質90を別ファイルに出力します。実際のヘッダー形式、バイト数、モード、アルファを報告します。保存後に開き、可逆出力のデコード画素を原本と比較します。各保存ファイルの同じ切り抜きでラベル付き比較ボードを作ってください。画像生成は行いません。実容量とデコード後の画素を比較する
元のキャンバスファイルをダウンロードし、独立してデコードしました。可逆WebPは全RGB画素が原本と一致しました。非可逆候補は一致せず、チャンネル差の最大値は品質85のWebPで30、品質90のJPEGで42でした。この画像の確認値で、一般的な品質の順位ではありません。
ここでは非可逆WebPの容量が大幅に小さくなりましたが、見た目の変化を商品で許容できることが前提です。顧客が見るサイズで、小さな文字、色の境界、質感を確認します。
| ファイル | 寸法 | バイト数 | 画素が原本と一致 |
|---|---|---|---|
| PNG原本 | 1024×1024 | 1,105,072 | はい |
| 可逆WebP | 1024×1024 | 627,352 | はい |
| WebP品質85 | 1024×1024 | 11,056 | いいえ |
| JPEG品質90 | 1024×1024 | 55,097 | いいえ |
全候補で同じ細部を見る
比較ボードではオレンジのラベルの縁を72×72で切り抜き、3×に拡大しています。各切り抜きは対応する保存ファイルから取得しました。同じ場所を同じ倍率で比べます。位置や表示サイズを変えると判断が不確かになります。
拡大部分は出力の確認用と明記しています。この手順の製品画面全体のスクリーンショットとは別です。局所的な変化を見つけ、商品全体を見て重要性を判断します。
書き出しのテストとWebサイトのテストを分ける
GoogleのWebP資料は可逆・非可逆エンコードを説明していますが、形式の機能は自分の店舗で測った結果ではありません。配信時の変換、キャッシュ、レイアウト、ブラウザの画像選択で顧客に届く内容が変わります。
組み込み後にダウンロードした実アセットと店舗の表示を確認します。この実演は容量と画素を測っています。読み込み速度、Core Web Vitals、購入率、複数ブラウザでの店舗表示は測定していません。
採用ファイルを原本と一緒に渡す
見た目の基準を満たす最小候補を選び、原本と設定を残します。実験用の非可逆出力と承認済み原本を混同しないように名前を付けます。
商品の繊細な細部では、非可逆候補が小さくても可逆保存を選ぶ場合があります。標準の出力設定を決める前に、実際の画像の代表例で試してください。
よくある質問
WebPは必ずJPEGより小さくなりますか？
この例の非可逆WebPは小さくなりましたが、内容と設定によって変わります。実ファイルを測定してください。
可逆ならファイルのバイト列も同じですか？
いいえ。形式とバイト列は変わります。この実行ではデコードしたRGB画素が一致しました。
ショップが速くなる証明ですか？
いいえ。実際に配信される画像とページ速度は別にテストします。
承認済み商品画像を1つ比較する
実際の原本をCiyoに持ち込み、設定を明示した候補を出力します。細部を確認してから採用しましょう。