すでにご存じかもしれませんが、コンテンツ配信ネットワーク（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 パターンだけで、
次のようにして、他の開発ツールを必要とせずに、アップロードされた単一のファイルを実用的な 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_、short）を使用して、目的の圧縮レベルを手動で指定できます。
「品質」をその後に圧縮レベルの省略形が続きます。
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
こうした情報が手作業で入力されることはめったにありません 完全に自動化された圧縮、エンコード、コンテンツ ネゴシエーションです。
自動圧縮
画像 CDN が自由に使えるコンピューティング能力は、 最適な圧縮レベルとエンコード設定をアルゴリズムによって決定します。 圧縮を微調整します
これらのアルゴリズムは、ファイルサイズと知覚品質のバランスを取りながら、画像の内容を分析して自動的に決定します。 それに応じて圧縮設定を微調整します。これは多くの場合、ファイルが大幅に削減されることを意味します。 圧縮設定の画一的な手動アプローチと比較した場合。
このプロセスは複雑に思えるかもしれませんが、これほど簡単に実装できます。Cloudinary では、q_auto を
画像の URL でこの機能が有効になります。
<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 ヘッダー。このヘッダーは、同じ .tf ファイルを使用して、ブラウザが認識できるエンコーディングを示します。
type の入力に使用するメディアタイプ
<picture> 要素の <source> 属性の 1 つとして存在する必要があります。
たとえば、アセット 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 は一般に 個人利用向けの機能豊富な無料プランを提供。画像アセットの生成には、アップロードや処理のために帯域幅と保存容量が必要 サーバーが画像を変換し、キャッシュされた変換結果用に追加のスペースが必要になります。そのため、高度な用途やトラフィックの多いアプリケーションには有料プランが必要になることがあります。