最近起きた事象を記録しておきます。
CDNの中には、デバイスに合わせて画像を最適化してくれる機能がありますが 使い方を気をつけないと問題が起きることがありました。
今回、はまったのはリサイズ機能。 画像を最適化する方法としては、主に
- 圧縮
- フォーマット変換
- リサイズ
の３つがあると思います。
フォーマット変換はデバイスにあったものをCDN側で自動的に行ってくれるので
デバイスで表示できないフォーマットが返されるなんてことはないと思います。
リサイズも通常は縦横比さえ変わらなければOKと思いがちですが
Webサイトの中で画像の利用方法として
- クリッカブルマップ
- CSSスプライト
のような画像の座標を利用した機能を使うことがあると思います。
これらの場合は、リサイズされてしまうと座標のマッピングがずれてしまい
デザイン崩れや機能しないなどの障害が起きてしまいます。
ですので、リサイズに関しては特に有効・無効は注意して選択する必要があります。