WebP画像は変換して終わりにせず写真と透過画像を分けて配信条件を確認する

WebPは、web pageで使う画像を圧縮して送るためのimage formatです。JPEGやPNGをまとめて置き換えることが目的ではありません。写真、ロゴ、背景が透ける図版で求める見え方は違います。元画像を残し、どの画像をWebPへ変え、どの閲覧環境へ何を返すかを決めてから使います。

GoogleのWebP資料は、lossy compression、lossless compression、透明度を持つ画像を扱えることを説明しています。圧縮方式が増えれば、同じ画像を必ず小さくできるわけではありません。品質を下げすぎれば、文字の輪郭、商品の細部、色の境目が崩れます。画像を軽くする作業と、読者に必要な情報を読める状態で残す作業を分けます。

WebPに向く画像は表示の役割から選ぶ

最初に、page内の画像を種類で分けます。商品や施工例の写真、装飾用の大きな背景、透過したロゴや図版、説明に必要な画面図を同じ品質設定で変換しません。写真では明暗の滑らかさを確認し、図版では文字と直線を確認し、透過画像では背景へ重ねたときの縁を確認します。

たとえば、飲食店のmenu pageに料理写真が12枚あり、店内案内の図版が2枚、ロゴが1枚あるとします。料理写真をWebPへ変えるときは、縮小した一覧だけで判断しません。料理の色、湯気、皿の縁を実際の表示寸法で見ます。図版は、料理写真と同じ設定を流用せず、料金、営業時間、電話番号が読めるかを確かめます。ロゴに透過が必要なら、白い背景だけでなく、headerや写真の上でも確認します。

この分け方をしないと、容量だけを優先した変換になります。写真が少し粗くなっても内容が分かる場合と、予約方法の文字が読みにくくなる場合は、影響が違います。軽量化は数値を小さくすることではなく、読者が待たずに必要な情報を確かめられる状態を作ることです。

JPEGとPNGを捨てる前に代替画像を決める

WebPを扱えない閲覧環境へ何を表示するかは、変換作業とは別に決めます。WebP fileだけをuploadして、画像が表示されない利用者を後から調べる構成にはしません。元のJPEGまたはPNGを保管し、WebPを選べない場合に返す画像を準備します。

HTMLではpicture要素とsource要素を使い、WebPを利用できる環境にはWebPを渡し、それ以外にはimg要素の画像を表示する構成にできます。ここで大切なのは、二つのfileを置くことではありません。WebPと代替画像が同じ内容を表し、寸法、切り抜き、代替textが食い違わないようにすることです。片方だけ更新すると、見る環境によって商品の色や説明図の内容が変わります。

WordPressなどのCMSを使う場合は、管理画面へuploadした画像から、どのformatとsizeが生成されるかを先に確認します。themeがimg要素だけを出力するなら、画像をWebPへ変換しただけでは代替を出せません。pluginやserverの変換機能を使う場合も、元fileを誰が保管し、変換に失敗したときに何が表示されるかを決めます。制作会社へ任せるなら、変換を依頼することと、公開後に画像が読めることを同じ完了にしません。

容量は一枚の比較だけで決めない

WebPを試すときは、代表画像を一枚選び、元fileと変換後のfile sizeを記録します。ただし、一枚だけで採用を決めないようにします。写真が中心のpage、透過した図版があるpage、複数の画像を連続で読むpageを選び、必要な品質と削減できる容量を比べます。

仮に、写真の一覧では小さくなったが、文字を含むバナーでは輪郭がにじむなら、両方へ同じ設定を使う理由はありません。写真だけをWebPにして、バナーはPNGを残す判断もできます。反対に、透明な背景を持つ図版で十分な見え方を保てるなら、WebPの利用を検討できます。formatの名前で決めず、画像がpageで果たす役割で決めます。

計測でも、画像fileだけの容量とpage全体の読込を分けます。大きな画像を減らしても、外部script、動画、複数のfont fileが重ければ、pageはすぐに表示されません。WebPは画像の改善候補であって、遅いpageの原因を一つに決める道具ではありません。公開前後には、画像の通信量、表示されるまでの順序、問い合わせや購入へ進む画面が使えるかを確認します。

変換の前後で確認する順序

作業は、元画像の整理から始めます。最初に、画像のURL、用途、元file、現在の寸法、透過の要否を一覧にします。次に少数の画像をWebPへ変換し、原寸と実際の表示寸法で見比べます。その結果を基に、写真、図版、ロゴごとに品質設定と代替画像を決めます。

公開する前には、WebPを選べる環境と選べない環境の両方で、同じpageを開きます。表示された画像、画像の寸法、説明の代替text、link先を確認します。スマートフォンでは、画面を縮めただけで済ませず、回線が安定しない場面でも必要な情報を読めるかを見るべきです。問い合わせformや予約buttonの近くにある画像なら、画像を軽くした結果、操作の位置や説明が変わっていないかも確認します。

公開後に画像を差し替えるときも、元fileを捨てません。写真を再編集する、ロゴを差し替える、別のformatへ戻す必要が出たとき、WebPだけでは素材の管理が難しくなります。制作時の元file、公開用の変換file、pageへ出すURLを分けて持てば、更新を外注しても何が変わったかを確かめられます。

最初の一手は、容量が大きい画像を一枚選び、その画像が写真か、透過が必要な図版か、説明を読ませる画面かを書き出すことです。WebPの変換結果と代替画像を並べて確認し、問題がなければ同じ役割の画像へ範囲を広げます。画像を軽くする目的と、読者が見られる状態を保つ責任を、変換の前にそろえます。