ドット絵の画像フォーマットガイド
PNG・GIF・WebP — 保存と共有のベストプラクティス
せっかく描いたドット絵も、保存フォーマットを間違えるとピクセルが潰れたり、ファイルサイズが無駄に大きくなったりします。各フォーマットの特徴を理解して、最適な形式で保存・共有しましょう。
フォーマット一覧比較
まずは主要フォーマットの特徴を一覧で把握しましょう。
| フォーマット | 圧縮方式 | 最大色数 | 透過 | アニメ | ドット絵向き |
|---|---|---|---|---|---|
| PNG | 可逆 | 16.7M | 対応 | APNG | 最適 |
| GIF | 可逆 | 256 | 1色のみ | 対応 | アニメ用 |
| JPEG | 非可逆 | 16.7M | 非対応 | 非対応 | 不向き |
| WebP | 両対応 | 16.7M | 対応 | 対応 | 優秀 |
| AVIF | 両対応 | 16.7M+ | 対応 | 対応 | 将来有望 |
| BMP | 無圧縮 | 16.7M | 非対応 | 非対応 | 非推奨 |
| SVG | ベクター | 無制限 | 対応 | 対応 | 別物 |
PNG — ドット絵の定番フォーマット
PNG
PNGは可逆圧縮（ロスレス）のため、保存してもピクセルが一切劣化しません。ドット絵で最も重要な「ピクセルの正確さ」を完全に保持できる、まさにドット絵のための形式です。
- ピクセルが一切劣化しない（可逆圧縮）
- アルファ透過に完全対応（半透明もOK）
- あらゆる環境で表示可能
- SNS・ゲームエンジン・画像編集ソフト全対応
PNGの種類
PNG-8（インデックスカラー）
- 最大256色。ドット絵に十分な色数
- ファイルサイズが非常に小さい
- 少ない色数のドット絵に最適
PNG-24/32（フルカラー）
- 1677万色 + アルファチャンネル
- PNG-8より大きくなるが、色数の多い作品に対応
- グラデーションを多用する作品向け
ドット絵は色数が少ないため、PNGで保存するとファイルサイズは驚くほど小さくなります。32x32、16色のドット絵なら数百バイト〜数KBで済みます。「PNGは重い」というのは写真の話で、ドット絵には当てはまりません。
GIF — アニメーションの老舗
GIF
1987年登場の古参フォーマット。最大の強みはアニメーション対応で、あらゆるブラウザ・アプリ・SNSで再生されます。ドット絵アニメの共有に今でも広く使われています。
- アニメーションの対応環境が最も広い
- ドット絵の色数なら256色制限が問題にならない
- 透過は1色のみ（半透明は不可）
- 色数の多い作品にはディザリングが発生
APNG
PNGのアニメーション拡張。GIFの256色制限とアルファ透過の問題を解消します。モダンブラウザはほぼ対応していますが、一部のアプリやSNSでは静止画として表示されることがあります。
- フルカラー + アルファ透過のアニメーション
- 主要ブラウザ対応済み
- 一部SNS・アプリで非対応
- GIFよりファイルサイズが大きくなりがち
JPEG — ドット絵には使わないで
JPEG
JPEGは写真に最適化された非可逆圧縮フォーマットです。色の境界をなめらかにぼかす仕組みのため、ドット絵のシャープなエッジがにじんで台無しになります。
- ピクセルの境界がにじむ（非可逆圧縮）
- ブロックノイズ（8x8のモザイク状の劣化）が発生
- 透過非対応
- 保存するたびに画質が劣化する
ピクセルの境界がくっきり
にじみとブロックノイズが発生
SNSにドット絵を投稿する際、プラットフォームが自動的にJPEGに変換してしまうことがあります。Twitter/Xでは透過PNGをアップロードすると強制変換を回避できます。背景が透明でない場合は、画像サイズを大きめ（例: 拡大済みの512x512以上）にすると、JPEG変換されても劣化が目立ちにくくなります。
WebP — モダンな選択肢
WebP
Googleが開発したモダンフォーマット。可逆圧縮と非可逆圧縮の両方に対応し、アニメーションも可能。PNGより小さいファイルサイズで同等の品質を実現します。
- 可逆モードならPNGと同等の画質でより軽量
- アルファ透過 + アニメーション対応
- 主要ブラウザ全対応（2023年〜）
- 一部の古い画像編集ソフトで非対応
- SNSでの対応はまちまち
WebP可逆モードは、同じドット絵のPNGと比べて20〜30%ほどファイルサイズが小さくなることがあります。Webサイトでドット絵を大量に表示する場合、読み込み速度の改善に効果的です。
AVIF — 次世代フォーマット
AVIF
AV1動画コーデックをベースにした最新フォーマット。WebPよりさらに高い圧縮率を誇りますが、エンコードが遅く、対応環境もまだ発展途上です。
- WebPを上回る圧縮率
- 可逆・非可逆両対応 + HDR対応
- エンコードが遅い
- 対応ブラウザは増加中だが完全ではない
- 画像編集ソフトの対応が限定的
SVG・BMP — 特殊な用途
SVG
ベクター形式のため、どんなサイズに拡大しても劣化しません。ドット絵を各ピクセルをrectタグで表現するSVGに変換すれば、Retinaディスプレイでも完璧に表示できます。ただし本来のドット絵フォーマットではありません。
BMP
無圧縮のビットマップ形式。ピクセルの劣化は一切ありませんが、ファイルサイズが大きく、Webでの利用には不向きです。レガシーなツールとの互換性が必要な場合に限り使用します。
ファイルサイズの比較
同じ32x32のドット絵（16色）を各フォーマットで保存した場合のファイルサイズ目安です。ドット絵は色数が少なく構造がシンプルなため、可逆圧縮フォーマットでも非常に軽量です。
JPEGはドット絵では圧縮効率が悪く、PNGより大きくなることがあります。写真向きの圧縮アルゴリズムが、色のはっきりした境界を持つドット絵には逆効果になるためです。
用途別おすすめフォーマット
「結局どれを使えばいい？」という疑問に、用途別でお答えします。
保存・アーカイブ用
劣化ゼロで保存できるPNGが鉄板。作業ファイルの保存にも最適。
Webサイト公開
PNGで十分軽量。さらに軽くしたいならWebP可逆モード。
SNS共有
透過PNGでアップすると、JPEG自動変換を回避できるプラットフォームが多い。
ゲーム素材
ほぼ全てのゲームエンジンがPNGに対応。スプライトシートもPNGで。
アニメーション
互換性重視ならGIF。画質とサイズのバランスならWebPアニメーション。
印刷用
整数倍で拡大したPNGを使用。300dpi以上の解像度に。
保存時の実践Tips
- リサイズ時は必ず Nearest Neighbor（ニアレストネイバー）補間を使う。バイリニア補間はドット絵をぼやかす原因になる。
- 拡大は整数倍（2x, 3x, 4x...）で行う。非整数倍はピクセルの不均一を引き起こす。
- 制作中はPNGで保存し、公開時にWebP変換を検討する。元データは必ずPNGで残す。
- SNS投稿時は少し大きめに拡大してからアップする（最低512x512程度）。小さいとJPEG変換の劣化が目立つ。
- アニメーションGIFはフレーム数を最小限に。ドット絵なら4〜12フレームで十分表現できる。
- メタデータ（EXIF等）は削除してからアップすると、ファイルサイズを少し軽減できる。
迷ったらPNG。これがドット絵における画像フォーマット選びの第一原則です。アニメーションならGIF、Webで軽量化したいならWebPが有力候補。JPEGだけは避けましょう。