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

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

設定前の注意点

Fastly IO の使用を開始する前に、以下のことに留意してください：

• Fastly IO の利用をご希望の場合は、セールスチームにお問い合わせください。 Fastly のイメージオプティマイザーは、デフォルトで無効になっています。sales@fastly.com に問い合わせることで、アカウントで購入することができます。購入後、スーパーユーザーの役割 が割り当てられたユーザーにより、コントロールパネルでサービスを有効にすることができます。これにより月額請求書の変更が発生します。

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

Fastly イメージオプティマイザーの有効化と無効化

Fastly IO は、スーパーユーザーの役割を割り当てられたユーザーがコントロールパネルで直接有効化または無効化することができます。

Fastly イメージオプティマイザーの有効化

サービスで Fastly IO を有効にする方法：

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

Fastly イメージオプティマイザーの無効化

サービスで Fastly IO を無効にする方法：

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

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

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

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

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

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

1. Fastly コントロールパネルにログインします。
2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
3. Edit configuration ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。Domains ページが表示されます。
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. Fastly Image Optimizer ヘッダーの横にある Attach a condition をクリックします。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 イメージオプティマイザーによって処理されることを確認してください。

$ 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 ボタンをクリックし、アクティブなバージョンをクローンするオプションを選択します。Domains ページが表示されます。

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 フィルターが選択されています。Lanczos2、Bicubic、Bilinear または Nearest を選択することもできます。

高度な画像設定

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

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

デバッグ

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

次の内容

実際の Web サイトで Fastly のセットアップの方法を段階的に学べるチュートリアル Fastly イメージオプティマイザーの説明を参考にしながら、Fastly IO をお試しください。これは、Fastly の CDN の紹介で説明した概念をベースに、例として Fastly の CDN の紹介 で使用した静的 Web サイト「Taco Labs」の画像を最適化する手順を説明するものです。