イメージオプティマイザー

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

設定前の注意点

Fastly IO の利用をご希望の場合は、セールスチームにお問い合わせください。 その際には、イメージオプティマイザーを有効にするサービス ID をお知らせください。

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

オリジンシールドを設定する際、画像が保存されているオリジンサーバーに地理的にできるだけ近い場所を選択してください。詳細については、オリジンシールドの場所の選択に関するガイドをご覧ください。また、オリジンシールドの場所を選択する際、ガイドに記載されている手順にご注意ください。Host ヘッダーがデフォルトから変更されている場合、新しいホスト名がドメインリストに追加されていることを確認してください。

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

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

  1. ヘッダーの追加
  2. リクエスト条件の作成
  3. 画像のテスト

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

イメージオプティマイザーをサービス ID に対して有効にし、有効化の確認メールを受信した後、Fastly イメージオプティマイザーのヘッダーを追加してサービスを設定します。

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインでの検索が行えます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Content をクリックします。Content ページが表示されます。
  5. Create header ボタンをクリックします。Create a header ページが表示されます。

    画像最適化を設定する「ヘッダーを作成する」ウィンドウ

  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. Attach a condition ヘッダーの横にある Fastly Image Optimizer をクリックします。Add a condition ウィンドウが表示されます。
  2. Create a new request condition ボタンをクリックします。新しいリクエスト条件の作成 ウィンドウが表示されます。

    画像最適化設定での新しいリクエスト条件のウィンドウ

  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 ボタンをクリックすると、作成した内容がヘッダの作成条件として適用されます。
  5. Activate ボタンをクリックして設定変更をデプロイします。

動作の確認

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

1
$ 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 をテストしたい画像への完全なリンクと幅に置き換えてください。

コマンドライン出力には、画像の URL に追加した幅に関するクエリ文字列と一致する画像の幅が表示されます。例えば、出力は以下のようになります。

Image Width: 200

画像のデフォルト設定

Fastly イメージオプティマイザーは、さまざまな画像形式をサポートし、デフォルトですべての画像に特定の設定を適用します。Fastly コントロールパネルを使用して、必要に応じてデフォルト設定を確認・調整してください。ほとんどの画像変革を含む他の画像設定の変更には、クエリ文字列パラメーターを使用する必要があります。

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

  1. Fastly コントロールパネルにログインします。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインでの検索が行えます。
  3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。ドメインページが表示されます。
  4. Image Optimizer をクリックします。Image Optimizer default settings のページが表示されます。

    イメージオプティマイザーのデフォルト設定

  5. Default settings の横にある鉛筆のアイコンをクリックします。Edit default settings ウィンドウが表示されます。

    イメージオプティマイザーのデフォルト設定編集ウィンドウ

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

    イメージオプティマイザーのデフォルト設定編集ウィンドウの詳細オプション

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

高度な画像設定

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

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

デバッグ

問題が発生した場合は、画像最適化のデバッグに関する詳細をご覧ください。

この記事では、コンテンツやリクエストを処理または保存する目的で、サードパーティのクラウドインフラストラクチャを使用する可能性がある製品について説明します。詳細については、クラウドインフラストラクチャのセキュリティとコンプライアンスプログラムをご参照ください。
Back to Top