Commerce Cloud B2C プラットフォームの埋め込み CDN (eCDN) における Polish および WebP 機能

WebP とは何ですか？
WebP は Web 用の画像形式です。
WebP は、主に 3 種類の画像形式を変換できます。

• JPEG
• GIF
• PNG

Cloudflare eCDN における Polish
Cloudflare には、画像の自動最適化機能があり、画像のサイズを縮小するさまざまな Polish レベルを提供しています。画像を圧縮し、不要なデータを削除することで、ブラウザーへの配信がより速くなります。

Polish は現在、他の形式から変換することで WebP 画像を生成することはできますが、WebP 画像を最適化するために取り込むことはできません。WebP 画像をオリジンサイトに置いても、Polish では何も起こりません。

Polish には、ロスレスおよびロッシーの 2 つのモードがあります。
ロスレス (ビジネスマネージャーでは Polish レベル - ベーシックと呼ばれます)
ロスレスモードでは、JPEG 画像は不要なデータを削除するように最適化されますが、表示される画像は変更されません。
このモードでは GIF および PNG 画像形式は変更されます。

ロッシー (ビジネスマネージャーでは Polish レベル - ベーシック + JPEGと呼ばれます)
ロッシーモードでは、JPEG 画像の品質が低下するため、視覚的な品質が低下し、さらに画像データのサイズを小さくすることができます。

Polish レベルはどこで設定できますか？
Polish の設定はゾーンごとに異なります。設定は以下のとおりです:
[ビジネスマネージャー] | [埋め込み CDN 設定] > [スピード] > [Polish レベル]

特定のホスト名に対してこの機能を有効にするには、ゾーン全体に適用するのではなく、構成ルールを使用します。

1. Polish レベルオフ < 非圧縮
2. Polish レベル - ベーシック
3. Polish レベル - ベーシック + WebP
4. Polish レベル - ベーシック + JPEG
5. Polish レベル - ベーシック + JPEG + WebP

• Polish レベルオフ - 画像の変更は行われません。 圧縮も行われません。
• Polish レベル - ベーシック - 画像ファイルの容量を視覚的な品質に影響を与えることなく削減します。このオプションは、PNG、GIF、JPEG ファイルのメタデータを削除します。また、PNG および GIF ファイルはロスレス圧縮されます。このモードでは、JPEG 画像は不要なデータを削除するように最適化されますが、表示される画像は変更されません。
• Polish レベル - ベーシック + JPEG - ベーシックレベルでのアクションに加え、JPEG 画像のファイルサイズは、画質を低下させるロッシー圧縮を使用して縮小されます。大きな JPEG 画像は、プログレッシブ画像に変換されます (サイト訪問者は、ファイルのダウンロード中に徐々に詳細画像を見ることができます）。この機能は、eCDN を通じて配信される画像 (つまり、Commerce Cloud インスタンスおよび Dynamic Imaging Service [DIS] によって配信される画像) だけに適用されます。サードパーティサイトから取得された画像は変更されません。

Polish レベル - WebP 変換
お客様は、ゾーンの Polish 設定で WebP のボックスにチェックを入れることで、WebP 画像の自動生成を有効にすることができます。このチェックボックスを有効にすると、Polish はこれまで通り画像を最適化するとともに、WebP 画像の変換と配信も行います (WebP 画像は、元の形式よりもデータ量が大幅に少ない場合にのみ配信されます）。

• Polish レベル - ベーシック + WebP - PNG および GIF ファイルは最適化された上で、WebP 形式に変換されます。
• Polish レベル - ベーシック + JPEG + WebP - 画像の圧縮とともに、JPEG 画像は WebP 形式に変換されます。

WebP 形式への画像変換が成功したかどうかを確認するには？
ロッシー WebP 変換が適用された場合、以下のヘッダーが表示されます:

Content-Type: image/webp
Cf-polished: qual=85, origFmt=jpeg, origSize=” (注: cf-polishedは、Polish レベル - ベーシック + JPEG が選択された場合だけ、ヘッダーに追加されます)
Content-Length: 画像圧縮サイズ
「origSize」属性は、アップロードされた画像のサイズを表します。

ロスレス圧縮では、これらのヘッダーは生成されません。

WebP 画像が配信されない場合は、この属性値ペアをヘッダーに追加することができます。 →
Cf-polished: origSize=1163 status=“webp_bigger”
webp_bigger: Polish は WebP への変換を試みましたが、画像はオリジンサーバーで最適化されていたか、低画質設定で生成されていました。

注: WebP への変換は、URL の拡張子が異なる形式を示唆している場合であっても、画像の URL を変更することはありません。たとえば、https://example.com/picture.jpg にある JPEG 画像は、WebP に変換された後も同じ URL を持ちます。HTTP ヘッダーの「Content-Type」は、ブラウザーに画像の実際の形式を知らせます。

ブラウザでヘッダーを確認
[検査] | [Network]
ページをリフレッシュ
画像のヘッダーを確認します。

お客様がもともと WebP 画像をアップロードした場合はどうなるのでしょうか？
Polish は現在、他の形式から変換することで WebP 画像を生成することはできますが、WebP 画像を最適化するために取り込むことはできません。WebP 画像をオリジンサイトに置いても、Polish では何も起こりません。

WebP に変換された画像はすべて配信されていますか？
WebP への変換によって元の画像よりも小さい画像が生成されない場合は、WebP 画像は配信されません。その代わりに、元の画像サイズと形式が考慮されます。
これはヘッダー内の属性値ペアで示されます: cf-polished: origSize=1163 status=“webp_bigger”

オリジンサーバーで低画質の JPEG 画像 (品質設定 60 以下) を提供している場合、WebP への変換は有益ではないかもしれません。低画質の JPEG 画像は、圧縮によるブロック状のエッジやノイズがあるため、WebP 画像のファイルサイズが大きくなるからです。この問題を回避するには、オリジンサーバーで高画質の JPEG 画像 (品質設定 80～90) を提供することをお勧めします。

もし、お客様のオリジンサーバーまたはコンテンツ管理システム (CMS) に埋め込みの画像変換または最適化機能がある場合は、それが Polish 処理に干渉する可能性があります。 ファイルサイズの節約よりも品質の低下の方が大きくなるため、画像にロッシー圧縮による最適化処理を2回行う意味はありません。

追加情報:
お客様のオリジンから画像が取得されると、当社のシステムが自動的に Cloudflare のキャッシュに最適化された画像を保存します。同じ画像に対するその後のリクエストには、より小さく、より高速な最適化されたバージョンの画像が取得され、お客様のウェブサイトの速度向上につながります。

WebP 圧縮は、新しい画像だけにすぐに適用されます。eCDN にキャッシュ済みの画像は、eCDN キャッシュの有効期限が切れてオリジンから再度取得されるときだけ、WebP に変換されます。 

Salesforce B2C Commerce は、eCDN キャッシュを削除しません。これは「重い」処理であり、パフォーマンスに悪影響を及ぼす可能性があるためです。キャッシュ時間は、「静的コンテンツの有効期限 (TTL)」によって制御されます。

WebP 圧縮画像を取得するには、ブラウザーが WebP をサポートしていることと、画像が eCDN レベルでキャッシュされていること (HTTP レスポンスヘッダー cf-cache-status: HIT) が必要です。
URL への最初のリクエストでは、オリジンから画像を取得し、変更せずにクライアントに配信し、eCDN レベルでキャッシュします。クライアントは、2 回目のリクエスト以降、eCDN からキャッシュされた WebP 画像を取得します。