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色なので。