☆デザインデータをスライスして書き出す時のフロンティアルール☆（2026年版）
形式選択フローチャート
写真・複雑なグラデーション → WebP（非対応環境のフォールバックにJPG）
透過が必要 → WebP（非対応環境のフォールバックにPNG-32）
単色・シンプルなアイコン（2〜16色） → SVG or PNG-8
アニメーション → CSS/SVGアニメーション（GIFは原則使わない）
推奨形式（優先順）
― WebP（第1推奨）
・全モダンブラウザ対応（Chrome/Firefox/Safari/Edge）
・JPGより約30%、PNGより約25%軽量
・透過対応（PNG-32の代替として使用可）
・書き出し品質：写真系80〜85 / イラスト系85〜90
・フォールバック用にJPG/PNGも書き出してHTMLで <picture> タグを使う
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
― JPG
・色数の多い写真・メイン画像などの大きめJPGは最大95
・サムネイル画像や目立たない画像は85〜90
・85以下はサイトのクオリティが低く見える場合があるためNG
※ただしLPなど1ページ分の最大容量がクライアント指定で決まっている場合はこの限りではない
― PNG
PNG-8・・・8ビットカラー（256色）。透過可。
PNG-24・・・24ビットカラー（フルカラー）。透過不可。
PNG-32・・・24ビットカラー（フルカラー）。透過可。→ WebPで代替推奨
・色数が4色以上くらいになってくるアイコンなどは、PNG-8がベスト
・単色グラデボタンなどはPNG-24がベスト
・解像度高めできれいに見せたい透過画像はWebPまたはPNG-32
― SVG
・ロゴ・アイコン・シンプルなイラストは SVG 一択
・拡大縮小しても劣化しないためRetina/高DPI対応が容易
・Illustratorから書き出し後、SVGOMG等で最適化する
― GIF（非推奨）
・アニメーションGIFはファイルサイズが大きくCSSアニメーションで代替可能なケースがほとんど
・使用する場合は必要性を確認してから
書き出しツール
・Squoosh（Googleブラウザツール・WebP/AVIF変換）
・TinyPNG（JPG/PNG圧縮）
・Photoshop「書き出し形式」→ WebP選択可（CC 2023以降）
・Figma → Export → WebP or SVG
