サイトの表示速度が遅くなる原因のほとんどが画像です。
画像を最適化することは、サイトの表示速度を速くするのにとても有効です。
以下の方法で画像を軽くすることができます。
- 画像サイズを最適化
- JPEGで保存する
- 画像を圧縮する
- 画像を遅延読み込みさせる
- 画像をWebPにする
この記事では、これらの最適化を詳しく解説していきます。
目次
画像サイズの最適化
画像サイズが大きすぎると画像が重くなってしまいます。
ブログ初心者の方は、記事に大きすぎる画像をアップロードしがちです。
縦より横幅の方が長い画像の場合、おすすめの画像幅はブログ記事内のコンテンツ幅と同じ幅です。
コンテンツ幅はテーマの設定によるのですが、800px前後くらいになっていることがほとんどです。
もし幅が分からないのであれば、1000pxくらいにしておけば間違いないでしょう。
AMPに対応させてる場合の画像サイズ
AMPで記事を配信している場合は、画像は1200px以上にする必要があります。
横幅より縦の方が長い画像の場合は、コンテンツ幅と同じにすると大きすぎることがあります。
その場合は、見え方をプレビューしつつサイズを調整してください。
Retinaディスプレイでも綺麗に見せたい
Macなど一部のPCでは、ディスプレイがRetinaディスプレイになっていることがあります。
このようなRetinaディスプレイは解像度が高く、倍のサイズにしないと画像がボヤけてしまいます。
例えば、コンテンツ幅が800pxであれば、Retinaディスプレイで画像を綺麗に見せたい場合は、1600pxにする必要があります。
ただし、RetinaディスプレイPCでサイトを見る人の割合はそこまで多くはないので、800px前後でも大きな問題にはなりません。
保存形式はどれがおすすめ？
画像には主に、JPEG、PNG、GIFという拡張子があります。
JPEGは写真のような色数の多い画像に向いています。
PNGは色数の少ない画像に向いており、写真をPNGにしてしまうと非常にデータサイズが大きくなってしまいます。
色数の少ない画像であればPNGの方が軽くなることもありますが、判断ができないのであればJPEGにしておくのが無難です。
GIFは画質があまり良くないので、最近では使うことが少なくなっています。ですので、GIFは基本的に使わなくても大丈夫です。
画像を圧縮する
画像を圧縮すると、画像データを減らすことができます。
無駄に高画質な画像はデータサイズが大きくなるので、画質を落とすことで軽量化できます。
「画質を落とす？それはいやだ」と思う人もいるかもしれませんが、ある程度の圧縮であれば画質の劣化は分かりません。
圧縮する方法は主に二つあります。
- Webサービスで圧縮してから記事にアップロードする方法
- プラグインを使って一括で圧縮する方法
画像を圧縮できるWebサービス
画像を圧縮するなら、Googleが提供しているSquooshがおすすめです。
リンク
圧縮前後の画像を見比べることができ、ファイルサイズを確認しながら圧縮ができます。
画像一つ一つ確認して圧縮するのが面倒と言う人は、TinyPNGがおすすめです。
画像をアップロードするだけで簡単に画像が圧縮できるので、手間が掛からず楽です。
画像の圧縮ができるプラグイン
次は、画像の圧縮ができるプラグインを紹介します。
画像をまとめて圧縮できるプラグインが「EWWW Image Optimizer」です。
アップロード済みの画像を一括で圧縮できますし、有効化していればアップロードする画像は自動で圧縮されます。
「Compress JPEG & PNG images」も同様に画像が圧縮できるサービスです。
「EWWW Image Optimizer」よりも圧縮率が高く、画像データサイズ削減の効果は高いのですが、無料で使えるのは画像500ファイルまでです。
画像500ファイルと言っても、以下の理由で実質は80くらいです。
画像は最低でも6ファイル生成される
WordPressで画像をアップロードすると、サーバーには最低でも6つの画像が自動で保存されます。
- オリジナルサイズ
- ラージサイズ
- ミディアムラージサイズ
- ミディアムサイズ
- スモールサイズ
- サムネイルサイズ
テーマによってはこれ以上生成されることもあります。
無料で使う場合ちょっと物足りないので、私は「EWWW Image Optimizer」を使用しています。
画像を遅延読み込みする
ページ速度の高速化に効果的なのが、画像の遅延読み込みです。
ページを開いた時に全ての画像を表示させるのではなく、スクールして画像の表示位置に来た時に画像を読み込みます。
画像の読み込みを後回しにすることで、ページ全体の読み込みが速くなるのです。
ただ、最近のWordPressは自動でloading="lazy"が付与されるので、基本的に記事内の画像は遅延読み込みになるので、そこまで気にしなくても大丈夫になりました。
記事以外の画像については、遅延読み込みするかどうかはテーマの実装によります。
テーマが対応していなければ、プラグインを使ってください。
画像の遅延読み込みはプラグインで行えます。有名どころだと「Lazy Loader」「a3 Lazy Load」とかがあります。
「a3 Lazy Load」は目次で見出しに飛ぶと位置がズレてしまうため、「Lazy Loader」の方が使い勝手が良いでしょう。
WebPで配信する
WebPというのは、画像の次世代フォーマットと呼ばれるもので、従来の形式よりも軽くすることが可能です。
先ほど画像の圧縮で紹介したプラグイン「EWWW Image Optimizer」は、WebPでの画像配信もできます。
以下の記事では「EWWW Image Optimizer」を使ったWebP形式での画像を配信する方法を紹介しています。
画像をWebPにするWordPressプラグイン【EWWW Image Optimizer】
サイト内の画像読み込みを速くするために、画像のフォーマットをWebPにするのがおすすめです。今回は、…
画像の最適化ができているかチェックしてみよう
画像の最適化がちゃんとできているかを調べるには、PageSpeed Insightsを使うのがおすすめです。
PageSpeed Insightsを使えば、サイトの高速化施策がちゃんと行われているかチェックすることができます。
改善点があれば減点されるので、改善案を参考にサイトを高速化できます。
もし画像の圧縮が不十分、WebPになっていない、画像のサイズが大きい、遅延読み込みができていないなどの改善点を知ることができます。
画像以外の改善案も出てくるので、それらも併せて修正していきましょう。
まとめ
今回は、以下の画像最適化について解説しました。
- 画像サイズを最適化
- JPEGで保存する
- 画像を圧縮する
- 画像を遅延読み込みさせる
- 画像をWebPにする
画像の軽量化はサイトの高速化にとても効果があるので、必ず実践しておくべきです。
ぜひ、あなたのWordPressブログでも試してみてください。
他にもこんな記事があります。
WordPressで記事中の見出し前にアドセンスを自動で挿入
今回は、WordPressで記事の見出し前にアドセンスを自動で挿入する方法を紹介します。この記事で紹…
【Mac】Local by FlywheelでWordPress開発環境を構築する方法…
今回は、「Local by Flywheel」の導入方法と使い方を解説していきます。「Local b…
