はじめに
第26章では、WordPressで画像を使う基本を学びました。
次に考えるのが、
画像を必要以上に重くしないこと
です。
現在のスマートフォンやCameraは、とても大きな写真を撮れます。
その写真を何も考えず大量にアップロードすると、ページの表示が遅くなる原因になります。
ただし、
「軽くするために画質をボロボロにする」
のも違います。
この章の目的は、
その場所に必要な品質を保ちながら、必要以上のデータを減らすこと
です。
ピクセルサイズとファイルサイズは違う
最初に2つを分けます。
ピクセルサイズ
画像の縦横の大きさ。
例：
4032 × 3024 pxファイルサイズ
画像ファイルのデータ容量。
例：
5.8 MBピクセル数が大きいほどファイルサイズも増えやすいですが、形式や圧縮方法によっても変わります。
スマートフォン写真は大きすぎることがある
たとえば、ページ内で1000px前後の幅しか使わないのに、4000px以上の写真を毎回アップロードする必要があるとは限りません。
WordPressには大きすぎる画像を自動Scaleする仕組みがあり、現在のCoreでは標準Thresholdが2560pxです。
ただし、
WordPressが縮めてくれるから何でも巨大なままアップロード
ではなく、用途に合わせて事前に整える方が管理しやすい場合があります。
WordPressは複数の画像サイズを作る
WordPressはアップロードした画像から、複数の画像サイズを生成することがあります。
またレスポンシブ画像に対応しているため、ブラウザーが表示条件に応じた画像を選びやすくなっています。
これは便利ですが、
元のファイルが巨大でも何も気にしなくてよい、
という意味ではありません。
アップロード前の画像整理も大切です。
画像を軽くする基本は「リサイズ」と「圧縮」
リサイズとは
リサイズは、画像のピクセルサイズを小さくすることです。
たとえば、
4032 × 3024
↓
1600 × 1200のようにします。
ホームページで必要な最大表示幅を考えてリサイズします。
ただし、ヒーロー 画像など大きく表示する画像は、小さくしすぎると粗くなります。
すべて同じピクセル数へ揃えるのではなく、用途で考えます。
圧縮とは
圧縮は、画像データを効率よく減らす処理です。
同じピクセルサイズでも、圧縮方法によってファイルサイズが変わります。
ここでも、
できるだけ小さくではなく、
見た目に問題がない範囲で必要以上のデータを減らすと考えます。
画像形式を選ぶ
JPEGはどんな画像向き？
JPEGは、写真のように色や階調が多い画像で長く使われてきた形式です。
圧縮率を上げるとファイルサイズを小さくできますが、画質は少しずつ失われます。
店舗写真、人物写真、施術写真などでは今も使われる場面があります。
PNGはどんな画像向き？
PNGは、透明背景を使う画像や、輪郭のはっきりしたGraphicsなどで使われます。
写真をPNGにすると、JPEGなどよりファイルサイズが大きくなる場合があります。
「PNGの方が高画質だから全部PNG」
とは考えません。
WebPとは
WebPは、従来形式より効率よく圧縮できることが多い画像形式です。
WordPressは5.8以降、ホスティング環境が対応していればWebPをアップロードして通常の画像として利用できます。
WebPだから必ず最小になるとは限りませんが、写真などで有力な選択肢です。
AVIFとは
WordPressは6.5以降、AVIFもサポートしています。
AVIFは高い圧縮効率を得られる場合があります。
ただし、WordPressでAVIFを処理するにはホスティング側の画像ライブラリがAVIFに対応している必要があります。
つまり、
WordPressが対応
=
すべてのサーバーで必ず使えるではありません。
また、形式を新しくすること自体を目的にしません。
どの形式を選べばいい？
初心者向けには、
写真
→ JPEG / WebP / AVIFなどを比較
透明背景が必要なGraphic
→ PNG / WebPなどを検討くらいから始めれば十分です。
重要なのは、
同じ見た目なら、必要以上に大きなファイルを使わないこと
です。
「全部AVIF」が正解ではない
AVIFやWebPが使えるからといって、過去の画像を急いですべて変換する必要はありません。
変換によって、
- 画質
- 互換性
- サーバー処理
- 管理方法
も変わります。
まず新しく使う画像から、サイト環境に合う形式を選ぶ方法もあります。
画質を落としすぎない
たとえば美容室では、髪の質感や色を見せる写真そのものに価値があります。
圧縮しすぎて、
- 髪の艶が潰れる
- Colorが崩れる
- 細部が汚くなる
なら、目的を失います。
速度のために魅力を削りすぎないようにします。
アップロード前の簡単な流れ
画像をアップロードする前に、
1. この画像はどこで使う？
2. 必要なピクセルサイズは？
3. 形式は適切？
4. 圧縮しても見た目は大丈夫？
5. ファイル名は分かりやすい？を確認します。
ファイル名も整理する
ファイル名は、メディアライブラリの管理でも役立ちます。
たとえば、
IMG_9472.jpgより、
salon-interior.jpgの方が後から見つけやすい場合があります。
Googleもファイル名から画像内容について非常に軽い手がかりを得ると案内していますが、ファイル名へキーワードを大量に詰め込む必要はありません。
管理しやすく、内容が分かる名前にします。
WordPressへアップロードしてから確認する
画像を軽くしたら、実際のページで確認します。
- 粗くない？
- Retinaなど高密度画面でも問題ない？
- モバイルで見える？
- トリミング位置は適切？
- 読み込みは遅くない？
ファイルサイズだけ見て終わりにしません。
サイト全体が遅いなら第40章へ
画像を最適化しても、サイトが遅い場合があります。
原因は、
- Theme
- Plugin
- JavaScript
- CSS
- フォント
- サーバー
- 外部 スクリプト
などかもしれません。
第40章ではPageSpeed Insightsなどを使い、サイト全体の表示速度を確認します。
今回のポイント
- ピクセルサイズとファイルサイズは別
- 必要以上に巨大な元画像をそのまま使わない
- WordPressは複数サイズとレスポンシブ画像を利用する
- リサイズと圧縮は役割が違う
- JPEG / PNG / WebP / AVIFは用途で選ぶ
- WordPressはWebPとAVIFをサポートしているがホスティング環境の対応も確認する
- 新しい形式へ変えること自体を目的にしない
- 画質を落としすぎない
- ファイル名は管理しやすく内容が分かる形にする
- サイト全体のパフォーマンス診断は第40章で扱う
今回の視点
良い画像最適化は、
「一番小さいファイルを作ること」
ではありません。
画像には伝える役割があります。
必要な情報や魅力を残しながら、
不要なデータだけを減らす。
そのバランスが大切です。
Part 4｜URL・画像・Plugin・問い合わせを整える