テーマ別事例

  1. HOME
  2. テーマ別事例
  3. 軽量、高解像度に対応するSVGファイル導入のメリット

軽量、高解像度に対応するSVGファイル導入のメリット

周りを見渡すと、高解像度スマートフォンやRetina 4kといった高解像度のディスプレイが増えています。
数年前に作った画像を高画質画面で表示すると、画像が粗いと気づいたことはありませんか。
高解像度に対応するために大きい画像を用意したことで、ページを表示する速度が落ちる場合もあります。

今回はよりきれいで軽量なSVGファイルの使用例を紹介します。
SVGとはスケーラブル・ベクター・グラフィックスの略で、画像フォーマットの1つです。
SVGの概要を説明すると、点の座標を線でつなげて絵を再現しているため、拡大・縮小をしても画像が劣化せず、レスポンシブな作りに適したファイルになります。

左がSVGファイル、右がPNGファイルです。横に並べて比較してみると、あまり大差なく見えます。

これを、縦に並べて見てみると一目瞭然です。
下のPNGファイルは拡大されると、ぼやけて見えます。

普通は画像がぼやけないよう見えるため、サイズの大きいものを用意しますが、ファイルの容量が重くなってしまい、ページの表示速度が落ちてしいます。
また、今回使用したサンプル画像は両方とも約50KB (キロバイト) ですが、PNGファイルを鮮明に表示させるためにはどうしてもサイズが大きくなってしまいます。
一方、SVGファイルはいくら拡大しても50KBのままなので軽量です。
ウェブページを制作するにあたってユーザビリティを考慮し、SVGファイルの使用を考えてみてはいかがでしょう。

ただ、メリットばかりに見えるSVGファイルにもデメリットもあります。
繊細な配色や複雑な画像は、点や線で構成するベクター形式のSVGでは表現しきれないため、PNGやJPGを使うことをおすすめします。

ビー・オー・スタジオでは、お客様の目指す仕様や用途にあった画像を選び、使いやすいウェブサイトを設計から制作まで行っています。お困りごとがございましたらお問い合わせください。

テーマ別事例トップに戻る

お問い合わせ・ご相談はこちらcontact@bostudio.co.jp