ご無沙汰ぶりです。何事もなかったかのように更新します。

ウェブに掲載されている画像たち。
見る側にはあんまり馴染のないお話かもしれませんが、同じように見えていても実は形式が違ったりしています。
私たちはその使用用途や画像の内容において、適切な形式を選んで書き出ししています。

今ウェブ上で主に使用されている画像形式は大きく分けて3つです。

JPG（拡張子.jpg、.jpeg）

色数：数百万色
透明情報：なし
アニメーション：なし

デジカメなどで撮影した写真はこの形式が一般的です。
JPG画像には【画質】が存在していて、この画質を抑えることで容量を削ることができます。
具体的には以下のように画質が下がりすぎるとノイズが付加されることで汚く・荒く見えてしまうという欠点もあります。大体80以上あればキレイに見えますが、使われている色によっても容量が変わります。ちなみにもっとも劣化しやすい色は赤色です。
色の境目がそこまではっきりしていない、写真のような色数の多い画像に向いている形式です。

左から無圧縮・画質８０・画質４０。８０はさほど見た目に差がありませんが、４０になるとはっきりノイズが見えます。

PNG（拡張子.png）

今ウェブでJPGの次に使われているのがこのPNGではないでしょうか。
PNGは、同じ拡張子でも更に3段階に形式が分かれています。

PNG8

色数：256色
透明情報：あり（255段階）
アニメーション：なし

色数256色＋透明度255段階によって構成されています。
色数が少ないので、グラデーションや写真などの画像を作るときは
色の境目が見えてしまうという欠点がありますが、（→クリックしてみてください）透明度の表現が可能なため、比較的容量を絞って透明度情報を持った画像を表現できます。

PNG24

色数：1670万色
透明情報：なし
アニメーション：なし

透明化情報はありませんが、劣化無しで1670万色を再現できる形式。
ただし、JPGのように圧縮が存在しないので、色数が多ければ多いほど重たくなってしまう形式です。
透明化情報の必要がない色数が少なくフラットな画像ならベストですが、
大きな写真には不向きかもしれません。

PNG32

色数：1670万色
透明情報：あり（255段階）
アニメーション：なし

1670万色を再現できて、更に透明度の概念もある形式。
劣化がないので鮮やか且つ微細な透明度の表現が可能です。
PNG24に更に透明度情報が加わるので、PNG24よりも重たくなります。
大きな写真には不向きですが、グラデーションのあるアイコン等、透明度情報が必要で、且つ色数は抑えたくない場面で役立ちます。
（→クリックしてみてください。透明化情報を持っています。）

GIF

色数：256色
透明情報：あり（有or無の２段階）
アニメーション：あり

PNG8の登場により、今はあまり見かけなくなった形式です。
色数256色＋透明化情報2段階（透明or不透明）。
色数が少ないことと、透明化情報は、透明or不透明の２種類だけなので
画像のふちが透明化している場合、ドットのギザギザが見えてしまう欠点があります。
そのかわり、アニメーション情報を持つことが可能であり、且つ軽く表示が早いという利点があります。（画像は透明化情報を持ったgif形式の画像を、分かりやすくグレーの背景色へ乗せたもの）

まとめ

同じ表現でも、使う画像の形式によって軽いページにも重たいページにもなります。
各画像形式によって得意なこと、不得意なことが異なりますので、使いたい画像によって形式を選ぶことが重要です。

余談ですが今回説明しなかった新しい形式としてアニメーションPNG（APNG）というものも既に登場しています。FirefoxとSafariでしか表示しませんが、LINEのアニメーションスタンプなんかはこれらの形式で作られています。