LOG IN SIGN UP
Documentation

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

  Last updated March 26, 2018

Fastly のイメージオプティマイザーは以下の手順に従って設定を行って下さい。

機能の有効化について

イメージオプティマイザーは有償のオプション機能となっております。利用をご希望の場合、まず弊社日本語営業窓口まで機能を有効化したいサービスの ID をご連絡下さい。担当営業より詳細をご連絡させて頂きます。

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

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

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

    the Content page

  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" を入力。
    • Ignore if set メニューから No を選択。
    • Priority フィールドに 1 を入力。
  7.  Create をクリック。

リクエストでクエリパラメータを利用する場合

Fastly のイメージオプティマイザーはデフォルトではイメージ API に指定されたパラメーター以外のクエリパラメーターをオリジンへのリクエストから取り除きます。オリジンサーバーからオリジナルのイメージを取得する際に、リクエストに付加されたクエリストリングのパラメーターが必要な場合は、上述の Source フィールドに"fastly; qp=*"と入力して下さい。

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

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

  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 がドメイン設定に追加される必要があることに特に注意して下さい。

動作の確認

必要な設定変更を有効化出来たら、以下の cURL コマンドを使って Fastly のイメージオプティマイザーが正しく動作するかを確認することが出来ます:

このコマンドを実行するには ImageMagick がインストールされている必要があります。

curl -o image.jpg http://www.fastly.io/image.jpg?width=200 && convert image.jpg -print "Image Width: %wpx\n" /dev/null

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

このコマンドは画像の横幅(width)を出力します。問題がなければ指定した値が以下のようなフォーマットで出力されます。:

Image Width: 200px

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