コンテンツ配信ネットワーク（CDN）の中心的なコンセプトはおなじみのものでしょう。CDN は、分散されていて相互接続されたサーバーのネットワークであり、アセットを迅速かつ効率的にユーザーに配信します。ファイルが CDN プロバイダにアップロードされると、世界中の CDN ネットワークの他のノードに複製が作成されます。ユーザーがファイルをリクエストすると、そのユーザーに地理的に最も近いノードからデータが送信され、レイテンシが短縮されます。CDN の分散性は、ネットワークの停止やハードウェア障害が発生した場合の冗長性と、トラフィックの急増を軽減するロード バランシングも提供します。
画像 CDN はこれらのメリットをすべて提供できますが、重要な違いが 1 つあります。それは、画像へのアクセスに使用される URL の文字列に基づいて、画像コンテンツを変換して最適化できることです。
ユーザーが正規の高解像度画像をプロバイダにアップロードすると、その画像へのアクセスに使用する URL が生成されます。
https://res.cloudinary.com/demo/image/upload/sample.jpg
使用される正確な構文はプロバイダによって異なりますが、少なくとも、すべての画像 CDN でソース画像のサイズ、エンコード、圧縮設定を変更できます。たとえば、Cloudinary は、次の構文を使用して、アップロードされた画像の動的サイズ変更を実行します。h_、次にピクセル単位の高さの数値、w_ の後に、幅、画像の拡大縮小や切り取り方法に関する詳細情報を指定できる c_ 値の構文を使用します。
URL のファイル名と拡張子の前にカンマ区切り値を追加することで、任意の数の変換を適用できます。つまり、アップロードした画像は、リクエスト元の img 要素の src を通じて必要に応じて操作できます。
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
これらの変換を含む URL にユーザーが初めてアクセスすると、幅 400 ピクセル（w_400）に比例してスケーリングされた新しいバージョンの画像が生成され、送信されます。新しく作成されたファイルは、CDN 全体でキャッシュに保存されるため、オンデマンドで再作成するのではなく、同じ URL をリクエストするすべてのユーザーに送信できます。
画像 CDN プロバイダが、さまざまなテクノロジー スタックとの高度な使用や統合を容易にするソフトウェア開発キットを提供することは珍しくありませんが、この予測可能な URL パターンを使用するだけで、他の開発ツールを必要とせずに、アップロードされた 1 つのファイルを有効な srcset 属性に簡単に変換できます。
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
従来の構文 q_ を使用して、必要な圧縮レベルを手動で指定できます。「quality」は「quality」の略で、その後に圧縮レベルの省略形が続きます。
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
ただし、ほとんどの画像 CDN には非常に強力な機能（完全自動の圧縮、エンコード、コンテンツ ネゴシエーション）が用意されているため、この情報を手動で含める必要はほとんどありません。
自動圧縮
画像 CDN は、非常に強力な処理能力を備えています。画像コンテンツを分析して理想的な圧縮レベルとエンコード設定をアルゴリズムによって決定し、お客様または私が画像ごとに手動で圧縮を微調整するのと同じことです。
これらのアルゴリズムは、ファイルサイズと画質のバランスをとる決定を自動化し、画像コンテンツを分析して品質低下の測定可能な兆候を確認し、それに応じて圧縮設定を微調整します。これにより、画一的な手動圧縮設定と比較して、ファイルサイズを大幅に削減できることがよくあります。
この処理は複雑に思えるかもしれませんが、実装はとても簡単です。Cloudinary では、画像 URL に q_auto を追加するとこの機能が有効になります。
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
自動エンコードとコンテンツ ネゴシエーション
画像 CDN は、画像のリクエストを受信すると、アセットのリクエストとともにブラウザから送信された HTTP ヘッダー（具体的には Accept ヘッダー）を介して、ブラウザがサポートする最新のエンコードを決定します。このヘッダーは、<picture> 要素の <source> の type 属性の入力に使用するのと同じメディアタイプを使用して、ブラウザが理解できるエンコードを示します。
たとえば、アセット URL の画像変換リストに f_auto パラメータを追加すると、ブラウザが認識できる最も効率的なエンコードを行うように Cloudinary に明示的に指示されます。
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
次に、サーバーはそのエンコードで画像のバージョンを生成し、同じレベルのブラウザ サポートを使用して、後続のすべてのユーザーのために結果をキャッシュに保存します。このレスポンスには Content-Type ヘッダーが含まれ、ファイル拡張子に関係なく、ファイルのエンコードをブラウザに明示的に通知します。最新のブラウザを使用しているユーザーが末尾が .jpg のファイルをリクエストしても、そのリクエストには AVIF がサポートされていることをサーバーに通知するヘッダーが伴い、サーバーは AVIF エンコード ファイルと AVIF として扱うための明示的な指示を送信します。
その結果、交互にエンコードされたファイルを作成したり、圧縮設定を手動で微調整したり（または、これらのタスクを行うシステムを維持したりする）必要がなくなり、<picture> 属性と type 属性を使用してユーザーに効果的にファイルを配信する必要がなくなります。したがって、srcset 構文と sizes 構文のみを使用して、たとえば AVIF としてエンコードされた画像をユーザーに提供できます。これにより、WebP（または Safari のみの場合は JPEG-2000）にフォールバックし、最も有用な以前のエンコードにフォールバックできます。
イメージ CDN を使用するデメリットは、技術的なものというよりロジスティックな点で、特にコストが高くなります。画像 CDN は、個人使用向けの機能豊富な無料プランを提供するのが一般的ですが、画像アセットを生成するには、アップロード用の帯域幅と保存容量、画像を変換するためのサーバーでの処理、キャッシュに保存された変換結果用の追加のスペースが必要です。そのため、高度な使用や高トラフィック アプリケーションには有料プランが必要になる場合があります。