【保存版】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】
簡単なアニメーションを作る場合に適している
画像は重くなるので注意