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

通常、透過処理をした写真画像を使用する際のフォーマットはPNGを使用することが多いと思います。これを写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法を紹介します。 デモでは、PNGのみで127KB、JPEG with PNGで42KB、と約1/3容量が軽減しています。 ;(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.cre

[kawawara]

透過処理した画像を軽く転送

[osanpo_u]

透過処理した画像を軽く転送

[nors]

http://blog.jackadam.net/2010/alpha-jpegs/

[tofu-kun]

なるほど。

[ginpei]

圧縮率の高いJPGEとマスク専用のPNGとを、canvasで組み合わせて「透過JPEG」にする。すごい発想！

[kuroazuki]

要は適材適所って方法ですね。

[tsutomura]

昔、透過GIFを試しに何重も重ねていたのを思い出しました…。

[authority-site]

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

[n2s]

「HTMLではimg要素にマスクのPNGを配置する独自の属性を使用します」独自の属性使うアプローチって案外使われないよね。hoverをjavascriptで実装してるやつとかもそうすれば自然なのに。/ HTML validを気にするなら駄目だけど。

[kkeisuke]

canvasを使用してJPEG上にマスクのPNGを使用してトータルの容量を軽減する

[tarchan]

＞写真画像にJPEG、その上にマスクのPNGを使用してトータルの容量を軽減する方法

[nevlib]

HTML5。ホントなんでも出来るね！2つのファイルを使うってところに、少し違和感があるけど新しい手法ってみんなそんなもんだ。