透過PNGをSVGを利用して軽くするテクニック

透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。 透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。 SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの

[thleap]

透過画像の大きくなりがちなファイル容量を、JPG画像、透過を反転させたPNG画像、SVGのmask要素を用いて軽減させる方法

[oppara]

透過PNGをSVGを利用して軽くするテクニック - Weblog - http://t.co/zNjzdqtzMQ B!

[terurou]

またバッドノウハウ界にテクニックがひとつ

[Sips]

svg

[megazalrock]

JPEG2枚使ってcanvasで透過するjQueryのプラグインを書いたことある。SVGの方が負荷低そうだな。

[efcl]

JPG画像とマスクとなるPNG画像をsvgのmask要素を合わせる事で擬似アルファチャネルをやる事について。 単体の透過pngよりサイズサイズが軽量に出来る話。 http://blog.jackadam.net/2010/alpha-jpegs/