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

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

結論を言うと、非効率とは無駄に高画質ということです。あるいは最適なフォーマットを使っていないということです。
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ファイルやスクリプトを使って一括変換するのが楽です。

↑目次

画像の効率化

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

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

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

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

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

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

現在品質を95にしていますがこれを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ページの高速化を図ってみてください。

↑目次