实用经验 サイト運営 読了目安 約5分

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

ページの表示が重いとき、最初に見直す価値が高いのが画像です。このサイトでも画像を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のMIMEタイプを知らないAddType image/webp .webp を追加
差し替えたのに古い画像が出るブラウザやCDNのキャッシュファイル名かクエリ（?v=日付）を変える
写真の向きが変わった変換時に回転情報（Exif）が失われた変換前に画像を正しい向きで保存し直す

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

効果を確かめる

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

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

画像の軽量化は、一度仕組みを作れば新しく追加する画像にも同じ手順を当てはめるだけです。「元画像を保管 → 表示サイズへ縮小 → WebPへ変換 → width/heightを書く」を毎回の決まりにしておくと、サイトが大きくなっても表示速度を保ちやすくなります。

实用经验の一覧を見る