1. WEBにおける
適切な画像形式の選び方
守谷 豊

2. 目的
技術の発展によりインターネットの転送速度、コン
ピュータのスペックが高くなり、多少容量が重くても
ユーザーがさほど気になるほどでは無くなった。
しかし、ユーザビリティの向上やSEOにおけるページ
表示速度はプライオリティが高く、WEBサイト制作で
最も抑えておきたいポイントの一つである。

3. 画像形式を選ぶ必要性
ページの容量を軽量化する
- ページ表示速度は離脱率に影響する
WEBサイトを綺麗に見せる
- 各形式の特性を知って綺麗に表示させる
メンテナンス性の考慮

4. JPG
メリット
- 扱える色数が多い（24bit 1670万色）
- 圧縮することでファイルサイズを制御できる
デメリット
- 非可逆圧縮なので画像が劣化する
- 圧縮の特性上、画像の輪郭がぼやける
69KByte

5. GIF
メリット
87KByte
- 透明色を設定することができる(単色)
- 色数を減らすことでファイルサイズを制御できる
- アニメーションができる
デメリット
- 扱える色数が少ない（8bit 256色）
- 色数が多いと極端に容量が大きくなる

6. PNG(8bit)
メリット
78KByte
- 透明色を設定することができる(半透明)
- 色数を減らすことでファイルサイズを制御できる
デメリット
- 扱える色数が少ない（8bit 256色）
- 色数が多いと極端に容量が大きくなる

7. PNG(24bit 32bit)
メリット
210KByte
- 扱える色数が多い（24bit 1670万色）
- アルファチャンネルを設定することができる(32bit)
- 可逆圧縮なので綺麗な画質が保てる
デメリット
- 容量が大きくなる

8. 選ぶ基準
画像が実写である => JPG or PNG32
画像がイラストでベタが多い => GIF or PNG8
下位のブラウザも対応が必要 => JPG or GIF (PNG)
画像サイズが小さい => GIF or PNG8 (JPG)

9. 画像圧縮ツールの紹介
JPEGmini
http://www.jpegmini.com
PNGGauntlet
http://pnggauntlet.com
ImageOptim
http://imageoptim.com