WordPress画像最適化：アップ前にやること（圧縮・WebP・サイズ）
WordPressに画像を入れたら、
- ページが重くなった
- 表示が遅い
と感じることがあります。
原因の1つが、画像が「大きすぎる・重すぎる」ことです。
この記事では、WordPressにアップする前にできる画像最適化（最適化＝Web向けに扱いやすく整える）の基本をまとめます。
WordPress画像最適化の基本（アップ前）
WordPress 7.1では画像処理の仕組みが変わりました
WordPress 7.1では、対応しているブラウザや端末の場合、画像の圧縮・リサイズ・形式変換・サムネイル生成などを、サーバーではなくブラウザ側で処理する仕組みが導入されました。 これにより、画像処理によるサーバーへの負担を減らしたり、生成される画像を軽くしたりしやすくなっています。
では、WordPressにアップする前の画像最適化は、もう必要ないのでしょうか？
事前に画像を整える意味がなくなったわけではありません。
WordPress 7.1の機能は、WordPressへ画像をアップロードするときの処理を改善するものです。
一方、アップロード前に、
- 用途に合ったサイズにしておく
- 必要に応じて圧縮する
- PNG・JPG・WebPなどの形式を選ぶ
といった準備をしておけば、WordPressへ渡す画像そのものを、自分で確認しながら整えられます。
また、WordPress 7.1のブラウザ側処理に対応していない環境では、従来どおりサーバー側で画像処理が行われます。
そのため、「WordPress側にすべて任せる」というより、必要に応じてアップロード前にも画像を整えておく、という考え方で良いと思います。
1）表示に合う縦横サイズにする
表示サイズより大きすぎる画像は、容量が増えやすいです。
まずは用途（アイキャッチ/本文）に合った大きさに整えると進めやすいです。
2）圧縮して容量を減らす
圧縮すると、見た目を大きく崩さずに容量を減らせることがあります。
3）WebPに変換する
WebPはWeb向けに軽量化しやすい画像形式です。
写真やAI画像のPNGが重いときは、WebPにすることで扱いやすくなることがあります。
4）アップ後に表示をチェックする
圧縮や変換のあと、
- 文字がつぶれていないか
- ざらつきが気にならないか
を確認すると安心です。
Petanko Imageで事前に整える
Petanko Imageは、ブラウザだけで
- 画像圧縮
- WebP変換
などを行えるWeb向け画像最適化サイトです。
画像ファイルを外部サーバーへ送信しないため、手元の画像をそのまま処理できます。
【画像例】
※数値は一例です。画像内容によって変わります。
これからも、Webで使いやすい画像づくりを後押しできるよう、改善を積み重ねていきます。