Fastlyの画像最適化

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

Stores > Settings > Configuration > Advanced > System​を選択します。

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

Fastly Configuration > Image Optimization​を選択して、構成設定を指定します。

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

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

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

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

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

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

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

• 既定のJPEG形式コントロール – 既定の設定（Auto）のままにするか、画像の提供時に使用するJPEGの種類を選択します。 値が​ Auto ​に設定されている場合、Fastlyは入力タイプと一致する出力タイプの画像を配信します。 ベースライン​を選択すると、画像が左上から右下に向かって行ごとに表示されます。 プログレッシブ​を選択すると、読み込み時に鮮明になるぼやけた画像が表示されます。

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

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

• フィルター​のサイズ変更 – デフォルト設定（Lancsoz3）のままにするか、代替を選択します。 この設定では、サイズ変更された画像を配信するために使用するフィルターを指定します。 選択したフィルターに応じて、サイズ変更された画像のピクセル数を増減できます。

  • Lanczos3 （デフォルト） – 最高画質の画像を提供します。 画像内のエッジと線形の特徴を検出する能力を高め、可能な限り最良の再構成を提供するために​ sinc ​リサンプリングを使用します。
  • Lanczos2 - Lancsoz3と同じフィルターを使用しますが、sinc​再サンプリング関数の精度が低くなります。
  • Bicubic – 画像を小さくすると、自然なシャープ効果が得られます。
  • Bilinear – 画像を大きくすると、自然なスムージング効果が得られます。
  • Nearest - ピクセルアートのサイズを変更すると、自然なピクセル化効果が得られます。

Fastly サービスのIO設定設定を指定したら、キャンセル​を選択してFastly設定設定に戻ります。

画像の最適化設定​詳細な画像の最適化を有効にする フィールドで、はい​を選択して、詳細な画像の最適化を有効にします。

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

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

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

設定を保存​を選択します。