画像 CDN を使用する理由
画像コンテンツ配信ネットワーク（CDN）は画像の最適化に優れています。画像 CDN に切り替えると、画像ファイルのサイズを 40 ～ 80% 削減できます。理論的には、ビルド スクリプトのみを使用して同じ結果を得ることは可能ですが、実際にはまれです。
画像 CDN とは
Image 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 に存在する画像を取得して最適化します。
画像 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、WebP をエッジブラウザに、JPEG を非常に古いブラウザに配信している場合があります。自動設定は、画像 CDN の高度な専門知識を活用して画像を最適化できるため、よく利用されています。画像 CDN でサポートされれば、コードを変更して新しいテクノロジーを導入する必要はありません。
画像 CDN の種類
イメージ CDN は、セルフマネージドとサードパーティ マネージドの 2 つのカテゴリに分類できます。
セルフマネージド イメージ CDN
セルフマネージド CDN は、独自のインフラストラクチャのメンテナンスに問題なく対応できるエンジニアリング スタッフがいるサイトに適しています。
- Thumbor は、最もよく使われているセルフマネージド イメージ CDN です。オープンソースで無料で使用できますが、一般的にほとんどの商用 CDN よりも機能が少なく、ドキュメントもやや限られています。Wikipedia、Square、99designs は Thumbor を使用している 3 つのサイトです。設定手順については、Thumbor image CDN をインストールする方法をご覧ください。
- 空想的
- Imagor
サードパーティの画像 CDN
サードパーティの画像 CDN は画像 CDN をサービスとして提供します。クラウド プロバイダがサーバーやその他のインフラストラクチャを有料で提供するように、画像 CDN は画像の最適化と配信を有料で提供します。サードパーティのイメージ CDN では基盤となるテクノロジーが維持されるため、利用開始は非常に簡単で、通常は 10 ～ 15 分で完了しますが、大規模なサイトの移行を完了するには、はるかに長い時間がかかります。サードパーティの画像 CDN は通常、使用量ティアに基づいて課金されます。ほとんどの画像 CDN は、自社サービスを試用できるように無料枠または無料トライアルを提供しています。
イメージ CDN の選択
画像 CDN には優れたオプションが数多くあります。一部の機能は他の機能よりも優れていますが、どの機能も画像にかかるデータ量を削減でき、ページの読み込み速度を上げるのに役立ちます。イメージ CDN を選択する際に考慮すべきその他の要素は、機能セットのほかにも、費用、サポート、ドキュメント、設定や移行の容易さです。
実際に試してみてから決めるのも効果的です。以下の Codelab に、複数の画像 CDN を簡単に使い始める手順が記載されています。
Largest Contentful Paint（LCP）への影響
画像は、多くのウェブサイトでユーザー エクスペリエンスに不可欠な要素であるため、Largest Contentful Paint に関しては、サイトがどの程度適切に機能しているかを左右します。画像 CDN を使用する場合は、次の点に注意してください。
- CDN から配信される画像はクロスオリジン サーバーから配信されるため、接続のセットアップ時間が余分に発生します。可能であれば、ブラウザが接続するオリジンを追加しないように、メインの送信元をプロキシする画像 CDN を使用するようにしてください。これは、メインのオリジンで画像を自己ホストする場合と同じ効果があります。
- LCP 画像要素で
fetchpriority属性の値を"high"にして、ブラウザで画像の読み込みをできるだけ早く開始できるようにすることを検討してください。 - 画像が最初の HTML ですぐに見つからない場合は、LCP 候補画像に
rel=preloadヒントを使用して、ブラウザがその画像を前もって読み込めるようにすることを検討してください。 - オリジンを介したプロキシが不可能で、読み込まれる正確な画像がページの読み込み中まで不明な場合は、クロスオリジン画像 CDN への接続をできるだけ早く設定して、ページの LCP 候補画像となるリソースの読み込みフェーズを短縮する必要があります。
Image CDN は、手動で画像を最適化するトイルを排除する必須ツールであるため、検討する必要があります。ただし、常に考慮すべきトレードオフがあります。ウェブサイトの LCP 候補画像を常に確認し、必要に応じてヒントを追加することで、これらの重要なリクエストへの追加のレイテンシを軽減できます。