最近、次世代画像フォーマットのWebPが出てきました。なのでここで改めて、画像はどんな拡張子があるのか、どれを使用するのが最適かを私なりにまとめました。
JPEG
実写などの細かいグラデーションがある画像に使おう。不可逆圧縮なので、圧縮するときは注意。
GIF
簡易アニメーションを作るときに最適です。データ容量が小さくて複雑な色表現には向いていません。ネットでたまに実写をgifで出してるのがありますね。すごく劣化してます。
PNG
ロゴ、アイコンで、透過させたいときに使用されます。可逆圧縮なのもいいところ、データ量は重いです。
SVG
同じくロゴやアイコンで使用されます。ベクター画像形式なるもので、大きく表示しても劣化せず、データ量も少ない。
WebP
最近出た形式です。JPEG、PNGよりもデータサイズが軽く、アニメーションフレーム、透明度などにも対応しています。
欠点は非可逆圧縮なのと、対応ブラウザが少ない(←これ重要)。
私はJPEG、PNG、SVG、を使い分けています。アニメーションは基本CSS制御でたまにGIFをしようするかな。
WebPはIE11以外は全て対応しているみたいだけど、僕はまだ採用しないか、<picture>で代替えを用意します。