はじめに
Webサイトではたくさん画像を使うケースが多いです。
数MBの画像を多いと反応が遅くなってしまい、利用者がストレスになりやすいです。
レスポンスを早くする案
案1. 事前にデバイスごとでリサイズ
よく想定できる案ではありますが、PC用、Tablet用、スマホ用の画像を用意し、UserAgentを基づいて出しわけをし、
レスポンスを早くなるわけです。
デメリット：
・画像アップロード時に加工する必要があるため、開発・テスト工数増
・フロント側も出しわける処理が必要のため、開発・テスト工数増
・実ファイルは増えるため、Storage量増（料金増）
案2. アクセスする際にデバイスごとでリサイズ
画像アップロード時はリサイズせずに、フロント側からアクセスする際に指定したリサイズを返す
例えばAlibaba OSS、AWS Lambda@Edgeなどのサービスを利用。
案3. 容量が小さい画像形式に統一
同じく、画像アップロード時は加工する必要がありますが、フロント側の出し分け処理は不要です。
Webpはこの有力な選択肢ではあります。
Webpとは
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
出典：https://developers.google.com/speed/webp
元ファイルの30%程度に小さくなります。
変換ツール
JAVAの変換ライブラリ
JAVAでコマンドを呼んで変換してもよいが、ライブラリを使ったらミドルウェア依存しなくなります。
Node.js: webp-converter
以上