CANVAで画像を作成したり、写真を保存したりするときに迷うのが拡張子。
JPEG？　PNG？どっちを選べばいいの？
なんとなくJPEGばかり使っていて保存や加工をくりかえしていたら
なんとなく画像がぼやけてしまった……という経験はありませんか？
今日は、WEBで使う画像の保存のしかた、拡張子の使い分けについて
まとめてみました。

WEBで使う画像は「JPEG」「PNG」「GIF」　この3種類

• この記事を読むと、JPGとPNGやGIFの特徴や違いがわかるようになります。

• JPGとPNGやGIFの使い分け、保存のし方がわかり、迷いがなくなります。

【JPEG】ジェイペグと読みます。拡張子は「.jpg（.jpeg）」

※Joint Photographic Experts Groupの略。

＜JPEGの特徴＞

• フルカラーの1670万色まで取り入れられる。

• 自然写真やグラデーションのように色が細かく変化する画像に適している

• 色の透過はできない

• 大きな画像を小さなファイルサイズにできる（情報量を圧縮して軽い容量で保存できる）

• JPEGファイルを低解像度で保存すると元の画質には戻せない。

• 保存する度に画質が劣化する（元データは保管したうえで随時加工保存をすることが必要）

【PNG】ピングと読みます。拡張子は「.png」

※Portable Network Graphicsの略

＜PNGの特徴＞

• フルカラー1670万色が扱える

• 透過できる

• 低画質で保存しても元の画質に戻すことができる

• JPEGやGIFに比べて若干データ容量が重くなる傾向がある

• WEBで使う場合は内容によりJPEGと使い分ける（より軽いファイルサイズの拡張子を選ぶ方がよい）※ページの表示速度が遅くならないように

• 古いブラウザではまれにサポートされていない場合もあるので注意
  

【GIF】ジフと読みます。拡張子は「.gif」

※Graphics Interchange Formatの略

＜GIFの特徴＞

• 最大256色で表現される

• アニメーション画像が作成できる（色数の少ないシンプルなアニメ）

• ロゴやアイコン・ボタン・簡単なイラストなど色数の少ない画像に適している。

• 色の透過は可能

• 低画質で保存しても元の画質に戻せる

その他の拡張子　

【TIFF】ティフと読みます。拡張子は「.tif（.tiff）」

JPEGのように画像を圧縮してもデータが損なわれませんが、
データ容量は非常に重くWebでは使用できません。

＜TIFFの特徴＞

JPEGのように画像を圧縮してもデータが損なわれませんが、
データ容量は非常に重くWebでは使用できません。

BMP（ビットマップ/ビーエムピー）「.bmp」
Windows用の画像形式ですが、TIFFと同様データ容量が重く、Webでは使用できません。

【BMP】ビットマップと読みます。拡張子は「.bmp」

＜BMPの特徴＞

Windows用の画像形式ですが、TIFFと同様データ容量が重く、Webでは使用できません。

拡張子の使い分け　まとめ

【JPEG】

• 写真など　色数の多い画像に適している　自然写真などは適している

• ファイルサイズを小さくできるが、保存の回数とタイミングいは注意が必要

【PNG】

• 色数が多く、透過させたい画像には適している。

• 文字や図が含まれる画像には適している

• JPEGよりもファイルサイズが重くなりやすいので、WEBで使う場合は画像の状況を見ながらJPEGとPNGを使い分ける

【GIF】

• 簡単なアニメーションを作る場合に適している

• 画像は重くなるので注意