[JS]透過処理をした写真画像の転送量を軽くする方法

通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。

デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。

デモのキャプチャ

JPEGs with Alpha Channels?!?
デモページ

[ad#ad-2]

「JPEG with PNG」で使用している画像は下記の二枚で、一枚目はごく普通のJPEG画像(35KB)。

画像のキャプチャ

image.jpg

二枚目はマスクを使ったPNG-24画像(7KB)です。

画像のキャプチャ

alpha.png

[ad#ad-2]

上記の画像にHTML5のcanvasを使用して、一枚の画像のように表示します。使用するスクリプトは下記のようになります。

JavaScript

対応ブラウザはFirefox, Chrome, Safari で、IEで利用するには「FlashCanvas Pro」が必要です。
※デモでは、FlashCanvas Pro設置済み

HTML

HTMLではimg要素にマスクのPNGを配置する独自の属性を使用します。

CSS

画像をダウンロードできるようにするには、下記のスタイルシートを使用します。

sponsors

top of page

©2018 coliss