画像形式を知っておくと何が良いのか
ゲーム制作では、キャラクター、背景、UI、アイコンなど、たくさんの画像を扱います。画像にはPNGやJPEGといったさまざまなファイル形式があり、形式によって、画質、ファイルサイズ、透明部分(透過)を扱えるかどうかが変わります。
用途に合わない形式を選ぶと、にじんだり、背景が透けずに白い枠が残ったり、ファイルが無駄に大きくなったりします。違いを押さえておけば、こうした失敗を防ぎやすくなります。
最初に知っておきたい3つの違い
1. 可逆圧縮と非可逆圧縮
画像はそのままだとサイズが大きいため、多くの形式でデータを圧縮して保存します。圧縮の方法は大きく2つに分かれます。
- 可逆圧縮:元の画像を完全に復元できる圧縮です。画質は劣化しませんが、ファイルサイズは大きめになります。
- 非可逆圧縮:見た目への影響が小さい情報を削って、ファイルサイズを小さくする圧縮です。小さくなる代わりに、画質は劣化します。
2. 透過(透明な部分)を扱えるか
キャラクターの背景を透明にして、ゲーム画面に重ねて表示するには、透過に対応した形式が必要です。対応していない形式で保存すると、透明だった部分は白などで塗りつぶされます。
3. 色数やアニメーションなどの制限
形式によっては、使える色の数に上限があったり、アニメーションを扱えたりします。写真のように色数の多い画像を、色数の少ない形式に変換すると、見た目が大きく変わることがあります。
主な画像形式の比較
| 形式 | 圧縮 | 透過 | 特徴 |
|---|---|---|---|
| PNG | 可逆 | 対応 | 画質が劣化しない定番の形式。ファイルサイズはやや大きめ。 |
| JPEG | 非可逆 | 非対応 | 写真に向く。ファイルサイズは小さいが、保存のたびに画質が劣化する。 |
| WebP | 可逆・非可逆 | 対応 | PNGやJPEGより高い圧縮効率。アニメーションにも対応。 |
| GIF | 可逆(256色まで) | 透明か不透明のみ | 簡単なアニメーション用。色数の制限が大きい。 |
| BMP | 無圧縮 | 非対応 | 単純で互換性が高いが、ファイルサイズが大きい。 |
| AVIF | 主に非可逆 | 対応 | 圧縮率が高く軽い新しい形式。ブラウザによっては読み込めない。 |
| SVG | ベクター | 対応 | 拡大しても粗くならない。ピクセルではなく図形の情報で持つ。 |
| ICO | 複数サイズを内包 | 対応 | ファビコンやアプリのアイコン用。 |
形式ごとの特徴
PNG
可逆圧縮で、透過にも対応しています。画質が劣化しないため、ドット絵、UI、イラストなど、輪郭をくっきり保ちたい素材に向いています。迷ったときは、まずPNGを選べば大きな失敗はありません。写真のような色数の多い画像では、ファイルサイズが大きくなりがちです。
JPEG
非可逆圧縮で、ファイルサイズを小さくしやすい形式です。写真や、色が滑らかに変化する背景に向いています。透過には対応していないため、透明部分は白などになります。また、輪郭の周りにノイズ(ブロック状の乱れ)が出やすいため、ドット絵やくっきりした線画には向きません。
WebP
Googleが開発した形式で、可逆・非可逆のどちらも選べます。透過にも対応し、同じ画質ならPNGやJPEGよりファイルサイズを小さくできるのが強みです。ブラウザで動くWebゲームでは、読み込みを軽くしたいときに有力な選択肢です。ただし、ゲームエンジンによっては取り込めない場合があるため、使うエンジンの対応形式を事前に確認してください。
GIF
最大256色までの形式で、簡単なアニメーションに使われます。透過は「透明」か「不透明」のどちらかのみで、半透明は扱えません。色数が少ない素材には使えますが、ゲームの素材としては、PNGなどを使うほうが一般的です。
BMP
圧縮を行わない単純な形式です。互換性は高いものの、ファイルサイズが大きくなるため、ゲームの素材として使う機会は多くありません。
AVIF
高い圧縮率で、軽く仕上がる新しい形式です。ただし、環境によっては読み込めない場合があります。配布するゲームに使うときは、対応状況を確認してからにしましょう。
SVG
ピクセルではなく、線や図形の情報で絵を表現するベクター形式です。拡大しても粗くならないため、ロゴやシンプルなアイコンに向いています。写真や、ドット絵のようにピクセル単位で描いた絵には向きません。
ICO
アイコン専用の形式で、ファビコンやアプリのアイコンに使われます。16px、32px、256pxといった複数のサイズを、1つのファイルにまとめて持てるのが特徴です。
ゲーム制作での使い分け
| 用途 | おすすめの形式 | 理由 |
|---|---|---|
| ドット絵・スプライト | PNG | 画質が劣化せず、透過も使える。JPEGだと輪郭が乱れる。 |
| UI・アイコン素材 | PNG | 透過が使え、輪郭がくっきりする。 |
| 写真・実写の背景 | JPEG / WebP | 色数が多い画像でも、ファイルサイズを抑えられる。 |
| Webゲームの素材を軽くしたい | WebP | PNGやJPEGより小さくでき、読み込みが速くなる。 |
| ロゴ・単純な図形 | SVG | どんなサイズでも粗くならない。 |
| サイトのファビコン、アプリのアイコン | ICO / PNG | 複数サイズをまとめられる(ICO)。 |
作業中の元データ(原画)は、劣化のないPNGなどで残しておき、配布用に必要な形式へ変換するのがおすすめです。
形式を変換するときの注意
- 画質は元に戻らない:JPEGで保存した画像をPNGに変換しても、失われた画質は復元されません。非可逆形式から別の非可逆形式へ変換すると、さらに劣化することがあります。
- 透過が失われる:JPEGやBMPには透過がないため、透明な部分は白に置き換わります。GIFでは、半透明の部分が透明か不透明のどちらかになります。
- 色数が減る:GIFに変換すると、色が256色までに減ります。
- アニメーションは最初の1コマ:アニメーションGIFなどを変換するときは、最初の1コマだけが変換される場合があります。
- SVGは固定サイズの画像になる:SVGを別の形式に変換すると、通常のピクセル画像になり、拡大すると粗くなります。
当サイトのツールで変換する
当サイトの「画像形式変換」では、画像を選ぶだけで、PNG・JPEG・WebP・GIF・BMP・ICOに変換できます。変換元の形式は自動で判別され、ブラウザ上だけで処理するため、画像がサーバーに送信されることはありません。JPEGの品質や、WebPの可逆・非可逆も選べます。
形式ごとの対応状況は、お使いのブラウザやゲームエンジンのバージョンによって異なる場合があります。実際に使う環境の公式ドキュメントもあわせてご確認ください。