Image Optimizer 仕様
1. 基本動作
- サイト内で利用されている画像を自動で圧縮し、また圧縮したファイルをReproが管理するCDN(AWS CloudFront)でホスティングし配信を行います。これにより、サイト読み込みにおける画像データのファイルサイズが削減でき、結果として表示速度の向上が期待できます。
- 本機能を利用することで変わるのはサイトにおける画像の読み込み速度だけであり、サイト自体の機能や振る舞いには一切作用しません。
- 変換後の画像はReproが管理するCDN上で一定期間キャッシュされ、このキャッシュの有効期限が切れた際には再びオリジナルの画像を取得し変換 + キャッシュを行い利用されます。有効期限を確認・変更されたい場合は弊社担当までご連絡ください。
- 画像はフォーマットを変更し圧縮を行うだけで、画像サイズ(ピクセル数)を変更するリサイズ処理やクロップ処理は行われません。
- 変換対象となる画像は対象URLと除外URLによって指定および除外が可能です。また除外URLにマッチする画像についてはオリジナルの画像がそのまま利用されます。
- このときはReproのCDNが利用されることはなく、元の画像が直接そのまま利用される形をとります。
2. 画像フォーマット
- 変換元のファイルは
.jpg
, .jpeg
, .png
を対象とし、変換フォーマットは WebP および AVIF を利用します。
- Booster SDK内の独自のロジックによってブラウザのWebP/AVIFサポート是非を判定し、その結果により利用するフォーマットが決定されます。
- 画像フォーマットの判定にはファイルの拡張子のみを参照します。
.gif
などサポート外の画像フォーマットについては変換を行わず、オリジナルの画像がそのまま利用されます。
- CDNにホストされており、拡張子は
.jpg
だが中身はWebPといったファイルについては変換を行うケースと行わないケースがどちらもあります。
3. CDN上でのキャッシュの振る舞い
- Reproが管理するCDNに変換後の画像をキャッシュするにあたり、キャッシュされるコンテンツについては次のクレンジング処理が実施されます。
- オリジナル画像に付与されている
Set-Cookie
ヘッダの削除
Cache-Control: max-age
ヘッダを付与し、弊社側で指定した任意の有効期限が設定される。またこのとき、指定の値が1時間未満の場合は1時間に上書きする。
Cache-Control: s-maxage
ヘッダを付与し、弊社側で指定した任意の有効期限が 0.9 掛けの値を設定する
Cache-Control: stale-while-revalidate, stale-if-error
ヘッダに弊社側で指定した任意の有効期限の2倍の値を設定する。
Access-Control-Allow-Origin
ヘッダに送信元オリジン(≒サイトのドメイン)を設定する。
- キャッシュを行う際のキーはURLが利用されます。
- キャッシュを行う際のキーとなるURLはクエリパラメータを含み、反対にハッシュは含みません。
4. その他
- URLは固定でありながら、アクセスするブラウザによってコンテンツが異なる画像の場合は、Image Optimizerの変換サーバーが取得したバージョンが他ブラウザにおいても利用されることがあります。
- 次の条件に合致する場合には変換は実施されません。
- 元画像のファイルサイズが10MBを超える
- 元画像の画像サイズが16.8メガピクセルを超える
- また16x16ピクセル以下の画像など、非常に画像サイズが小さく変換する意味がないような場合には変換を行わないことがあります。
- 変換の失敗やオリジンサーバーからのレスポンスが受け取れないなどでエラーとなった場合は、Image Optimizerサーバー上で短期間その結果をキャッシュし、オリジンへの負荷を下げることがあります。
- Image OptimizerサーバーからBooster SDKにコンテンツを返す際のレスポンスがエラーとなった場合(変換の失敗、タイムアウトなど)は、SDKはオリジンサーバーに直接リクエスト(フォールバック)します。