画像をWebPに変えてページを軽くする手順｜変換・配信・つまずきやすい点

なぜ画像から手を付けるのか

一般的なWebページでは、転送されるデータのうち画像が占める割合がもっとも大きくなりがちです。HTMLやCSSを数KB削るより、1枚数百KBの写真を半分にする方が効果ははるかに大きく、作業も単純です。PageSpeed Insightsで「次世代フォーマットでの画像の配信」や「適切なサイズの画像」といった指摘が出ている場合は、まず画像を疑ってよいでしょう。

WebPはGoogleが開発した画像形式で、写真向けの非可逆圧縮と、図やロゴ向けの可逆圧縮の両方に対応しています。同じくらいの見た目なら、JPEGやPNGより小さくなることが多く、透過（アルファチャンネル）も扱えます。現在の主要ブラウザはすべてWebPの表示に対応しており、Safariも2020年のバージョン14から表示できるようになりました。

変換する前に決めておくこと

いきなり変換を始めると、あとで「このサイズでは足りなかった」とやり直しになりがちです。先に次の3点を決めておくと作業が一度で済みます。

• 表示する最大の幅：本文の幅が760pxなら、高解像度の画面を考えても1520px程度あれば十分です。4000px級の写真をそのまま載せる必要はありません。
• 画質（品質）の値：写真なら75〜82あたりが、見た目と容量のバランスが取りやすい範囲です。文字の入ったスクリーンショットは劣化が目立つため、85前後か可逆圧縮にします。
• 元画像を残す場所：WebPはあくまで配信用です。編集し直すときのために、元のPNGやJPEGは別フォルダに保管しておきます。

変換の方法

コマンドで一括変換する（cwebp）

枚数が多い場合は、Googleが配布している変換ツール cwebp を使うと早く済みます。macOSならHomebrewで入れられます。

brew install webp

# 1枚だけ変換（品質80、幅1520pxに縮小）
cwebp -q 80 -resize 1520 0 photo.jpg -o photo.webp

# フォルダ内のJPEGをまとめて変換
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

-resize 1520 0 の「0」は、縦横比を保ったまま高さを自動で決めるという意味です。スクリーンショットのように文字が中心の画像なら、-lossless を付けて可逆圧縮にすると文字のにじみを防げます。

画像編集ソフトやブラウザで変換する

数枚だけなら、画像編集ソフトの書き出し機能でWebPを選ぶのが簡単です。ブラウザ上で変換できるツールもありますが、仕事の写真や個人情報が写った画像を扱う場合は、画像をサーバーへアップロードしない仕組みかどうかを確認してから使うと安心です。

サイトでの配信方法は2通り

方法1：picture要素で出し分ける

HTMLを直接編集できるなら、picture 要素を使うのがもっとも確実です。WebPに対応したブラウザはWebPを、対応していない古いブラウザはJPEGを読み込みます。

<picture>
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="写真の説明" width="1520" height="1013" loading="lazy">
</picture>

ここで大切なのが width と height の指定です。画像の縦横サイズをあらかじめ伝えておくと、読み込み中にレイアウトがずれる現象（CLS）を防げます。CSSで max-width: 100%; height: auto; を指定しておけば、スマホで縮んでも比率は保たれます。

方法2：.htaccessで自動的に差し替える

すでに大量のページで .jpg を参照している場合、すべてのHTMLを書き換えるのは大変です。Apache系のサーバーなら、同じ名前の .webp があるときだけ自動で差し替える設定ができます。このサイトでも採用している方法です。

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1,L]

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

ブラウザが「WebPを受け取れます」と伝えてきたときだけ差し替えるので、非対応の環境には元の画像が届きます。Vary: Accept は、途中のキャッシュサーバーが「WebP版」と「JPEG版」を取り違えないようにするための指定です。

つまずきやすいポイント

最後の「向き」の問題は意外と多く発生します。スマホで撮った写真は、画像自体は横向きのまま「縦に回転して表示してね」という情報だけを付けて保存されていることがあります。変換ツールがこの情報を読まないと、横倒しの画像ができてしまいます。

効果を確かめる

変換後は、ブラウザの開発者ツールの「ネットワーク」タブで、画像の種類が webp になっているか、転送サイズがどれだけ減ったかを確認します。そのうえでPageSpeed Insightsを実行し、画像関連の指摘が消えているかを見ます。

数字だけでなく、実際にスマホのモバイル回線でページを開いてみるのもおすすめです。Wi-Fiでは気にならなかった読み込みの遅さが、画像の軽量化で目に見えて改善することがあります。