Webサイトで扱う画像ファイル形式

各画像形式の種類と特徴

JPG

一般的に使用されている画像形式で、スマートフォンのカメラ（iPhone〈iOS11〉以前）やデジカメでとった画像は特別な設定をしていなければ大体この形式で保存されます。

メリット フルカラー1677万色まで表現することが出来るので、色数が多い画像がきれいに表示される
デメリット 非可逆圧縮という 人間の感覚に伝わりにくい部分を削ってファイルサイズを圧縮する方法で画像を圧縮しており、圧縮率を上げると画像が劣化してしまいノイズが目立つ

GIF

256色で構成されている画像形式です。
透過処理や動きを取り入れた「アニメーションgif」などの表現ができます。

メリット 少ない色で構成されており、比較的データ容量が軽い・アニメーションの表現や透過処理が出来る
※半透明は不可・直線以外の透過は適さない
デメリット 256色以上カラーを使用する写真やグラデーションの表現には適さない

PNG

JPGと同じでフルカラー1677万色まで色を扱うことができ、なおかつ透過処理が行えます。
フルカラーも表現できるのでグラデーションを使用した画像にも適しています。

メリット 画質が劣化しない、透過処理が出来る※半透明も可能
デメリット
ブラウザIE7から対応しているため、古いブラウザなどで対応していない場合がある
データが重い

それぞれの適している
JPG 風景・景色・人物像など多くの色を使う写真
GIF 256色以下のロゴやイラストなど
PNG 透過処理もできるので人物写真の切り抜きや色数が多いイラストなど