Web用の画像形式に迷った時の対応例

画像の実装までに行う事

前提

ポジション

• フロントエンエンジニア
• コーダー
• エンジニア
• デザイナー

モデルケース

• デザイナーからデザインを受け取った時
  • スライスや書き出しの時、画像形式はどうしたら良いのか迷う

各画像形式の概要 振り分けの考え方

jpg

• 写真
• 圧縮効率が良い

png

• 透明の表現が可能
• 綺麗
• 小さくないイラスト

SVG

• アイコン
• シンプルなイラスト
• SVGはScketchで右クリックで抽出可能(スライス不要)
• Photoshopはうまく書き出せない時があるので、別途IllustratorやScketchで取扱い

GIf

• アニメーション可能
• 小さなアイコン（基本SVGが良い）

素材作成レギュレーション ＞ Retina対応

• 写真のはめ込まれた素材はpngで2倍
• 純粋な写真はjpgで2倍

---

SVG実装時 / 選択肢

軽量化：
https://jakearchibald.github.io/svgomg/

• 何回も見る Webアプリなど

  • 画像化.svg + キャッシュ

• 頻繁に見ないLP ブログなど

  • インラインでHTML直書き
  • バックグラウンドはBase64で直書き インライン

Data URI

• Data URLはキャッシュしないため、初回訪問には高速化が有効
• 画像の文字化
• 画像を読みに行かなくて良いので高速
• キャッシュしないので、重いものは不向き
• 管理運用に注意