適切なサイズの画像を配信する方法〜PageSpeed Insights〜

PageSpeed Insight でサイトを分析すると、「改善できる項目」に「適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。」と表示された場合の対処方法をご紹介します。

本記事の最後にご紹介する他の項目も改善する前提で、パソコンでは最大 97 点、モバイルでは最大 68 点までスコアをアップできました。

現状・条件
アイキャッチ画像を用意する
画像を最適化する
画像の最適化を確認する
さいごに

現状・条件

レンタルサーバ環境 ( ブログを始めるなら国内シェアNo.1のエックスサーバー )
WordPress バージョン：5.3
WordPress のテーマ：Cocoon 2.0.0.3

画像最適化プラグインは reSmush.it を利用しています。
Regenerate Thumbnails でサムネールを管理しています。
WordPress のメデイア設定は下記の通りです。

optimize_image-1 — ▲ WordPress のメディア設定情報

最適化の対象は主に アイキャッチ 画像で、実際に配信される画像サイズは下記の通りです。

パソコン：640×360 px の画像
モバイル：240×135 px の画像

該当記事を公開した後、PageSpeed Insights での分析結果次第、上記のサイズの画像の最適化が必要です。

以下、新しい記事の作成時に行うアイキャッチ画像の入手から配信までの流れです。

アイキャッチ画像を用意する

無料の画像ファイルをダウンドードできるサイトから記事の内容に合った画像を入手します。
当サイトでは Pixabay をよく利用していますが、各自の方法で用意しても問題ありません。

optimize_image-2 — ▲ ライセンス条件を必ず確認してください。

optimize_image-3 — ▲ 画像サイズは1280×768を選択します。( Google推奨サイズ )

画像を最適化する

当サイトでは既に、reSmush.it を適用していましたが、サイトのパフォーマンスはよくならず、GIMP で画像を圧縮し、TinyPNG でさらに圧縮した後、画像を WordPress にアップする方法で画像のサイズを抑えてきましたが、Google の Squoosh でより簡単且つ効率よく画像をリサイズ＆圧縮することができました。

以下、Squoosh を使用して加工する方法です。

Step 1
Squoosh にアクセスします。
▲ 23/07/07現在、サイトの見た目は少し変わってます。
Step 2
先ほど Pixabay から入手した画像をドラッグ＆ドロップします。
▲ Squooshで画像を編集
編集方法は、
画面右下の Quality を調整し、真ん中の青いバーを動かしながら左右の画像の変化を確認して適切な圧縮率を探ります。( Resize にチェックを入れて画像のサイズを調整できますが、ここでは必要ありませんので割愛します )
編集が完了したら、画面右下のダウンロードボタンをクリックしてローカルに保存します。
Step 3
アイキャッチ画像をWPにアップロードします。
記事作成を終えたら、記事を公開します。

Cache 系プラグインを使用中であれば、Cache を削除します。

画像の最適化を確認する

PageSpeed Insight でサイトを分析します。

その結果画面の「改善できる項目」に「適切なサイズの画像」項目が表示されているか確認します。表示されなければそれで OK です。

記事を公開後サイトのパフォーマンスを測定し改善点を洗い出す

もし、「適切なサイズの画像」項目が表示されたら再度最適化を行います。以下は例です。

下記の対象画像のURLを右クリックし適宜保存してください。

対処する

Squoosh へアクセスし、保存したファイルをドラッグ＆ドロップします。
画像を減らせるデータ量 ( 36KB 以下 ) のサイズに圧縮して保存します。( 48 – 36 = 12KB まで下げると品質が悪すぎる )

optimize_image-7 — ▲ 画像を**48KB** → **36KB**以下に圧縮します。

「適切なサイズの画像」項目のURLを見て、該当画像の保存場所を確認します。
例：https://www.jacepark.com/wp-content/uploads/2019/11/lost-places-4596469_1920-640×360.jpg

確認した WordPress の保存場所に画像をアップロードして切り替えます。
XServer の場合、「InfoPanel」> 「サーバー」> 「ファイル管理」> 保存場所(public_html/wp-content/uploads/2019/11/)まで移動します。