ホーム > 記事 > ブログ > 【PageSpeed Insights】Webページの高速化 | 効率的な画像フォーマット

記事

【PageSpeed Insights】Webページの高速化 | 効率的な画像フォーマット

GoogleがUX最適化のために提供しているPageSpeed Insights。前回は「【PageSpeed Insights】Webページの高速化 | 次世代フォーマットでの画像の配信」について述べました。今回は「効率的な画像フォーマット」について説明します。

きちんと対応してゆくことで効率的な画像の配信ができるようになり、Webページの表示時間が短く高速化されます。

目次

  1. 効率的な画像フォーマットとは
  2. 効率的な画像フォーマットでの画像作成方法
  3. 画像の効率化
  4. まとめ

効率的な画像フォーマットとは

「効率的な画像フォーマット」とは何でしょうか。前回説明した「次世代フォーマットでの画像の配信」とは何が違うのでしょうか。「効率的にしてください」との指摘なので、「今は非効率的かも」という事です。

結論を言うと、非効率とは無駄に高画質ということです。あるいは最適なフォーマットを使っていないということです。
Webページを閲覧している人はディスプレイやスマートフォンで見ている人が大半だとおもいます。わざわざ印画紙にプリントする人がいるでしょうか。なのに写真をプリントできるくらいに高画質な画像がいるでしょうか。

あるいは1分近い動画がGIFアニメで出来ていたらどうでしょうか。もっと良いフォーマットがあるのではないでしょうか。

このような場合にPageSpeed Insitesは「非効率な画像」と判断します。具体的にはPageSpeed Insitesでは画像の品質を85に落としたものとWebページの元の画像のサイズを比較し、Webページの元の画像のほうがサイズが大きい場合、「非効率的な画像」と判断します。表示装置がディスプレイの場合、圧縮品質は85もあれば見た目にはほとんど気がつきません(75でも良いとおもいます)。加えて品質が85であれば画像のデータサイズも小さくすることができます。

また画像のサイズについてもWebページの表示幅分の画素数だけあれば十分です。

効率的な画像を作成しWebページを高速化することで、ユーザにストレスを与えないようにしましょう。

↑目次

効率的な画像フォーマットでの画像作成方法

効率的な画像フォーマットで画像を作成するにはどうすれば良いか。いくつか方法はありますが、前回も紹介した画像変更用のWebページを用いるのが簡単です。PCへのインストールも必要ないですし、会社のセキュリティ規約上問題にならないのであれば、前回も述べたSquoosh(スカッシュ)のようなWebサービスを使うのが良いとおもいます。Squoosh(スカッシュ)はGoogleのサイトですが、怪しい中国のサイトとか、中国資本が入っている会社のサイトは、止めておいたほうが無難です(中国の会社では共産党組織である党委員会の設置が当然となっており、党が支援するとなっているため)。

ついでにWebPに変換するのであればGoogleのWebPのコマンドラインツールを用いてbatファイルやスクリプトを使って一括変換するのが楽です。

↑目次

画像の効率化

話が逸れましたが、スマートフォンで撮った画像を加工して最適化してゆきます。

cherry-blossoms-original

フォーマットはPNG、容量は約29Mbyte、解像度3024 x 4032です。容量に影響が一番大きいのはまず解像度です。配信媒体に合わせて適切な解像度に変換します。

例えばこのWebページではトップページ画像のピクセル数は幅を960に合わせています。縦横非はそのままで幅を960に変換します。

change-resolution

容量が 29,863,405⇒2,961,408バイトとほぼ1/10に減りました。でもWebページで配信する分には違いはわからないとおもいます。適切な解像度にすることで画像ファイルの容量を非常に小さくできます。

次に適切な画像フォーマットを適切なものに変換します。風景の写真ですので色数が多くPNGよりJPEGのほうが向いています(一方、色数が少なくべた塗りでグラデーションがない場合はPNGが向いてます)。そのためJPEGに変換します。まずは画質95でJPEGに変換します。

cherry-blossoms-quality-95

容量は 2,961,408⇒756,800とさらに減っています。画像にあった適切なフォーマットを選択するのが重要というのがよくわかるとおもいます。

現在品質を95にしていますがこれを85にします。それが下の画像です。

cherry-blossoms-quality-85

拡大してみても品質95とほとんど変わりません。容量は 756,800⇒487,053と変化しています。

ここまでを表にまとめると以下のようになります。

 

変更点 フォーマット サイズ 容量
元画像 PNG 3024 x 4032 29,863,405
サイズ変更 PNG 960 x 1280 2,961,408
フォーマット変更 品質95 JPEG 960 x 1280 756,800
品質変更 95⇒85 JPEG 960 x 1280 487,053

画像を効率化することで大きく容量が減っています。この減少分がそのままデータ転送量の減少につながります。結果としてWebページの表示を高速化できます。

↑目次

まとめ

画像のフォーマットを最適化することでデータ通信量を大きく減少させ、ページの高速化が可能なことを理解いただけたのではないかと思います。

PageSpeed Insightsで「効率的な画像フォーマット」というメッセージが表示された場合は、ぜひ効率的なフォーマットや画像の最適な品質を考えてWebページの高速化を図ってみてください。

↑目次

この記事へのコメント

コメントはまだありません。

コメントを送る

必須
必須  
※ メールアドレスは公開されません
任意
必須
Loading...  画像の文字を入力してください