【保存版】JPEGとPNG 最適な使い方
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】
簡単なアニメーションを作る場合に適している
画像は重くなるので注意
記事引用は
WEBメディア
【厳選！】6つの拡張子（画像フォーマット）の特徴と適切な用途を比較！