3. 画像変換を開始する
最終更新日 2022-08-02
このページは、実際の Webサイトに Fastly のイメージオプティマイザー (Fastly IO) を設定する方法を順を追って説明するチュートリアル、Fastly イメージオプティマイザーの説明の一部です。これは、Fastly の CDN の紹介で説明した概念をベースに、例として前述した静的 Web サイト「Taco Labs」の画像を最適化する手順を説明するものです。詳細については、紹介をご覧ください。
Fastly IO が画像とインタラクトする方法は2つあります。一つ目は、Fastly コントロールパネルで指定するデフォルト設定を使用することです。これらの設定は、私たちが作成した Web サイトにあるすべての画像に適用されます。デフォルト設定に加えて、クエリ文字列パラメーターとヘッダーを使用して、個々の画像に追加の変換処理を適用することができます。まず、デフォルト設定を見てみましょう。
Fastly IO のデフォルト動作の概要
Taco Labs で Fastly IO を有効にすると、画像の寸法や視覚的忠実性を変更することなく、画像の配信をインテリジェントに改善するために設計された標準的な変換とフィルターセットを自動的に有効化しました。以下は、Fastly IO のデフォルト動作の主な内容です。
- JPEG と WebP 画像の品質は 85 に設定されています。
- すべてのメタデータ (例:EXIF、XMP、ICC) は削除されます。ソース画像に「向き」のメタデータが含まれている場合、この「向き」が画像データに直接適用されます。
- 画像に ICC プロファイルが含まれている場合、正しい色で出力されるようにデータは画像に直接適用されます。ICC プロファイルが含まれていない場合、デフォルトのプロファイルが追加されます。
Fastly IO のデフォルト動作に関する詳細については、ドキュメントを参照してください。
Fastly IO のデフォルト設定を設定する
この初期段階でも、Fastly IO のデフォルト設定をカスタマイズする方法について考えることができます。何を変更する必要があるか把握するために、Google のPageSpeed Insightsを使用して、Taco Labs の画像に関するパフォーマンス問題を特定します。以下のように、PageSpeed Insights によって Taco Labs の問題がフラグされました。
Fastly コントロールパネルでAuto WebP?のデフォルト設定を変更することで、この問題を解決することができます。まずImage Optimizerをクリックし、Default settingsをクリックします。以下のように、Edit default settings ページが表示されます。
WebP 形式で画像を配信すると、画像のサイズと配信にかかる時間を大幅に削減することができます。Taco Labs のすべての画像を WebP 形式に変換するAuto WebP 機能を有効にすることができます (WebP 形式をサポートするブラウザ)。デフォルトの品質設定 (85
) は、ニーズに最適です。
最後にUpdateボタンをクリックして設定を保存し、Activateボタンをクリックしてサービス設定を有効化します。これで完了です。パージする必要もありません。
Taco Labs で画像を確認する
次に、Fastly IO が機能しているかどうか確認してみましょう。PageSpeed を使用する方法と、curl を使用する方法の2つがあります。ここでは、すべての画像が WebP 形式で配信されていることを確認します。
PageSpeed Insights を使用する
まずPageSpeed Insightsを使用して、画像形式の問題が解決されているかどうかを確認します。PageSpeed Insights のレポートを更新すると、Serve images in next-gen formatsの警告が消えています。このテストは、合格した監査の下に表示されます。
注意
PageSpeed Insights がサイトの結果を更新するのに時間がかかる場合があります。問題が発生した場合、ファイル名を URL (例: https://io.fastly.com/index.html
) に追加し、テストを再度実行してください。
curl コマンドの利用方法
curl を使用して、画像が WebP 形式で返されることを確認することができます。例えば、次のコマンドを使用して、ホームページに表示されるタコスのアイキャッチ画像をテストすることができます。
$ curl -H "Accept: image/webp" -sIL "https://io.tacolabs.com/assets/tacos.jpeg"
出力には、以下の点が含まれます:
1HTTP/2 2002content-type: image/webp3etag: "WHqZW0CnWPW1cFyfGlWyQC8woF5TkQl74iUy3pbO/tM"4fastly-io-info: ifsz=98106 idim=720x467 ifmt=jpeg ofsz=68308 odim=720x467 ofmt=webp5fastly-stats: io=16server: AmazonS37x-amz-id-2: FuW/QQeab7sTkJBKAkfbyWHKkdJv+lmG5ellkXNXpOAsdb3PUcAbrjHWcChFb3idYb3GZds4kEM=8x-amz-request-id: HWQ30BG0321BZN5K9via: 1.1 varnish, 1.1 varnish10cache-control: no-store, max-age=011accept-ranges: bytes12date: Mon, 16 May 2022 21:57:06 GMT13age: 34255614x-served-by: cache-mdw17353-MDW, cache-phx12433-PHX15x-cache: MISS, HIT16x-cache-hits: 0, 117x-timer: S1652738226.434538,VS0,VE218vary: Accept19strict-transport-security: max-age=30020content-length: 68308
Fastly IO ヘッダーを確認する
レスポンス内のヘッダーを確認することで、何が起きているのかを詳細に把握することができます。curl 出力を見ると、2行目でcontent-type
ヘッダーがimage/webp
に設定されていることがわかります。Fastly IO が機能しています。JPEG 画像は、WebP 形式に変換されました。
出力に存在する他の2つのヘッダーに注意を払う必要があります。ひとつ目は、fastly-stats
です。このヘッダーは、レスポンスが Fastly IO によって変換されたために追加されたものです。
次に、fastly-io-info
ヘッダーは、Fastly IO で適用された変換処理に関する情報を提供します。詳細には、入力の形式 (ifmt
)、寸法 (idim
)、バイトサイズ (ifsz
) に加え、出力の形式 (ofmt
)、寸法 (odim
)、バイトサイズ (ofsz
) も含まれます。
現時点ではすべてが正常に機能していますが、リクエストでエラーがある場合、レスポンスに fastly-io-warning
または fastly-io-error
ヘッダーが表示されます。
クエリ文字列パラメーターを試す
Fastly IO のデフォルト設定を調整したところで、次はクエリ文字列パラメーターを見てみましょう。これらを使用して、Fastly IO の最も強力な機能をフルに活用できるようになります。前述のとおり、クエリ文字列パラメーターは以下のように画像パスの末尾に追加されます。
image.png?width=200
Fastly IO では、数十ものクエリ文字列パラメーターをご利用いただけます。利用可能なクエリ文字列パラメータの完全なリストは、developer.fastly.comで確認することができます。一枚の画像にひとつまたは複数の変換処理の適用や、ウェブサイトやアプリケーションで条件付きロジックを活用して、複数の画像に変換処理を適用することができます。
次のセクションでコードベースについて学ぶ前に、変換を試すために時間をとってください。これを行うには2つの方法があります。Fastly Web サイトでインタラクティブなサンプルを使用するか、Web ブラウザーのアドレスバーに画像パスを入力し、画像パスの末尾にクエリ文字列パラメータを追加して、変換内容を確認することができます。
インタラクティブなサンプルを使用する
Fastly Web サイトにはインタラクティブなサンプルがあるので、Fastly IO による変換処理を試すことができます。変換処理をリアルタイムで実行及び調整し、現実のシナリオで画像がどのように変換されるかをイメージすることができます。
インタラクティブな例ですべての変換が利用可能であるわけではありませんが、Fastly IO の仕組みについても理解するのに最適な方法です。
Web ブラウザーを使用する
Web ブラウザーを使用して、クエリ文字列パラメータを手動でテストすることができます。まず、Taco Labs Web サイトからソース画像を読み込むことから始めましょう:
https://io.tacolabs.com/assets/beef-soft-tacos.jpg
そのアドレスを Web ブラウザーのアドレスバーに貼り付けると、下記に示すように、5,858×3,905 ピクセルでフルサイズの画像が表示されます。
Fastly IO で画像をリサイズする方法を試してみましょう。width
クエリ文字列パラメーターを追加して、画像の高さに比例して画像をリサイズすることができます。
https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=500
以下のように、Fastly IO によって画像が 500 ピクセルの幅にリサイズされたことが分かります。
幅の変換に加えて、別の変換処理を適用することができます。orient
のクエリ文字列パラメーターを使用して、画像を水平方向に反転させてみましょう。
https://io.tacolabs.com/assets/beef-soft-tacos.jpg?width=500&orient=h
以下のように、Fastly IO によって画像が水平方向に反転しました。
Web ブラウザーを使用してクエリ文字列パラメーターをさらにお試しください。これは、本番環境に実装する前に Fastly IO による変換処理を試すのに最適な方法です。