これは何？
本スクリプトは昨今注目を集めている「透過PNG画像をより軽快なJPG画像としつつ，SVGマスクによる透過部を定義するテクニック」をjavascriptを使って実装したものです．特徴としては元画像をトリミングしている他，マスク画像をPNG画像としているので，透過部の形状を最大限維持しつつファイルサイズだけを大幅に縮小することに成功しています．また，生成したSVGファイルには画像データが埋め込まれているため，既存のPNG画像と同じように扱うことができます．
なおサーバーへのファイルアップロードは行っておらず，全てブラウザ内部で動作が完結しています．
※似たスクリプトとしてはZorroSVGがありますが，こちらではfilter要素を使っているようです．見た目こそ似ていますが，マスク画像がJPG形式なので品質を落とすにつれJPG画像特有のノイズが目立ちやすくなります．この点を改良したものがこのスクリプトと言えます．
使い方
- 左ペインの[ファイル選択]から変換したい透過PNG画像を選択するか，画像をドロップしてください．
- 右ペインの[JPG品質]/[mask品質]を適宜調整し，[変換開始]ボタンをクリックしてください．
- 画像を右クリック/［SVGを保存］リンクをクリックして保存してください．
- 得られたSVG画像は元のPNG画像と同様に利用可能です．
FireFox/Chrome/InternetExplorer(の最新版)でのみ動作確認しています．
Opera(新しいもの)ではおそらく動作するでしょう．Safariは知りません…
ソースコードにはMITライセンスが付与されるものとします．ご自由にお使いください．png2svgjpg.js,pnggen.js
ヒント
本スクリプトで生成したSVG画像を用いると確かにファイルサイズ(≒ネットワーク負荷)は小さくなります．が，SVGを挟むことによってブラウザ側の負荷が増加するかもしれません．(SVGの解析，画像のデコード×2+合成)．
SVGをサポートしているブラウザであっても，SVGの使い方によっては正しく動作しない場合があります．導入する場合は十分に動作検証を行ってください．また，必要に応じてSVGをサポートしない環境に対するフォールバック画像を用意しておくと良いでしょう．
簡易SVG動作検証テーブル
| iframe | object | embed | img | canvas | svg:image | svg:use |
|---|
|
|
|
 |
|
|
|
| input[type=image] | background-image | border-image | cursor | content |
|---|
|
|
|
|
|