Webサイトを遅くするダメなSVG画像をスッキリ最適化する手軽な方法

Home » 媒体 » ASCII.jp » Webサイトを遅くするダメなSVG画像をスッキリ最適化する手軽な方法
ASCII.jp, Web, Webデザイン コメントはまだありません

2017年06月16日 10時58分更新

記事提供:WPJ

本文印刷

「SVGならベクターだから軽くてキレイに表示できる」と思っていませんか? Webで使うことを前提に作られていない場合、逆にファイルサイズが大きくなったり、レンダリングに時間がかかったりすることもあります。

この記事では、SVGOでSVG画像をWeb向けに最適化する3つの方法を紹介します。

SVG画像を最適化すべき理由

SVG(Scalable Vector Graphics:スケーラブル・ベクター・グラフィックス)は解像度に依存しない画像のフォーマットです。ピクセルベースの画像にはないメリットは、Retinaディスプレイを搭載したデバイスでもキレイに表示されることや、レスポンシブのWebサイトで画像が劣化しないことなどがあります。

グラフィックスデザイナーではない人は、オンラインにあるCreative Commons(クリエイティブコモンズ)やPublic Domain(パブリックドメイン)のSVG画像を利用しているでしょう。そうした画像はWebを意識して作られていないことがよくあります。具体的には、複雑なパスやPhotoshop風の効果が多く含まれていたり、SVG画像はXMLベースなので、ソースコードを調べると不要なマークアップがたくさん含まれていたりします。私がきれいなコードをこよなく愛していることはさておき、複雑で肥大したコードはファイルサイズを大きくし、Webサイトのパフォーマンスに悪影響を与えます。

この記事をWPJのサイトで読む

コメントを残す