見出し画像

【保存版】JPEGとPNG 最適な使い方

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

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

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

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

JPEG画像の使い方
JPEGは自然写真には最適

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

※Joint Photographic Experts Groupの略。

<JPEGの特徴>

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

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

  • 色の透過はできない

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

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

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


PNGは透過する画像や図形などに最適

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

※Portable Network Graphicsの略

<PNGの特徴>

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

  • 透過できる

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

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

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

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

GIFはロゴやアイコン 簡単なアニメーション画像が得意

【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つの拡張子(画像フォーマット)の特徴と適切な用途を比較!

https://www.itra.co.jp/webmedia/image-fomat.html



いいなと思ったら応援しよう!