画像コンテンツ配信ネットワーク（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」）を、カスタム ドメインではなく、パーソナライズされたサブドメインとともに使用しています。
画像
Image 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 では、特に次のシグナルを使用して、画像を変換する最適な方法を決定できます。
- クライアントのヒント（ビューポートの幅、DPR、画像の幅など）
Save-Dataヘッダー- User-Agent リクエスト ヘッダー
- Network Information API
たとえば、画像 CDN から Chrome ブラウザに AVIF、Edge ブラウザに WebP、非常に古いブラウザに JPEG が配信される場合があります。自動設定は、画像 CDN の専門知識を活用して画像を最適化できるため、画像 CDN が新しいテクノロジーのサポートを開始したときにコードを変更して新しいテクノロジーを導入する必要がないため、よく利用されています。
画像 CDN の種類
イメージ CDN には、セルフマネージドとサードパーティ マネージドの 2 つの主要なカテゴリがあります。
セルフマネージド イメージ CDN
セルフマネージド CDN は、独自のインフラストラクチャのメンテナンスに問題なく対応できるエンジニアリング スタッフがいるサイトに適しています。
- Thumbor は、最もよく使われているセルフマネージド イメージ CDN です。オープンソースであり、無料で使用できますが、ほとんどの商用 CDN よりも機能が少なく、ドキュメントもやや限られています。Thumbor を使用するサイトには、Wikipedia、Square、99designs などがあります。設定手順については、Thumbor Image 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 候補画像のリソース読み込みフェーズを短縮します。