3. 画像変換を開始する

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の警告が消えています。このテストは、合格した監査の下に表示されます。

curl コマンドの利用方法

curl を使用して、画像が WebP 形式で返されることを確認することができます。例えば、次のコマンドを使用して、ホームページに表示されるタコスのアイキャッチ画像をテストすることができます。

$ curl -H "Accept: image/webp"  -sIL "https://io.tacolabs.com/assets/tacos.jpeg"

出力には、以下の点が含まれます：

1HTTP/2 200
2content-type: image/webp
3etag: "WHqZW0CnWPW1cFyfGlWyQC8woF5TkQl74iUy3pbO/tM"
4fastly-io-info: ifsz=98106 idim=720x467 ifmt=jpeg ofsz=68308 odim=720x467 ofmt=webp
5fastly-stats: io=1
6server: AmazonS3
7x-amz-id-2: FuW/QQeab7sTkJBKAkfbyWHKkdJv+lmG5ellkXNXpOAsdb3PUcAbrjHWcChFb3idYb3GZds4kEM=
8x-amz-request-id: HWQ30BG0321BZN5K
9via: 1.1 varnish, 1.1 varnish
10cache-control: no-store, max-age=0
11accept-ranges: bytes
12date: Mon, 16 May 2022 21:57:06 GMT
13age: 342556
14x-served-by: cache-mdw17353-MDW, cache-phx12433-PHX
15x-cache: MISS, HIT
16x-cache-hits: 0, 1
17x-timer: S1652738226.434538,VS0,VE2
18vary: Accept
19strict-transport-security: max-age=300
20content-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 による変換処理を試すのに最適な方法です。