イメージオプティマイザーについて

Fastly のイメージオプティマイザー (Fastly IO) は、画像をリアルタイムで加工・変換し、最適化されたバージョンをキャッシュします。オリジンサーバーから画像がリクエストされると、 Fastly IO は1つまたは複数の変換タスクを実行し、最適化されたバージョンを配信しキャッシュします。例えば、リサイズ画質の調整、クロップトリミングレスポンシブ画像 の配信など、そのほか多数の処理が行えます。

ご利用の前に

Fastly IO の利用をご希望の方は、セールスチームにお問い合わせください。 その際に、イメージオプティマイザーを有効にしたいサービス IDも併せてお伝えください。

オリジンシールドの有効化。 イメージオプティマイザーを利用するサービスではオリジンシールドの有効化が必要です。この設定方法の詳細については、オリジンシールドの有効化 についてご確認ください。

オリジンシールドの設定にあたっては、画像のオリジンにできるだけ近い場所を選択してください。また、ガイドに従ってオリジンシールドを選択した後、Host ヘッダーがデフォルトから変更されている場合、新しいホスト名がドメインリストに追加されていることを確認してください。

イメージオプティマイザーの設定

ご利用のサービスでイメージオプティマイザーを有効化したら、次の手順に従って設定します。

  1. ヘッダーを追加。
  2. リクエストに付与する条件を作成。
  3. 画像をテスト。

Fastly イメージオプティマイザーヘッダーの追加

イメージオプティマイザーがサービス ID 向けに有効化され、有効化の確認メールを受信した後、Fastly イメージオプティマイザーヘッダを追加してサービスを設定してください。

  1. Fastly コントロールパネルにログインします。
  2. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。Content ページが表示されます。
  5. Create header ボタンをクリックしてください。Create a header ページが表示されます。

    the create header window with the image optimization settings

  6. Create a header ウィンドウに以下のように内容を入力してください。
    • Name フィールドに Fastly Image Optimizer を入力します。
    • Type メニューから Request を選択し、Action メニューから Set を選択します。
    • Destination フィールドに http.x-fastly-imageopto-api と入力します。
    • Source フィールドに "fastly" と入力します。Fastly のイメージオプティマイザーは、イメージ API の一部ではない、余分なクエリ文字列パラメーターを取り除くようにデフォルト設定されています。ソースイメージにてオリジンサーバーからの追加クエリ文字列パラメーターの配信が必要な場合は、"fastly; qp=*" と入力してください。
    • Ignore if set メニューから No を選択します。
    • Priority フィールドに 1 を入力します。
  7. Create をクリックして新規ヘッダーを作成します。

リクエストに付与する条件を作成

画像アセットのみが Fastly イメージオプティマイザーで処理されるように、リクエスト条件を作成します。

  1. Fastly Image Optimizer ヘッダーの横にある Attach a condition リンクをクリックします。Add a condition ウィンドウが表示されます。
  2. Create a new request condition ボタンをクリックします。Create a new request condition ウィンドウが表示されます。

    the new request condition window with the image optimization settings

  3. Create a new request condition ウィンドウに以下のように入力してください。
    • Name フィールドに、新しい条件を説明する名前を入力します (例:Fastly Image Optimizer Request Condition)。
    • Apply if フィールドに適切なリクエスト条件を入力します。例えば req.url.ext ~ "(?i)^(gif|png|jpe?g|webp)$" では拡張子が gif、png、jpg、jpeg、webp のファイルを Fastly イメージオプティマイザー経由で送信します。一方 req.url ~ "^/images/"images ディレクトリ配下のすべてのリクエストを Fastly イメージオプティマイザー経由で送信します。
  4. Save and apply to ボタンをクリックすると、ヘッダーの新規条件が作成されます。

動作の確認

設定変更を有効化したら、以下のコマンドをコマンドラインに入力し、イメージのリクエストが Fastly イメージオプティマイザーによって処理されることを確認してください。

echo -n "Image Width: " ; curl -sI https://www.fastly.io/image.jpg?width=200 | grep -i "Fastly-Io-Info:" | cut -d' ' -f6 | cut -d= -f2 | cut -dx -f1

その際、https://www.fastly.io/image.jpg?width=200 をテストしたい画像への完全リンクと幅に置き換えてください。

このコマンドラインの出力で表示される画像の幅は、画像に追加した width API パラメーターと一致しているはずです。例えば、出力は以下のようになります。

Image Width: 200

画像の初期設定

Fastly イメージオプティマイザーは、さまざまな画像形式をサポートし、すべての画像に特定の設定を適用するようにデフォルト設定されています。Fastly コントロールパネルを使用して、必要に応じてデフォルト設定を確認・調整してください。画像変換設定などの画像設定を変更するには、ほとんどの場合 API コールを発行する 必要があります。

the image optimizer default settings

コントロールパネルで初期設定を確認・変更するには、以下の手順に従ってください。

  1. Fastly コントロールパネルにログインします。
  2. All services ページから、該当するサービスを選択します。検索ボックスを使用して ID、名前、またはドメインで検索することができます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Image optimization リンクをクリックしてください。Image Optimizer default settings ページが表示されます。

    the image optimizer default settings

  5. Default settings の横にある鉛筆マークをクリックしてください。Edit default settings ウィンドウが表示されます。

    the image optimizer default settings editing window

  6. Edit default settings を以下のように調整してください。
    • Auto WebP 欄では、デフォルト設定を維持、または WebP 形式をサポートしているブラウザで画像を WebP 形式に変換する場合には Yes を選択してください。デフォルト設定の No を選択した場合、Fastly は元の画像タイプを使用します。
    • Default WebP (lossy) quality フィールドでは、デフォルト設定を維持するか、非可逆形式画像に対する圧縮率を入力してください。Fastly のデフォルト圧縮率は 85と設定されていますが、1 から 100 の間の値を指定することができます。
    • Default JPEG format オプションでは、初期設定を維持するか、画像配信の際に利用する JPEG の種類を選択してください。Fastly のデフォルト JPEG 設定では Auto が選択されており、入力と出力は同じ画像形式が配信されます。Baseline を選択すると、画像は左上から右下に向かって順に表示され、Progressive を選択すると、最初に画質の荒い画像を表示し、画像を読み込みながら徐々に画質を上げて表示されます。
    • Default JPEG quality フィールドでは、デフォルト設定を維持するか、非可逆形式画像に対する圧縮率を入力してください。Fastly のデフォルト圧縮率は 85と設定されていますが、1 から 100 の間の値を指定することができます。
    • Allow upscaling 欄では、デフォルト初期設定を維持するか、Yes を選択することで、リクエストに合わせて元のソースファイルよりも大きなサイズの画像を返すことができるようになります。
  7. Advanced options リンクをクリックします。Resize filter のオプションが表示されます。

    the advanced options of the image optimizer default settings editing window

  8. Advanced options 設定を以下のように調整してください。
    • Enable Animated GIF to Video オプションでは、設定をデフォルトのままにするか、Yes を選択してアニメーション GIF からビデオへの変換機能を有効にします。各ビデオフレームは画像オプティマイザーリクエストとしてカウントおよび課金されます。
    • Resize filter オプションでは、画像のリサイズや生成する際に用いる画像品質フィルター (ピクセル数) を選択してください。Fastly のデフォルト設定では、Lanczos3 フィルターが選択されています。Lanczos2BicubicBilinear または、Nearest を選択することもできます。

詳細画像設定を使用する

Fastly コントロールパネルを使用してより詳細な画像最適化や変換設定を行うには、Fastly API のクエリ文字列パラメーターを追加して、既存の画像 URL を変更する必要があります。例えば、画像ソースが http://www.example.com/image.jpg に存在する場合、URL の末尾に ?<PARAMETER=VALUE> を追加して Fastly がイメージを変換するための適切なクエリ文字列構造を作成する必要があります。

Fastly イメージオプティマイザー API では、利用可能な画像変換機能の詳細や URL に追加可能な API パターンに加え、各パラメーターおよびその値の説明と利用例が記載されています。これらの例では、www.fastly.io/image.jpg の URL に対して変換・最適化を実施しているので、画像 URL の変更を行う前に動作を確認することができます。また、既存の画像 URL に Fastly 画像変換 URL API クエリ文字列パラメーターを追加する前に確認すべき情報が記載されています。

デバッグ

問題が発生した場合は、イメージオプティマイザーのデバッグガイド をご覧ください。

This article describes a product that may use third-party cloud infrastructure to process or store content or requests for content. For more information, see our cloud infrastructure security and compliance program.
Back to Top