jpeg、png、gifは画像の性質と用途の視点から使い分ける。

画像の性質で大ざっぱにまとめると
写真や細かいイラストはjpegかpng-24
シンプルなアイコンやロゴやグラフはpng-8かgif

用途で大ざっぱにまとめると
透過する必要がある場合はgifかpng-8、32
軽くする必要がある場合はpng24、32を避ける

それぞれの特徴や使い方、注意点は以下の通り

◎jpeg
●特徴
非可逆圧縮
24ビット=フルカラー（約1670万色）
透過できない
ファイルサイズは操作可能、pngに比べて画質の割に小さくできる

●適切な使い方
写真をきれいに表示できる
グラデーションをきれいに表示できる
色数のわりに軽い画像にしたい場合

●注意点
グラフや線、図形や文字などのはっきりクッキリした画像はぼやけてしまう
保存すればするほど劣化する
アイコンやロゴ、ボタンなど重ねるものには不向き。透過できないため。

◎png
○png-8
●特徴
可逆圧縮
8ビット=256食
透過できる

ファイルサイズは小さい
グラデーションを含む場合、同じ8ビットでもgifよりファイルサイズが小さく

なる傾向

●適切な使い方
グラフや線、図形や文字などのはっきりクッキリした画像
ロゴやボタン、アイコン、バナー

●注意点
色数が多い写真やイラストの圧縮には不向き、色数が256色なので。

○png-24
●
可逆圧縮
24ビット=フルカラー（約1670万色）
透過できない（png-32で透過可）
ファイルサイズが大きくなりがち

●適切な使い方
写真、グラデーション、グラフや線、図形や文字などのはっきりクッキリした

画像と多様な場面で綺麗に圧縮できる。

●注意点
ファイルサイズが大きくなる。サイトが重くなる。
アイコンやロゴ、ボタンなど重ねるものには不向き。透過できないため。

○png-32

24に透明情報を追加したものがpng-32
256の透明度を持つ

※重いpng用にインターレースpngという設定も
軽くて粗い画像を先に表示させ、重い詳細な画像を後から表示させることで体

感が良くなる可能性も…

◎gif
可逆圧縮
8ビット=256食
透過できる
ファイルサイズは小さい
動画可能

●適切な使い方
ロゴやボタン、アイコン、バナー
動画にしたい場合

●注意点
色数が多い写真やイラストの圧縮には不向き、色数が256色なので。