[JS]透過処理をした写真画像の転送量を軽くする方法
Post on:2010年10月6日
sponsors
通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。
デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。
JPEGs with Alpha Channels?!?
デモページ
[ad#ad-2]
「JPEG with PNG」で使用している画像は下記の二枚で、一枚目はごく普通のJPEG画像（35KB）。
二枚目はマスクを使ったPNG-24画像（7KB）です。
[ad#ad-2]
上記の画像にHTML5のcanvasを使用して、一枚の画像のように表示します。使用するスクリプトは下記のようになります。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
;(function() { var create_alpha_jpeg = function(img) { var alpha_path = img.getAttribute('data-alpha-src') if(!alpha_path) return // Hide the original un-alpha'd img.style.visiblity = 'hidden' // Preload the un-alpha'd image var image = document.createElement('img') image.src = img.src image.onload = function () { // Then preload alpha mask var alpha = document.createElement('img') alpha.src = alpha_path alpha.onload = function () { var canvas = document.createElement('canvas') canvas.width = image.width canvas.height = image.height img.parentNode.replaceChild(canvas, img) // For IE7/8 if(typeof FlashCanvas != 'undefined') FlashCanvas.initElement(canvas) // Canvas compositing code var context = canvas.getContext('2d') context.clearRect(0, 0, image.width, image.height) context.drawImage(image, 0, 0, image.width, image.height) context.globalCompositeOperation = 'xor' context.drawImage(alpha, 0, 0, image.width, image.height) } } } // Apply this technique to every image on the page once DOM is ready // (I just placed it at the bottom of the page for brevity) var imgs = document.getElementsByTagName('img') for(var i = 0; i < imgs.length; i++) create_alpha_jpeg(imgs[i]) })(); |
対応ブラウザはFirefox, Chrome, Safari で、IEで利用するには「FlashCanvas Pro」が必要です。
※デモでは、FlashCanvas Pro設置済み
HTML
HTMLではimg要素にマスクのPNGを配置する独自の属性を使用します。
|
1 |
<img src="image.jpg" data-alpha-src="alpha.png" /> |
CSS
画像をダウンロードできるようにするには、下記のスタイルシートを使用します。
|
1 |
img[data-alpha-src]{visibility: hidden;} |
sponsors
