Fastly Image Optimizer の使用

Fastly Image Optimizer (Fastly IO) を使用するには、Fastly コンソールで直接プロダクトを有効にするか API を使用してください。有効にすると、Fastly IO はすぐにデフォルト設定に従ってエッジで画像の変換と提供を開始します。デフォルトを設定することで、Fastly による画像の処理方法をさらにカスタマイズできます。画像変換をテストして、画像の URL を変更する前に動作を確認できます。

設定前の注意点

Fastly IO の使用を開始する前に、前提条件と注意事項を必ず確認してください。また、Image Optimizer は Fastly のベータ版プログラムの一環として、当社の SDK を通じて Compute プラットフォーム上で利用可能です。SDK 経由のものも含め、Image Optimizer に送信されるすべてのリクエストは、Image Optimizer プロダクトにおいて課金対象の画像リクエストとしてカウントされます。

Image Optimizer の有効化と無効化

Fastly Image Optimizer はスーパーユーザーまたはエンジニアによって有効化または無効化できます。

警告:サービス上で Fastly IO を有効化または無効化すると、アクティブなサービスバージョンを含むすべてのサービスバージョンに即座に影響します。

Image Optimizer の有効化

注:Fastly のベータ版プログラムの一環として Compute で Image Optimizer を使いたい場合は、サポートにお問い合わせください

以下の手順に従って、Service 設定タブから Fastly IO を有効化してください。

ヒント:プロダクトページまたは API から Fastly IO を有効化することもできます。

  1. Fastly コンソールにログインしてください。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、オプションを選択してアクティブバージョンをクローンします。
  4. [Image Optimizer を有効化する] をクリックします。

  5. 料金設定と購入の詳細をお読みいただき、その後プロンプトに従って請求およびクレジットカード情報を入力してください。

  6. [購入を完了する] をクリックします。

  7. Fastly コンソールから、[フォールバック場所] メニューを使用して、画像が保存されているオリジンに最も近い地理的な場所を選択します。これは、オリジンシールドが有効になっていないオリジンに戻す必要がある Image Optimizer の変換リクエストに対して、最適なシールドの場所を決定するのに役立ちます。

  8. [Image Optimizer を有効化する] をクリックします。

  9. [すべてのバージョンで有効化する] をクリックして、Fastly IO を有効にすることを確認してください。

    ヒント:確認ウィンドウの表示を無効にするには、[今後表示しない] をクリックしてください。

Image Optimizer の無効化

以下の手順に従って、Service 設定タブから Fastly IO を無効化してください。

ヒント:請求ページまたは API から Fastly IO を無効化することもできます。

  1. Fastly コンソールにログインしてください。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、オプションを選択してアクティブバージョンをクローンします。
  4. Image Optimizer をクリックします。

  5. [Image Optimizer を無効化する] をクリックします。

  6. [すべてのバージョンで無効化する] をクリックして、Fastly IO を有効にすることを確認してください。

    ヒント:確認ウィンドウの表示を無効にするには、[今後表示しない] をクリックしてください。

Image Optimizer のテスト

Fastly IO を有効にしたら、テスト URL にクエリ文字列パラメータを追加して画像変換をテストできます。これにより、画像 URL を変更する前に、それらがどのように機能するかを正確に確認できます。

Fastly コンソールで提供されたURLをコピーし、Web ブラウザに貼り付け、適用したい画像変換を適用します。Fastly IO に関するドキュメントには、利用可能な画像変換機能の詳細や URL に追加可能なパターンに加え、各パラメーターおよびその値の説明と活用例が記載されています。

画像のデフォルト設定

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

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

  1. Fastly コンソールにログインしてください。
  2. Home ページから、適切なサービスを選択します。検索ボックスで ID、名称、ドメインによる検索が行えます。
  3. Edit configuration をクリックし、オプションを選択してアクティブバージョンをクローンします。
  4. Image Optimizer をクリックします。

  5. [設定を編集] をクリックします。

  6. [フォールバック場所] セクションで、画像が保存されている元の場所に最も近い地理的な場所をメニューから選択してください。

  7. WebP 設定セクションでは、以下の設定を使用して、Fastly IO による WebP 画像の扱い方をコントロールします。

    • [自動 WebP] フィールドで [Yes] を選択すると、対応するブラウザで画像を WebP 形式に変換します。[No] を選択すると、画像ファイル形式をそのまま使用します。

    • Default WebP (lossy) quality のフィールドに、非可逆ファイル形式画像の圧縮レベルを入力してください。Fastly はデフォルトの品質に 85 を使用しますが、1 から 100 の間の任意の整数を指定できます。

  8. JPEG 設定セクションでは、以下の設定を使用して、Fastly IO による JPEG 画像の処理方法をコントロールします。

    • Default JPEG format のフィールドで、画像配信の際に使用する JPEG の種類を選択してください。デフォルトでは、JPEG の種類に Auto が選択されており、入力と同じ形式で出力された画像が配信されます。Baseline を選択すると、画像は左上から右下に向かって順に表示され、Progressive を選択すると、最初に画質の荒い画像を表示し、画像を読み込みながら徐々に画質を上げて表示されます。

    • デフォルトの JPEG 品質のフィールドに、非可逆ファイル形式の圧縮レベルを入力してください。デフォルトでは圧縮率が 85 と設定されていますが、1 から 100 の間の値を指定することができます。

  9. サイズ変更とスケーリングセクションで、以下の設定を使用して、Fastly IO で画像のサイズとスケーリングの方法を制御します:

    • Resize filter フィールドで、ピクセル数を増減させて画像のリサイズや生成を行う際に用いる画像品質フィルターを選択します。Fastly のデフォルト設定では、Lanczos3 フィルターが選択されています。また、Lanczos2BicubicBilinearNearest も選択できます。

    • Allow upscaling のフィールドは、デフォルト設定のままにするか、または Yes を選択することで、リクエストされたサイズに合わせて元のソースファイルよりも大きなサイズの画像を返すことができます。

  10. GIF から動画へのコンバージョンセクションで、[アニメーション GIF から動画へのコンバージョンを有効にする] フィールドを使用して、アニメーション GIF から動画へのコンバージョン機能を有効にするかどうかを指定します。[Yes] に設定すると、各ビデオフレームが画像最適化リクエストとしてカウントされ、課金されます。

  11. ファイルの種類とルーティング設定を調整するには、 詳細設定メニューをクリックしてください。デフォルトでは、PNG、JPG、JPEG、GIF、WEBP 拡張子を持つすべてのファイルは Fastly IO を介して処理されます。カスタム VCL を使って 処理するファイルタイプを指定する場合は、Advanced を選択してください。

  12. Save をクリックします。

  13. サービスを有効にします。

次のステップ

画像変換に適用できるさまざまなパラメータについては、 Image Optimizer 参考ドキュメント をご覧ください。

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