Image Optimization on Fastly
Fastlyでは、オリジンに設置された画像をクエリパラメータによって最適化し、デバイスやサービスごとに異なるイメージを動的に生成することが可能です。
これにより、煩わしい画像生成及び設置の手間を省くことができます。また、一度最適化された画像は通常のコンテンツ同様にFastlyのPOPサーバ上にキャッシュさせることが可能なため、キャッシュ後は瞬時にクライアントへ画像を提供することができます。
デモ環境
- 下記のURLでGUIから自由にFastlyのImage Optimizationを体験することができます。
https://www.fastly.com/io/
※上記ページで使える機能は一部にすぎません。
サポートされる機能
- サポートされる最適化機能は下記にまとまっていますが、参考までに日本語を下記にまとめます(2017年8月時点)
Image API reference
| Name | Parameter | Notes |
|---|---|---|
| Width | width | 画像の横幅(width)を設定します。 |
| Height | height | 画像の縦幅(height)を設定します。 |
| Pixel Ratio | dpr | 指定されたdpr(Device Pixel Ratio)画像を表示します。 |
| Fit Mode | fit | 指定されたサイズ範囲内で画像がどのように収まるかを設定します。 |
| Crop | crop | 画像から指定ピクセル分を削除します。 |
| Trim | trim | 画像の端から指定ピクセル分を削除します。 |
| Pad | pad | 画像の端に指定ピクセル分を追加します。 |
| Canvas | canvas | 画像のcanvasサイズを大きくします。 |
| Background Color | bg-color | 画像の背景色を設定します。 |
| Orientation | orient | 画像の向きを設定します。 |
| Overlay | overlay | 画像をオーバーレイ表示します。 |
| Overlay Align | overlay-align | オーバーレイ画像の位置を設定します。 |
| Overlay Repeat | overlay-repeat | オーバーレイ画像のリピート方法を設定します。 |
| Overlay Width | overlay-width | オーバレイ画像の横幅(width)を設定します。 |
| Overlay Height | overlay-height | オーバレイ画像の縦幅(height)を設定します。 |
| Overlay Pad | overlay-pad | オーバーレイ画像の端に指定ピクセル分を追加します。 |
| Format | format | 画像の出力形式を設定します。（フォーマット変換） |
| Quality | quality | 不可逆圧縮画像の場合、画像の圧縮レベルを設定します。 |
| Auto | auto | 最適化機能を自動的に有効にします。 |
| Disable | disable | デフォルトで有効になっている機能を無効にします。 |
| Resize Filter | resize-filter | 画像リサイズ時の画素補間フィルタを設定します。 |
画像最適化にあえてFastlyを使うことのメリット
皆さんの会社によっては、既に自社で画像を動的にリサイズするためのマイクロサービスを作って利用しているところも多いと思います。(例、nginx + image_filter_module)
もちろんFastlyはCDNが主軸ですので、
- リサイズした画像をキャッシュ
- リサイズした画像のキャッシュ時間を自由にコントロール可能
- surrogate keysを使うことでキャッシュコンテンツをタグ付けしてカテゴライズすることが可能になり、任意のkeyをもとに特定のタグがついたキャッシュだけを効率よくpurgeすることが可能
など、上記は一部にすぎませんが様々なメリットを受けることが出来ます。
利用に際しての注意事項など
- Image Optimization機能を利用したい場合、事前にSalesへのリクエストが必要です。デフォルトではImage Optimization機能は有効化されておらず使うことはできません。
- Image Optimizationの料金は通常の課金体系と異なります。詳しくは前述へコンタクトして確認が必要です。