透過PNG/GIF画像を大幅に軽量化！SVG画像に変換する無料のオンラインサービス -ZorroSVG

透過PNGは素晴らしいフォーマットですが、そのファイルサイズもなかなかのものです。

透過PNGや透過GIF画像をSVG画像に変換し、JPEG圧縮・品質で軽量化するオンラインサービスを紹介します。

デモでは、99KBの透過PNGが18KBのSVGに！

SVGに変換できるオンラインサービスは「ZorroSVG」、使い方は簡単です。
まずは、サイトにアクセスします。

ZorroSVG

上部の「Try it」から変換する画像を選択します。
今回は先日の8周年プレゼント企画で全プレした「飾りパーツと小物の写真素材」からはっぱの透過画像を使用してみました。

はっぱの透過画像のキャプチャ

ファイルをアップロードすると、すぐに反映されます。

はっぱの透過PNG画像のサイズは、28KB

下にスクロールすると、SVGに変換された画像も表示されています。

SVGだと、21KB
下にあるスライダーで圧縮・品質を調整し、更に軽量化することもできます。

SVGのダウンロードはその下の「Download」から。

ダウンロードボタン

生成されたSVGを画像として使用する時は、下記のコードで配置します。

<img src="yourImage.svg" />

SVGをサポートしていないブラウザを考慮すると、代替のPNGも用意し、こんな感じに。

<img src="yourImage.svg" onerror="this.src='yourOriginal.png'"/>

iOSのmobile Safariはimgタグの代わりにobjectタグを使用します。

<object data="yourImage.svg" type="image/svg+xml"/>