LOG IN SIGN UP
Documentation

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

  Last updated June 29, 2018

Fastly のイメージオプティマイザーを利用するためには、まず営業担当にご連絡ください。その際には、イメージオプティマイザーを有効にするサービス ID を含めてご連絡ください。その後、以下の手順に従ってイメージオプティマイザーの設定を行ってください。

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

該当のサービスへのイメージオプティマイザー機能の有効化が完了したら、以下の Fastly イメージオプティマイザーヘッダーを追加して下さい。

  1. Fastly コントロールパネルにログインし、Configure のリンクをクリックします。
  2. サービスメニューから設定対象のサービスを選択します。
  3. Configuration ボタンをクリックし、Clone active を選択すると設定画面が開きます。
  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 をクリック。

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

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

  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|jpg|jpeg|webp)$" では拡張子に gif、 png、 jpg、 jpeg、 そして webp をもつリクエストがイメージオプティマイザーに送られます。一方 req.url ~ "^/images/" では images ディレクトリ配下のすべてのリクエストがイメージオプティマイザーに送られます。
  4.  Save and apply to ボタンをクリックすると、作成した内容がヘッダーの作成条件として適用されます。

シールディングの有効化

キャッシュミス時の遅延を最低限にし、コネクションを長時間保持するためにオリジンシールディングを有効化する必要があります。シールディング POP はオリジナルの画像を保持するオリジンサーバーと出来るだけ地域的に近い場所を選びましょう。

設定手順の詳細はシールディングを有効化する に記載されていますが、Host ヘッダーがデフォルトのものから変更されている場合、変更後の新しい Hostname がドメイン設定に追加される必要があることに特に注意して下さい。

動作の確認

必要な設定変更を有効化出来たら、 Fastly のイメージオプティマイザーが正しく動作するかを以下のコマンドを利用して確認してください。:

echo -n "Image Width: " ; curl -sI https://www.fastly.io/image.jpg?width=200 | grep "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 コントロールパネルで初期設定の変更

Fastly コントロールパネルで、イメージオプティマイザーの初期設定を容易に確認することができます。また、 Fastly コントロールパネルより設定を変更をすることも可能です。ただし、その他多くの画像変換設定を変更するには、API を利用する必要があります。

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

  1. Fastly コントロールパネルにログインし、Configure のリンクをクリックします。
  2. サービスメニューから設定対象のサービスを選択します。
  3. Configuration ボタンをクリックし、Clone active を選択すると設定画面が開きます。
  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. Resize filter では、 より高い、もしくは低いピクセル数を用いてリサイズや新しい画像を生成する際に用いる画像品質フィルターを選択してください。初期設定では、Fastly は、Lanczos3 フィルターを利用します。Lanczos2BicubicBilinear または、Nearest を選択することもできます。

API を用いた初期設定以外の設定変更

Fastly コントロールパネルでは、画像最適化や変換において最も基本的な設定の変更のみが可能になっています。初期設定以外のより複雑な変更をするためには、既存の画像の URL に Fastly の API クエリパラメーターを追加する必要があります。例えば、既存の画像が、http://www.example.com/image.jpg の場合、Fastly がいくつかの方法で画像変換をするために、適切なクエリストリングとして ?<PARAMETER=VALUE> を追加してください。

お客様のサイトの HTML ソースコードに含まれる既存の URL に対して、1つ以上の Fastly URL API クエリパラメーターを直接追加することもできますし、それらをプログラムから変更することもできます。より詳細の情報は、以下のガイドや 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