先に結論を言います。画像を軽くする基本は2つです。写真や画面を撮った画像を PNG のまま載せず、WebP（または JPEG）にすること。そして、表示する大きさに合った縮小版をブラウザが選べるよう、表示する幅（sizes）を実際の幅に合わせること。サムネイルが並ぶページなら、これだけで重さが数分の1になることもあります。
写真を PNG で保存していないか
実績の一覧に並べるサムネイルに、Web サイトの画面を撮った画像を使うことはよくあります。画面を撮ると PNG で保存されることが多く、そのままアップロードしてしまいがちです。
PNG は、図や文字のくっきりした画像には向いていますが、写真のように色の変化が多い画像では、ファイルがとても大きくなります。私が画面を撮った画像を 640×480 のサムネイルにして比べたところ、次のくらいの差が出ました。
- PNG
- 1枚 220〜400KB。7枚並べると 1.5〜2.8MB
- WebP
- 1枚 20〜60KB。7枚並べても 0.2〜0.4MB ほど
見た目の違いは、ほとんどわかりません。サムネイルが並ぶページでは、これだけでページ全体の重さが大きく変わります。
形式の選び方
- 写真・画面の画像
- JPEG か WebP。PNG にはしない。
- 図・ロゴ・文字の多い画像
- PNG か WebP。透明な部分が必要なときも、このどちらか。ロゴは、できれば SVG。
- WebP
- 写真にも図にも使え、多くの場合いちばん軽い。いまの主なブラウザは、どれも表示できます（Google の WebP の説明）。
- AVIF
- WebP よりさらに軽くできる新しい形式。作るのに時間がかかり、対応していない道具もまだあります。
迷ったら WebP、と覚えておいてください。大きく外しません。
WordPress は縮小版を作るが、選び方に癖がある
WordPress は、画像をアップロードすると、いくつかの大きさの縮小版を自動で作ります。そしてページを表示するとき、ブラウザに「この中から合う大きさを選んで」と候補を渡します。
ところが、そのとき一緒に渡す「表示する大きさ」の目安（sizes）が、初期設定では「画面の幅いっぱい」になっています。記事の本文の幅が 600px ほどしかなくても、横幅 1,440px のパソコンで見ると、ブラウザは 1,440px 前後の大きな縮小版を選んでしまいます。
私はこの目安を、実際に表示する幅（記事の本文の幅や、一覧のカードの幅）に合わせて出すようにテーマを直しています。これで、ブラウザが必要以上に大きな画像を読まなくなります。
WordPress での直し方
- 縮小版を WebP で作るアップロードした元の画像はそのままに、WordPress が作る縮小版だけを WebP にする設定を入れます。
- 今ある画像を作り直すすでにアップロードしてある画像の縮小版を、WebP で作り直します（縮小版を作り直すプラグインや WP-CLI を使います）。
- 表示する大きさを伝える本文や一覧の画像に、実際に表示する幅を伝えるようにします。
サムネイルが並ぶページなら、これだけでページ全体の重さが数分の1になることもあります。縮小版を WebP にする設定は、テーマの functions.php に次のように書けます（サーバーが WebP を作れる場合）。
add_filter( 'image_editor_output_format', function ( $formats ) {
$formats['image/png'] = 'image/webp';
$formats['image/jpeg'] = 'image/webp';
return $formats;
} );この設定は、これからアップロードする画像に効きます。すでにある画像は、縮小版を作り直してください。
アップロードする画像の大きさの目安
表示される幅の2倍くらいの大きさで用意しておけば、高精細の画面でもきれいに見えます。それより大きくしても、見た目はほとんど変わらず、重くなるだけです。
- 画面いっぱいの写真
- 横 2,000〜2,400px
- 記事の中の写真
- 横 1,200〜1,600px
- 一覧のサムネイル
- 横 800〜1,280px
元の画像も、高精細の画面ではそのまま読み込まれることがあります。縮小版を WebP にしていても、元の画像は JPEG（または WebP）で書き出しておいてください。
更新する人が気をつけること
サイトを自分で更新している方は、次の3つだけ気をつけてください。それだけで、画像で重くなることはかなり防げます。
- 写真は JPEG で書き出す。画面を撮った画像も、PNG のままアップロードしない
- 長い辺は 2,000px 前後までに縮めてからアップロードする（WordPress も 2,560px を超える画像は自動で縮めますが、元の大きなファイルは残ります）
- 同じ写真を何度もアップロードしない
よくある質問
- AVIF にした方がいいですか？
- WebP よりさらに軽くなることが多いですが、作るのに時間がかかり、対応していない道具もまだあります。まずは WebP で十分です。
- 画像を圧縮するプラグインは必要ですか？
- サーバーが WebP を作れれば、WordPress だけでも縮小版を WebP にできます。プラグインを使う場合は、元の画像を消さない設定になっているか、元に戻せるかを確かめてから使ってください。
どの画像が重いかは、PageSpeed Insights でサイトの URL を調べると、画像に関する指摘としてファイルごとに示されます。ページの重さや表示の速さは、私の運用・保守の診断でも確かめています。