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