画像APIを利用することでデータ転送量を節約できます。
例えば1MBの画像を取得するページを1ヶ月に100万回アクセスする場合、【1MB × 100万回 = 100万MB ≒ 1TB】でデータ転送量は約1TBとなります。
画像APIの利用や実装側の工夫で画像サイズを削減し、データ転送量の節約ができます。
今回は以下の方法を紹介します。
- fmパラメータでwebp形式の画像に変換する
-
qパラメータで画像の品質を調整する
-
画像の大きさを小さくする
- 画面幅や解像度に応じて最適な画像を読み込む
-
画像の遅延読み込みをする
- 動画ファイルは埋め込み機能か外部ストレージから配信する
以下の画像をmicroCMSにアップロードし、比較用で利用します。
画像APIの適用方法は以下のドキュメントを参照してください。
https://document.microcms.io/image-api/introduction#h9bc3e5ee9c
1. fmパラメータでwebp形式の画像に変換する
?fm=webpを追加します。
| 画像APIなし | fm=webp | |
| 大きさ | 1920 × 1282 | 1920 × 1282 |
| 画像形式 | jpg | webp |
| サイズ | 1.14MB | 750.41KB |
webp形式は、主要なブラウザ（Chrome、Firefox、Edge、Safariなど）でサポートされていますが、古いバージョンでは表示されないことがあります。
対応ブラウザとバージョン：https://caniuse.com/webp
2. qパラメータで画像の品質を調整する
?q=50のように追加することで品質を調整できます。指定できる値は0~100です。
| 画像APIなし | w=600 | |
| 大きさ | 1920 × 1282 | 600 × 401 |
| 画像形式 | jpg | jpg |
| サイズ | 1.14MB | 76.62KB |
大きさを縮小したことで、画像のサイズは約93%削減しています。
fit=maxでアスペクト比を維持しつつ画像の大きさを制限する
固定値での指定が難しい場合はfit=maxを利用すると、指定した大きさに収まるように画像が自動で調整されます。
詳細はヘルプ記事「アスペクト比を維持しつつ、画像の縦横幅を制限するにはどうしたらよいですか？」を参照してください。
画像APIの各パラメータは、&を使用して組み合わせることができます。
▼ 例
これにより、複数の画像APIが同時に適用されます。
4. 画面幅や解像度に応じて最適な画像を読み込む
<img
srcset='
https://.../sample-image.jpg?w=400 400w,
https://.../sample-image.jpg?w=768 768w,
https://.../sample-image.jpg?w=1024 1024w,
https://.../sample-image.jpg?w=1536 1536w'
sizes='(max-width: 1024px) 100vw, 1024px'
src='https://.../sample-image.jpg?w=1024'
alt=''
/>
w幅記述子を使ったsrcsetでは、ブラウザはデバイスピクセル比（DPR）も考慮して最適な画像を選びます。
例えば、画面幅が768pxのデバイスでこの画像が画面幅100%で表示される場合、通常は幅768pxに最も近い「sample-image.jpg?w=768」が読み込まれます。
しかし、デバイスピクセル比が2のRetinaディスプレイなどでは、768pxの2倍である1536pxに相当する「sample-image.jpg?w=1536」が読み込まれます。
5. 画像の遅延読み込みをする
画像を遅延読み込み（Lazy Loading）することで画像がビューポート外にあるときは読み込みを実行せず、ビューポートに近づいたときに読み込みます。
これにより、ビューポート外の画像の読み込みが発生しないので、無駄なデータ転送を抑えられます。
▼ 実装例
<img src='https://.../sample-image.jpg?w=800' loading='lazy' width='800' height='600' alt=''/>
loading='lazy'を指定する場合はレイアウトシフトを抑制するために、width属性とheight属性の指定が推奨されます。
6. 動画ファイルは埋め込み機能か外部ストレージから配信する
動画ファイルはサイズが大きく、データ転送量も多くなりますので必要な品質に調整した上で、アップロードしてください。
また、YouTubeやVimeoなどの動画プラットフォームにアップロードしてリッチエディタから埋め込むか、外部ストレージサービスを利用して動画を配信することでデータ転送量を節約できます。