WordPressの画像サイズを最適化する方法
ホームページの表示が遅い原因として、よくあるのが画像の大きさです。
写真をそのままアップロードしていると、ページがどんどん重くなってしまいます。
この記事では、WordPressの画像を軽くして、表示を速くするための方法を解説します。
1.見直すのは大きさ・圧縮・形式
画像を軽くするために見直したいのは、次の3つです。
| 見直すこと | 内容 |
|---|---|
| 大きさ（ピクセル） | 表示する大きさに合わせて、画像の横幅を小さくする |
| 圧縮 | 見た目をほとんど変えずに、ファイルの容量を減らす |
| 形式 | JPEGやPNGより軽くなりやすい、WebPなどの形式を使う |
このうち、いちばん効果が大きいのは、画像の大きさを表示する大きさに合わせることです。
2.画像を軽くすると表示が速くなる理由
ページを開くとき、ブラウザは文章と一緒に画像のデータも読み込みます。画像のデータが大きいほど、読み込みに時間がかかります。とくにスマートフォンで、通信が遅い場所では差が大きくなります。
スマートフォンやカメラの写真は、横幅が数千ピクセルあることもめずらしくありません。記事の中で横幅1000ピクセルほどで表示するなら、それより大きな部分は、読み込んでも使われていないことになります。
画像は、表示する大きさに合わせて小さくしてからアップロードするのが、いちばん効果のある最適化です。
3.最適化の手順
1. アップロードの前に大きさを整える
記事の中の画像なら、横幅1200〜1600ピクセルほどで足りることが多いです。パソコンの写真の編集ソフトや、画像を縮小できる無料のツールで、横幅を小さくしてからアップロードします。
※WordPressは、とても大きな画像をアップロードすると、自動で小さくした画像を作る仕組みがあります。ただし、元の画像も残るため、最初から小さくしておく方が確実です。
2. 圧縮する
画像を圧縮するツールや、WordPressのプラグインを使うと、見た目をほとんど変えずに容量を減らせます。圧縮しすぎると画質が落ちるため、仕上がりを確かめながら調整しましょう。
3. WebPを使う
WebPは、JPEGやPNGより容量が小さくなりやすい画像の形式です。WordPressでもアップロードして使えます（サーバーの環境によります）。詳しくは、WebPとは？で解説しています。
すでにある画像を見直す
- 01重いページを見つける
PageSpeed Insightsなどで、表示の遅いページと、重い画像を調べます。
- 02大きすぎる画像を探す
メディアライブラリで、ファイルの大きさを確認します。
- 03差し替える
小さくした画像をアップロードし、記事の中の画像を「置換」で差し替えます。
※画像をまとめて圧縮するプラグインもあります。使う前には、必ずバックアップを取りましょう。
4.よくある質問
画像を小さくすると、画質が悪くなりませんか？
表示する大きさに合わせて小さくするだけなら、見た目はほとんど変わりません。圧縮を強くしすぎると画質が落ちるため、確かめながら調整しましょう。
画像の圧縮のプラグインは、入れた方がよいですか？
画像をたくさん使うホームページなら、便利です。ただし、プラグインが増えすぎないように、必要なものだけを選びましょう。
PNGとJPEGは、どう使い分けますか？
写真はJPEG、ロゴや図など色の少ない画像や、背景を透明にしたい画像はPNGが向いています。どちらも、WebPに変えると軽くなることが多いです。
画像を軽くしても、表示が遅いままです。
画像のほかに、プラグインやテーマ、サーバーの性能などが原因のこともあります。全体を見直す方法は、WordPressの表示速度を改善する方法で紹介しています。
5.まとめ
WordPressの画像は、大きさ、圧縮、形式の3つを見直すと軽くなります。いちばん効果が大きいのは、表示する大きさに合わせて小さくすることです。
- アップロードの前に、横幅を1200〜1600ピクセルほどに整える
- 圧縮して、見た目を確かめながら容量を減らす
- WebPを使えるなら、使ってみる
- すでにある重い画像は、差し替えて見直す
まずは、いちばん見られているページの画像の大きさを確かめてみましょう。画像の入れ方は、WordPressで画像を追加・変更する方法で解説しています。
ホームページの表示が遅くて困っている場合は、浅草Web屋にご相談ください。