Shogo SENSUI (shogosensui.com)

画像の存在

• 写真・ロゴ・アイコンなど、プラットフォームを問わず至る所で使われている
• 印象的な画像はユーザーの目を引き、時に重要な情報を伝える
• 画像はサービスにとって重要な存在 である

少し噛み砕いてみる

• RGB の表現系からなる画素の集合 (=ビットマップ) であるラスタ形式やベクタ形式
• よく使われる画像フォーマットは、PNG・JPEG・GIF・WebP・AVIF・SVG
• それぞれ特徴があるが、基本的にはラスターやベクターのデータを圧縮したもの

PNG (image/png)

• フルカラーに加えてアルファチャネルを表現できる
• 通常の 24bit に加えて 8bit モードが存在
• 可逆圧縮

JPEG (image/jpeg)

• フルカラーを表現できる
• プログレッシブ or ベースライン
• 非可逆圧縮

GIF (image/gif)

• 256色を表現かつ特定色を透過できる
• アニメーション可能

WebP (image/webp)

• WebM という動画圧縮コーデックの基礎
• フルカラーに加えてアルファチャネルを表現できる
• 可逆圧縮と非可逆圧縮をサポート
• アニメーション可能

AVIF (image/avif)

• AV1 という動画圧縮コーデックの基礎
• フルカラーに加えてアルファチャネルを表現できる
• 可逆圧縮と非可逆圧縮をサポート
• アニメーション可能

SVG (image/svg+xml)

• パスを表現できるベクター形式の画像
• XML でありテキストデータ

画像のファイルサイズの影響

• インターネットの帯域に加えて、端末のストレージやメモリ消費に影響する
• こと Web においては、帯域の 80% を画像データが占めている
• 同等の表現ができれば、軽いほど良い

画像の圧縮率とファイルサイズの関係

• ファイルサイズは 縦横サイズより適切な圧縮 (=最適化) に左右される
• 最適化された上であれば、縦横サイズが小さい方がファイルサイズは小さい

画像を適切に扱う心構え

• 開発者が適切な画像形式を選択し最適化するのは前提であり最低条件
• プロダクトがユーザーに強いるのは非現実的である
  • PNG の写真をサーバーに送信されても文句は言えない
• 故に アプリケーション側で吸収する必要がある
  • アップロードやダウンロード時に PNG を JPEG に変換する等

画像最適化ツール

• Squoosh: PNG / JPEG / WebP / AVIF を相互変換し、最適化する
• ImageOptim: JPEG / PNG / GIF を最適化する
• ImageAlpha: PNG を 8bit へダウンコンバートする
• (archived) WebPonize: JPEG / PNG を WebP に変換する