画像コンテンツ配信ネットワーク（CDN）は、ウェブ用に画像を最適化するのに優れています。ウェブサイトを画像 CDN に切り替えると、画像ファイル サイズを 40 ～ 80% 削減できます。ほとんどの場合、ビルド時の画像最適化スクリプトよりも画像を最適化できます。
画像 CDN とは
画像 CDN は、画像の変換、最適化、配信に特化しています。また、サイトで使用されている画像にアクセスして操作するための API と考えることもできます。画像 CDN から読み込まれた画像の場合、画像 URL は、読み込む画像だけでなく、サイズ、形式、品質などのパラメータも示します。これにより、さまざまなユースケースに対応する画像のバリエーションを作成できます。
画像 CDN は、必要に応じて新しいバージョンの画像を作成するという点で、ビルド時の画像最適化スクリプトとは異なります。そのため、一般的に CDN は、ビルド スクリプトよりも、個々のクライアント向けに高度にカスタマイズされたイメージを作成するのに適しています。
画像 CDN が URL を使用して最適化オプションを指定する方法
画像 CDN で使用される画像 URL は、画像に関する重要な情報と、画像に適用する必要がある変換と最適化を伝えます。URL の形式は、使用している画像 CDN によって異なりますが、大まかに言えば、すべて同様の機能を備えています。一般的な機能は次のとおりです。
出発地
画像 CDN は、独自のドメインまたは画像 CDN のドメインに配置できます。サードパーティの画像 CDN では通常、カスタム ドメインを有料で使用するオプションが用意されています。独自のドメインを使用すると、URL の変更が不要になるため、後で画像 CDN を簡単に切り替えることができます。
上記の例では、カスタム ドメインではなく、パーソナライズされたサブドメインを持つ画像 CDN のドメイン（「example-cdn.com」）を使用しています。
画像
通常、画像 CDN は、必要に応じて既存の場所から画像を自動的に取得するように構成できます。この機能は、画像 CDN によって生成された画像の URL に既存の画像の完全な URL を含めることで実現されることがよくあります。たとえば、https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto のような URL が表示されることがあります。この URL は、https://flowers.com/daisy.jpg に存在する画像を取得して最適化します。
リクエストされたファイル形式（この例では JPG）は、返された画像ファイル形式（この例では WebP）と同じでない場合があります。content-type HTTP ヘッダーは、URL の形式をブラウザに通知し、ブラウザが URL を適切に処理できるようにします。ファイルがディスクに保存され、ファイル拡張子と一致する形式を想定している別のプログラムで使用されると、混乱を招く可能性があります。
画像 CDN に画像をアップロードするもう 1 つの広くサポートされている方法は、HTTP POST リクエストで画像 CDN の API に画像を送信することです。
セキュリティ キー
セキュリティ キーを使用すると、他のユーザーがイメージの新しいバージョンを作成できなくなります。この機能を有効にすると、イメージの新しいバージョンごとに一意のセキュリティ キーが必要になります。
画像 URL のパラメータを変更しようとしても、有効なセキュリティ キーが指定されていない場合は、新しいバージョンを作成できません。セキュリティ キーの生成と追跡の詳細は、画像 CDN が処理します。
変換
画像 CDN では、数十、場合によっては数百の異なる画像変換が提供されます。これらの変換は URL 文字列で指定します。複数の変換を同時に使用することに制限はありません。ウェブのパフォーマンスにとって最も重要な画像変換は、サイズ、ピクセル密度、形式、圧縮です。これらの変換により、画像 CDN に切り替えると、通常はサイトの画像ファイルが小さくなります。
通常、パフォーマンス変換には客観的に最適な設定があるため、一部の画像 CDN では、これらの変換の「自動」モードがサポートされています。たとえば、画像を WebP 形式に変換するように指定する代わりに、CDN が最適な形式を自動的に選択して提供するようにできます。画像 CDN は、次のシグナルなどを使用して、画像を変換する最適な方法を決定できます。
- Client hints（ビューポートの幅、DPR、画像の幅など）
Save-Dataヘッダー- ユーザー エージェント リクエスト ヘッダー
- Network Information API
たとえば、画像 CDN は、Chrome ブラウザには AVIF、Edge ブラウザには WebP、非常に古いブラウザには JPEG を提供する場合があります。自動設定は、画像 CDN が新しいテクノロジーのサポートを開始したときに、コードを変更して新しいテクノロジーを採用する必要なく、画像 CDN の画像最適化に関する専門知識を活用できるため、人気があります。
画像 CDN の種類
画像 CDN には、セルフマネージドとサードパーティ マネージドの 2 つの主要なカテゴリがあります。
セルフマネージド画像 CDN
セルフマネージド CDN は、独自のインフラストラクチャを維持管理できるエンジニアリング スタッフがいるサイトに適しています。
- Thumbor は、最も人気のあるセルフマネージド画像 CDN です。オープンソースで無料で使用できますが、ほとんどの商用 CDN よりも機能が少なく、ドキュメントも限られています。thumbor を使用しているサイトには、Wikipedia、Square、99designs などがあります。設定手順については、Thumbor 画像 CDN のインストール方法をご覧ください。
- 空想的
- Imagor
サードパーティの画像 CDN
サードパーティの画像 CDN は、画像 CDN をサービスとして提供します。クラウド プロバイダがサーバーなどのインフラストラクチャを有料で提供するのと同様に、画像 CDN は画像の最適化と配信を有料で提供します。サードパーティの画像 CDN は基盤となるテクノロジーを維持しているため、通常はすぐに使用を開始できます。ただし、大規模なサイトの完全な移行には時間がかかることがあります。サードパーティの画像 CDN の料金は通常、使用量階層に基づいて設定されます。ほとんどの画像 CDN には、無料枠または無料トライアルが用意されており、プロダクトを試すことができます。
画像 CDN を選択する
画像 CDN には、優れたオプションが多数あります。機能の数はツールによって異なりますが、どのツールでも画像のバイト数を削減できるため、ページの読み込みを高速化できます。画像 CDN を選択する際に考慮すべきその他の要素は、機能セットのほかに、費用、サポート、ドキュメント、設定や移行の容易さなどです。
Largest Contentful Paint（LCP）への影響
画像は多くのウェブサイトでユーザー エクスペリエンスの重要な部分を占めるため、サイトの Largest Contentful Paint の重要な要素となります。画像 CDN を使用する場合の注意点は次のとおりです。
- CDN から配信される画像はクロスオリジン サーバーから取得されることがあり、サイトの接続設定時間が長くなる可能性があります。可能であれば、プライマリ オリジンをプロキシする画像 CDN を使用して、ブラウザが接続するオリジンを追加しないようにしてください。これは、プライマリ オリジンで画像をセルフホストするのと同じ効果があります。
- LCP 画像要素で
fetchpriority属性値"high"を使用して、ブラウザがその画像の読み込みをできるだけ早く開始できるようにすることを検討してください。 - 最初の HTML で画像がすぐに検出されない場合は、LCP 候補画像に
rel=preloadヒントを使用して、ブラウザがその画像を事前に読み込めるようにすることを検討してください。 - オリジンを介してプロキシできず、ページの読み込みが完了するまでブラウザが読み込む画像を認識できない場合は、クロスオリジン画像 CDN への接続をできるだけ早く設定して、LCP 候補となる可能性のある画像のリソース読み込みフェーズを短縮します。