画像のサイズとフォーマット改善の実例
ここでは、とある画像の画像サイズを適切なサイズに変更し、また拡張子を変更すると読み込み速度と容量がどう変わるかをお見せします。
今回検証する現在の画像のサイズ（図2）は、1120px×1196pxのサイズで容量は1.2MB、読み込み速度は969msです。
なお、画像のimgタグが設定されているwidthは560pxとなり、Mac book Proから見るビューでは560px×598pxのフレームサイズになります。ちなみに、モバイルビュー（iPhone）では355px×419pxです。しかし、実際には1120px×1196pxの画像が読み込まれています。つまり、現在の大きな画像を読み込むと読み込み時間、負荷がかかっております。
また図3にある通り、PageSpeed Insightsで確認すると、拡張子の変更、画面外の画像の遅延読み込み、画像サイズ変更の指示がGoogleから指定されています。
では、適切な画像を設定しページスピードを向上させるにはどのようにすればいいでしょうか。まず、Photoshop等でそれぞれのデバイスに合わせたwidthとheightのサイズの画像をいくつか用意し、必要があれば画像品質の設定やロゴのデザインを全ての画像に適応します。そして、保存する際に展開したい拡張子を設定し、ウェブサイトの画像ストレージへ保存していきます。完成した画像のイメージを、場合によっては他部署などの承認プロセスを経て、ウェブサイト上へ展開していきます。
その時にレスポンシブデザインを加えたい場合には、HTMLのimgタグに対し、さまざまな画面サイズに適切な画像サイズを展開するためのsrcset属性を指定します。
ここでは、変更後の容量とスピードの比較を見るために、CDNとして、筆者が所属しているZebrafish Labs, Inc.で提供している、画像最適化のためのプラットフォームimgixを使用します。
今回は、以下の3点について変更します。
- 前の画像のサイズを横1120×縦1196から横560に変更します。縦に関しては横の比率に応じて自動的に変更されるので無視します。
- 拡張子をPNGから次世代画像フォーマットのWebPに変更します。
- レスポンシブデザイン（srcset）を組み込み、さまざまなブラウザサイズに対応できるようにします。
変更した結果、以下のような結果となりました。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| 拡張子 | PNG | WebP |
| 容量 | 1.2MB | 41.4KB |
| 読み込み時間 | 969ms | 152ms |
PageSpeed Insightsで確認したところ、上記で修正を加えた画像周りの訂正指示（Serve images in next-gen formats、Defer offscreen images、Properly size images）が改正後は最適化されたため表示がなくなり、ページ読み込み速度も大幅に改善されました。
今回使用したsrcsetは以下の通りです。srcsetは閲覧デバイスの幅ごとに適切な幅の画像を設定し、自動的にブラウザを判別し適切な画像サイズを展開する仕組みです。これにより、どのデバイスからアクセスしても、最適なサイズの画像が速い速度で表示されます。なお、srcsetの設定を手動で行うのは煩雑に見えるかもしれませんが、imgixではsrcsetを簡易的に記述できるライブラリもあります。
3つ目のDefer Offscreen Imagesとはブラウザの画面領域内に表示されているコンテンツのみをアクセス時に表示させて、画面外の画像はスクロールするタイミングで表示させる手法です。これをLazy Loadingと呼びます。サイトアクセス時には全てのコンテンツを読み込むことはせずに、画面に表示されたコンテンツのみを表示することで速度が速くなりユーザー体験の向上につながります。また不要なデータ容量の圧迫を防ぎサーバーの負荷を抑えることができます。方法はいくつもあるのですが、今回のケースではブラウザネイティブのloading=lazyにより対応しました。
4つ目のEfficiently Encode Imagesとは画像への圧縮をかけ画像表示や画像のダウンロードの速度を改善する手法です。これを対応するにはWebPやAVIFなどの次世代画像フォーマットの使用を推奨します。
CAINZ Reformのサイトで同様にPageSpeed insightsに沿って画像周りを改善していただいたところ、以下の通り改善しました。
| 項目 | 改善前 | 改善後 |
|---|---|---|
| 合計画像容量 | 18.94MB | 2.82MB |
| 合計サイト容量 | 28.66M | 4.93MB |
| 読み込み速度 | 15.60S | 3.98S |
おわりに
ウェブサイトにおける画像は、閲覧者にとって文字ではない視覚的に有益な情報を伝えるとても大事な情報です。そのコンテンツの容量が大きいとページの読み込み速度や閲覧者のユーザー体験に影響を与えてしまいます。今回紹介したような少しの工夫で改善が可能です。改善を簡易に行うためにも、筆者が所属しているimgixのような、サードパーティのプラットフォームもありますのでぜひ色々見てみてください。皆様のウェブサイト改善が本記事により少しでも貢献できますと幸いです。
