ドキュメントCommerceクラウドインフラストラクチャー上の Commerce に関するガイド

Fastly 画像の最適化

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 管理者
  • 開発者

Fastly 画像最適化（Fastly IO）は、リアルタイムの画像操作と最適化を提供し、画像配信を高速化し、レスポンシブ web アプリケーションの画像ソースセットのメンテナンスを簡素化します。 設定が完了すると、Fastly IO は次の画像最適化機能を提供します。

  • 非可逆変換を強制
  • 深みのある画像の最適化
  • アダプティブピクセル比
  • 一般的な画像形式（PNG、JPEG、GIF、WebP）のサポート

Fastly IO オプションを有効にして設定する前に、Fastly サービスを設定し、オリジンシールドを設定する必要があります。

設定に基づいて、Fastly 画像最適化（Fastly IO）スニペットは VCL コードを挿入し、画像最適化を実行して、ストアフロントでの製品画像配信を高速化します。 Fastly IO を設定するには、有効化、設定、検証の 3 つのステップがあります。

Fastly IO の有効化

Fastly IO VCL スニペットをアップロードして、管理パネルから Fastly 画像最適化（Fastly IO）を有効にします。 このスニペットは、デフォルトの設定を使用して、画像オプティマイザーを通じてすべての画像を処理する Fastly 設定手順を提供します。

前提条件：

Fastly IO を有効にするには:

  1. ローカルの 管理者パネルに管理者としてログインします。

  2. ストア/設定/設定/詳細/システム を選択します。

  3. 右側のペインで、「フルページキャッシュ」を展開します。

  4. Fastly 設定/画像の最適化 を選択して、設定を指定します。

  5. Fastly IO スニペット フィールドで、「有効/無効」を選択します。

  6. Fastly IO スニペットをアップロードします。

    • デフォルトの IO 設定オプション を選択して、画像の最適化のデフォルト設定オプション ページを開きます。
    • アップロード を選択して、VCL スニペットをサーバにアップロードします。

Fastly IO の設定

必要に応じて、画像の最適化に向けたデフォルトの IO 設定を確認して更新します。 例えば、非可逆フォーマットの WebP とJPEGの画質レベルを変えたり、JPEG画像を提供するフォーマットを プログレッシブ または ベースライン に変えたりする場合があります。 また、Fastly IO を使用して、次のようなより詳細な画像最適化機能を実行できます。

  • 非可逆変換を強制
  • 深みのある画像の最適化
  • アダプティブピクセル比

Fastly IO を更新するには:

  1. Fastly 設定 ページの デフォルトの I/O 設定オプション フィールドで、設定 を選択します。

    Fastly IO 設定を表示

  2. 画像の最適化のデフォルト設定オプション ページで、Fastly IO 設定を確認して更新します。

    Fastly IO 設定の確認

    • 自動 WebP? - デフォルト設定（Yes）のままにして、サポートしているブラウザで画像を WebP 形式に変換します。 設定を いいえ に変更すると、Fastly は画像を WebP 形式に変換する代わりに画像ファイルタイプを使用します。

    • デフォルトの WebP （非可逆）画質 - デフォルト設定（85）のままにするか、非可逆ファイル形式の画像の圧縮レベルを入力します。 1 ～ 100 の任意の整数を指定できます。

    • デフォルトのJPEGフォーマットコントロール - デフォルト設定（Auto）のままにするか、画像を提供する際に使用するJPEGタイプを選択します。 値が 自動 に設定されている場合、Fastly は入力タイプに一致する出力タイプの画像を配信します。 「ベースライン」を選択すると、画像が左上から右下に向かって 1 行ずつ表示されます。 プログレッシブ を選択すると、読み込み時に明確になるぼやけた画像が表示されます。

    • デフォルトのJPEG画質 - デフォルト設定（85）のままにするか、非可逆ファイルフォーマットの画質の圧縮レベルを入力します。 1 から 100 までの任意の整数を指定します。

    • アップスケーリングを許可しますか？ - デフォルト設定（No）のままにするか、「Yes」を選択して元のソースファイルよりも大きい画像を返し、要求されたサイズに合わせることができます。

    • フィルターのサイズ変更 - デフォルト設定（Lancsoz3）のままにするか、別の設定を選択します。 この設定では、サイズ変更された画像を配信するために使用するフィルターを指定します。 選択したフィルターによって、サイズ変更された画像のピクセル数は異なる場合があります。

      • Lanczos3 （デフォルト） – 最高品質の画像を提供します。 これにより、画像内のエッジおよび線形特性の検出機能が向上し、sinc ​リサンプリングを使用して可能な限り最高の再構築を実現できます。
      • Lanczos2 - Lancsoz3 と同じフィルタを使用しますが、sinc ​の再サンプリング関数の近似の精度は低くなります。
      • 「Bicubic」 – 画像を小さくするときに自然なシャープ効果を持ちます。
      • Bilinear - イメージを拡大するときに自然なスムージング効果を持ちます。
      • Nearest - ピクセルアートのサイズを変更するときに自然なピクセル化効果を持ちます。

  3. Fastly サービスの I/O 設定を指定したら、「キャンセル」を選択して Fastly 設定に戻ります。

  4. 「画像の最適化」設定 深い画像の最適化を有効にする フィールドで はい を選択して、深い画像の最適化を有効にします。

    Fastly IO のディープ画像の最適化の有効化

    深い画像の最適化は、デフォルトではオフになっています。 この機能を有効にすると、Adobe Commerceに組み込まれているサイズ変更機能がオフになり、サイズ変更作業が Fastly IO サービスにオフロードされます。 画像の最適化は、製品画像にのみ適用されます。 CMS 画像のサイズは変更されません。 詳しくは、Fastly のドキュメントを参照してください。

  5. 深みのある画像の最適化を有効にしたら、 アダプティブピクセル比機能を有効にして、レスポンシブ web サイトでの使用に最適化された画像を生成できます。

    Fastly I/O 対応ピクセル比の有効化

    • 「アダプティブデバイスのピクセル比を有効化」フィールドで「はい」を選択します。
    • 「デバイスピクセル比」フィールドで、デフォルト設定をそのまま使用するか、「システム入力」チェックボックスをオンにして設定を削除します。 次に、目的の比率を選択します。 デバイスピクセル比の設定を高くすると、画像が大きくなります。

  6. 設定を保存 を選択します。

非可逆変換を強制

デフォルトでは、Fastly IO サービスは PNG、BMP、WEBP などの可逆形式をJPEG/WEBP 形式に強制的に変換します。

非可逆変換を強制的に行う利点は、小さい画像が提供されることです。
例えば、PNG の代わりにJPEGまたは WEBp 形式を使用すると、Fastly IO 設定で指定された品質レベルに応じて、サイズを 60～70% 縮小できます。

画像の最適化に選択した画質レベルによっては、画像の視覚的な違いが認識される場合があります。 例えば、テーマの背景色を使用するディープ画像の最適化を使用しない限り、Alphaのチャンネルや透明度は削除され、白い背景に置き換えられます。

非可逆変換（WebP Auto? = No）をオフにした場合、Fastly IO は互換性のあるブラウザーのJPEGイメージを WEBP 形式に変更するだけです。 他の画像タイプは変更されません。 例えば、元の画像が PNG の場合、Fastly IO サービスからの出力は PNG になります。

深みのある画像の最適化

深い画像の最適化は、デフォルトではオフになっています。 このオプションを有効にすると、組み込みのAdobe Commerceのサイズ変更がオフになり、Fastly IO サービスに完全にオフロードされます。
この機能でサイズを変更できるのは product 画像のみです。 CMS 画像のサイズは変更されません。

深みのある画像の最適化を有効にすると、テーマで定義されたすべての画像に背景色の定義が追加されます。 その結果、WebP 画像は WebP 非可逆から WebP 非可逆に切り替わります。 非可逆と非可逆の大きな違いの 1 つは、PNG 画像からアルファチャネルが非可逆でドロップされ、非常に小さな画像が得られることです。 ただし、異なる背景を使用する製品ページやキャンペーンページでは、透明度のある画像が奇妙に見える場合があります。

例えば、次のコードは、Luma テーマの画像の元のソースを表します。

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/cache/f073062f50e48eb0f0998593e568d857/m/b/mb02-gray-0.jpg"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

Fastly IO ディープ画像最適化機能が有効になっている場合、次の例に示すように、画像の元のソースコードが書き換えられます。

<img class="product-image-photo"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

アダプティブピクセル比

アダプティブピクセル比機能は、プログレッシブ web アプリケーション用の画像を最適化する場合に役立ちます。 各製品画像に srcset を追加することで、1 つの画像ソースファイルから複数の画像サイズと解像度を配信できます。

アダプティブピクセル比機能が有効になっている場合、Fastly IO サービスは、様々な device-pixel-ratios ージに適応可能な固定幅の画像を配信します。
例えば、次の例に示すように、サービスによって製品画像の定義が変更されます。

<img class="product-image-photo"
     srcset="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=2 2x,
  https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=3 3x"
     src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
     width="240"
     height="300"
     alt="Fusion Backpack"/>

srcset ブラウザーのサポートおよび 仕様を参照してください。

Fastly IO の検証

Fastly IO を有効にして設定した後、Fastly IO を有効にした場合と無効にした場合の web ページの速度テストを実行して、設定を検証します。 また、ストア内の画像をレビューして、画像のサイズや外観に問題がないか確認します。

recommendation-more-help
05f2f56e-ac5d-4931-8cdb-764e60e16f26