海外サイト Dev.to で公開された Optimizing images for the web – an in-depth guide より許可をもらい、翻訳転載しています。
最適化されていない画像は、特に初めて読み込むときに、ウェブサイトのパフォーマンスが低下する主な原因のひとつです。解像度と画質によっては、Webサイトの合計サイズの70%以上を画像が占めることもあります。
最適化されていない画像を本番環境でも使用したことで、ウェブサイトの読み込みスピードが大幅に遅くなったということもしばしば。経験の浅いデベロッパーは、あまりこの潜在的な問題を認識していないかもしれません。同じように、画像の最適化に便利なツールや解決アプローチを持ち合わせていないでしょう。
この記事では、Web用に画像を最適化するための便利ツールと解決アプローチをまとめてご紹介します。
コンテンツ目次
- JPG画像ファイルサイズの計算方法
- オンライン画像最適化サービスの利用
- 自動化ソリューション
- 画像読み込みの最適化
- CDNの利用
- 乾いたインクスタイル
- WebP画像形式
- 高ピクセル密度画面（Retinaディスプレイなど）への最適化
- すべてのテクニックを利用した記述サンプル例
JPG画像ファイルサイズの計算方法
非圧縮の画像サイズは、画像の幅pxと高さpxを掛け、RGBカラーシステムの24ビットに相当する「3バイト」を掛けます。さらに1048576 (1024*1024)で割り、最後にバイトからメガバイトに変換することで、手軽に計算することができます。
画像ファイルサイズ = (画像の幅*画像の高さ*3) / 1048576
最近のウェブページの平均サイズは、2〜3MBであると考えると、サイト全体の80%以上のサイズを占める画像を使っていると考えてみましょう。3MBでは、低速のモバイルネットワークでの読み込みに時間がかかるため、ウェブサイトへのトラフィックを失ってしまう恐れがあります。
では、画像のクオリティと解像度を保ちながら、ウェブ用に最適化する6つの方法を詳しく見ていきましょう。
オンライン画像最適化サービスの利用
たとえば、あまり変更することがなく少ない画像ファイルのみの静的Webサイトの場合、たくさんあるオンラインツールのどれかに画像をドラッグアンドドロップするだけで完了です。これらのツールは、どれも独自のアルゴリズムを使用することで画像を圧縮し、シンプルなプロジェクトには十分と言えるでしょう。
- Compressor.io – JPG, PNG, SVG, GIF – 1度に1ファイル
- Squoosh – JPG, PNG, SVG, GIF – 1度に1ファイル
- Optimizilla – JPG and PNG – 1度に20ファイルまで
- TinyPNG – JPG and PNG – 1度に20ファイルまで
- SVGMinify – SVG – 1度に1ファイル
- svgomg – SVG – 1度に1ファイル
自動化ソリューション
たとえば、複数人のチームでより複雑なプロジェクトに取り組んでおり、多くの画像を使用している場合、プロジェクトに追加する画像をそれぞれ最適化するのは、やや面倒になるでしょう。また人為的なミスやエラー、その他の原因によって、一部の画像が最適化されない可能性もあります。
複雑なプロジェクトでは、GulpやWebpack、Parcelなどのビルドシステムを使用するのが一般的と言えます。画像最適化プラグインは比較的手軽にビルド構成に追加でき、すべてのプロセスを自動化できます。
個人的に注目しているプラグインは Imagemin で、CLIまたは他のビルドツールにも簡単に統合できます。
画像読み込みの最適化
画像の解像度を変更せずに圧縮し、画質にあまり影響なくファイルサイズを縮小するイメージ画像の最適化の方法をいくつか検討してみました。画像ファイルを最適化するとファイルサイズはかなり小さくなりますが、複数の最適化された画像（たとえばオンライン市ショップのカタログページetc）を一度に読み込もうとすると、パフォーマンスに悪影響を与える恐れがあります。
遅延読み込み（英: Lazy Loading）
遅延読み込み（以下 Lazy Loading）は必要なアセットのみを読み込むというコンセプトです。現在ユーザーが表示しているビューポート（画面）内にある画像のみが読み込まれます。他の画像に関しては、ユーザーのビューポート内に表示されるまでは読み込まれません。
最近、ブラウザにネイティブLazy Loading が採用されたばかりですが、JavaScript ベースの解決テクニックも数多く利用可能です。
ネイティブ Lazy Loading
<img src="image.jpg" loading="lazy" alt="サンプル画像" />
JavaScriptによる解決テクニック
プログレッシブ画像（英: Progressive Images）
Lazy Loadingはパフォーマンス面では優れた仕事をしてくれますが、ウェブサイトの使いやすさ、UXの観点から見ると、ユーザーが画像読み込み中に空白スペースを見ていることが分かります。特に接続スピードが遅いときは、画像のダウンロードに時間がかかってしまうこともあるでしょう。こんなときは、プログレッシブ画像（英: Progressive Images）の出番です。
基本的にプログレッシブ画像とは、ベストクオリティの画像の読み込みが完了するまで、ぼやけた低いクオリティの画像を表示しておくことを指します。低品質の画像は、高い圧縮率のためファイルサイズもかなり小さくなるため、高速での読み込みが期待できます。必要に応じてさまざまな品質の画像をいくつでも作成することができるので、読み込み端末に合わせた高品質な画像を読み込むことができます。
このテクニックは、ユーザーに読み込みスピードの錯覚を与えます。何かが起こるのを待ちながら空白スペースを見る代わりに、より高品質な画像が徐々に読み込まれていき、鮮明な画像が表示される過程を見ることになるでしょう。
プログレッシブ画像のJavaScriptによる実装はこちらのプラグインがオススメです。 : progressive-image
レスポンシブ画像（英: Responsive Images）
さらに、適切なサイズの画像の仕様にも注意が必要です。
たとえば、デスクトップの最大幅が1920px、同様にタブレット端末が最大1024px、モバイル端末が568pxであるとしましょう。もっとも簡単な解決法は、1920pxの画像を使用してすべてのケースをカバーする方法です。しかしこの場合、低速度回線のスマートフォンユーザーは、大量の画像を読み込むまでに長々と待つ必要があるでしょう。
こんなときは、メディアクエリに応じて picture要素を利用することで、ダウンロードする画像をブラウザに指示することができます。picture要素は、世界中で使用されているブラウザの93%以上でサポートされていますが、img要素がすでに含まれているため、非常にシンプルなファールバックとしても効果的です。
<picture> <source type="image/webp" srcset="image.webp" /> <source srcset="image.jpg" /> <img src="image.jpg" alt="Sample image" /> </picture>
CDNの利用
Cloudinary や Cloudflare などのCDNサービスは、サーバー内で画像の最適化を実行し、最適化された画像をユーザーに提供することができます。WebサイトでCDNを使用している場合は、最適化オプションアセットを検討してみても良いでしょう。これによって画質の最適化について、全く心配する必要がなくなり、すべての最適化はサーバー側で実行されます。あとは、Lazy Laodingまたはプログレッシブ画像を使用して、画像を最適化すれば完了です。
WebP画像形式
WebP画像形式はGoogleが開発したもので、特にWeb用に最適化された画像形式となります。canIuseのデータによると、現在WebP画像形式のブラウザサポート率はおよそ80%と十分です。幸いなことに、picture要素内にimg要素をもった標準のjpg画像に対する、フォールバックを実装するのは簡単です。
<picture> <source type="image/webp" srcset="image.webp" /> <source srcset="image.jpg" /> <img src="image.jpg" alt="サンプル画像" /> </picture>
画像をWebP形式に変換できるオンライン変換ツールは多数ありますが、CDNサービスを利用することでサーバー側でファイル形式の変換を簡単に実行することができます。
高ピクセル密度画面（Retinaディスプレイなど）への最適化
これはパフォーマンスよりもUXの向上に関するテクニックですが、ピクセル密度の高いデバイスを考慮することも重要になります。
たとえば、768x320pxのバナー画像を画面幅768pxで表示するとします。このとき、画面のピクセル密度は2倍となるため、実際のピクセル幅は2 x 768 = 1536pxとなります。基本的に1536pxの画面で768pxの画像を伸縮されているので、Retinaディスプレイなど高ピクセル密度の端末では画像がぼやけてしまいます。
この問題を解決するには、高ピクセル密度の画面に最適化された画像をそれぞれ提供する必要があります。通常の画面サイズの２倍または3倍の解像度の画像を個別に作成し、srcset属性を使用して、高解像度の画像用に2xタグでマークアップ記述しましょう。
<img src="image-1x.jpg" srcset="image-2x.jpg 2x" alt="サンプル画像" />
すべてのテクニックを利用したサンプル例: レスポンシブ・WebP/PNG画像（Retinaディスプレイ対応）
<picture>
<source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 440px)">
<source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 440px)">
<source srcset="./images/webp/hero-image-550-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 767px)">
<source srcset="./images/minified/hero-image-550-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 767px)">
<source srcset="./images/webp/hero-image-420-min.webp 1x, ./images/webp/hero-image-760-min.webp 2x" type="image/webp" media="(max-width: 1023px)">
<source srcset="./images/minified/hero-image-420-min.png 1x, ./images/minified/hero-image-760-min.png 2x" media="(max-width: 1023px)">
<source srcset="./images/webp/hero-image-760-min.webp 1x, ./images/webp/hero-image-960-min.webp 2x" type="image/webp" media="(max-width: 1919px)">
<source srcset="./images/minified/hero-image-760-min.png 1x, ./images/minified/hero-image-960-min.png 2x" media="(max-width: 1919px)">
<source srcset="./images/webp/hero-image-960-min.webp" type="image/webp">
<source srcset="./images/minified/hero-image-960-min.png">
<img src="./images/minified/hero-image-960-min.png" alt="Example">
</picture>
結論、最適化の優先度は？
- 最適化された画像を使用する（自動ビルドツール、オンライン圧縮サービス、またはCDNによる最適化）
- 遅延読み込み（英: Lazy Loading）を使用する（ブラウザ完全対応までは、JSによる解決テクニック）
- 高ピクセル密度（Retina ディスプレイ）用に画像を最適化する
- WebP画像形式を使用する
- プログレッシブ画像を使用する
補足オプション: 可能であれば、CDN経由で画像（およびその他の静的アセット）を提供するのもお忘れなく。
参照元リンク : Optimizing images for the web – an in-depth guide by Adrian Bece – dev.to
