iPhone 5の「特徴」ページに表示されている、手にiPhoneを持った大きな画像ですが、環境に応じて表示のさせ方を変更しているっぽい。

Canvas対応ブラウザの場合には、JPEGとマスク用のPNG画像を読み込み。この場合、213KB + 11KB。

一方、透過処理されたPNGデータも別途用意されている。これは466KB。

Canvasで透過処理を行った方が、読み込む画像の容量が少なくてすむ。対応していないブラウザには透過PNGを表示させるという仕組み。

その差242KB。このためになんでそこまで... と思うかもしれませんがこれがRetina環境になるとさらに差が出る。

Retina環境の場合

•JPEG画像 (739KB)
images.apple.com

•マスク画像 (32KB)
images.apple.com

•透過PNG (1.7MB)
images.apple.com

なので、Canvasで透過処理させると 739KB + 32KB = 771KB。
一方透過済みPNGは1.7MBなので、差が1MB近く生じる。

すごく地味だし手間もかかるけど、高解像度化時代を迎えるにあたってこういうテクニックが活きてくるのだろうな。