WebPとSVGの使い方

Webサイトを制作していると、画像を保存する際に「WebPとSVGはどちらを使えばいいのか」と迷うことがあります。

どちらもWeb制作ではよく使われる画像形式ですが、用途は大きく異なります。

結論から言うと、基本的な使い分けは以下です。

写真や複雑な画像にはWebP

ロゴやアイコン、図形にはSVG

すべての画像をWebPにすればよいわけでも、SVGにすればよいわけでもありません。

それぞれの特徴を理解し、画像の内容に合わせて使い分けることが重要です。

WebPとは？

WebPは、Googleが開発したWeb向けの画像形式です。

JPEGやPNGと比べて、画質を大きく落とさずにファイルサイズを軽くしやすいという特徴があります。

Webサイトの表示速度を改善する目的で、現在では多くのサイトで使用されています。

特に、以下のような画像に向いています。

人物写真

商品写真

施工事例の写真

背景画像

ブログのアイキャッチ画像

複雑な色やグラデーションを含む画像

写真は色数が多く、情報量も多いため、SVGには向いていません。

そのため、Webサイト内の写真については、基本的にWebPを選んで問題ありません。

WebPを使うメリット

WebPの大きなメリットは、画像のファイルサイズを小さくできることです。

画像サイズが大きいままだと、ページの読み込みに時間がかかります。

特にスマートフォンでは、通信環境によって画像の表示が遅くなることがあります。

WebPを使用して画像を軽量化することで、ページの表示速度改善が期待できます。

表示速度が速くなれば、ユーザーがページを離脱しにくくなり、サイトの使いやすさにもつながります。

また、画像の表示速度は、検索エンジンからの評価にも関係する要素の一つです。

そのため、写真をWebPに変換することは、Webサイトの基本的な表示速度対策として有効です。

WebPを使う際の注意点

WebPに変換すれば、どのような画像でも自動的に最適化されるわけではありません。

元画像の縦横サイズが必要以上に大きければ、WebPにしてもファイルサイズは大きくなります。

例えば、Webサイト上では横幅800ピクセル程度でしか表示しない画像を、横幅4000ピクセルのまま使用する必要はありません。

WebPへの変換だけでなく、実際の表示サイズに合わせて画像の縦横サイズも調整することが重要です。

また、圧縮しすぎると画像がぼやけたり、細部がつぶれたりすることがあります。

ファイルサイズだけを追求するのではなく、見た目とのバランスを確認しながら調整する必要があります。

SVGとは？

SVGは、線や図形などの情報をもとに表示される画像形式です。

JPEGやWebPのように、ピクセルの集まりで画像を表現する形式とは仕組みが異なります。

SVGの大きな特徴は、画像を拡大しても基本的にぼやけないことです。

そのため、以下のような画像に向いています。

ロゴ

アイコン

矢印

装飾用の図形

シンプルなイラスト

グラフ

線画

背景の模様

ロゴやアイコンは、パソコンやスマートフォンなど、さまざまな画面サイズで表示されます。

SVGであれば、大きく表示しても小さく表示しても輪郭がきれいに保たれます。

SVGを使うメリット

SVGのメリットは、画質を保ったまま自由に拡大・縮小できることです。

PNGで保存したロゴを大きく表示すると、輪郭がぼやけることがあります。

一方で、SVGは線や図形の情報をもとに表示されるため、サイズを変更しても滑らかに表示されます。

また、シンプルなロゴやアイコンであれば、PNGよりファイルサイズを小さくできる場合もあります。

Webサイトでは、パソコン、タブレット、スマートフォンなど、異なる画面サイズへの対応が必要です。

そのため、サイズが変わってもきれいに表示できるSVGは、ロゴやアイコンとの相性が非常によい形式です。

SVGを使う際の注意点

SVGは写真には向いていません。

写真のように色や形が複雑な画像をSVGにすると、データ量が非常に大きくなったり、正しく変換できなかったりします。

SVGは、あくまでロゴやアイコン、図形などのシンプルな画像に使用するものと考えた方がよいでしょう。

また、画像編集ソフトからSVGを書き出した際に、不要な情報が大量に含まれることがあります。

見た目は同じでも、SVG内部のデータが複雑になっていると、ファイルサイズが大きくなる可能性があります。

文字を含むSVGについても注意が必要です。

使用しているフォントが閲覧環境に存在しない場合、想定とは異なる見た目になることがあります。

ロゴなど、デザインを確実に維持したい場合は、文字を図形として扱える状態にしてから書き出す方法があります。

ただし、文字を図形化すると、通常のテキストとしては編集しにくくなるため、元データは別に残しておく必要があります。

WebPとSVGの違い

WebPとSVGの違いは、単純に画質やファイルサイズだけではありません。

そもそも得意とする画像の種類が異なります。

WebPは、写真や色数の多い画像を軽量化するための形式です。

SVGは、ロゴやアイコンなどの図形を、鮮明に表示するための形式です。

そのため、「どちらの方が優れているか」ではなく、「どの画像に使用するか」で判断する必要があります。

写真をSVGにする必要はありません。

反対に、ロゴを毎回WebPで書き出すよりも、SVGで用意した方がきれいに表示できる可能性があります。

Webサイトでの基本的な使い分け

Webサイト制作では、以下のように使い分けると分かりやすいです。

WebPを使う画像

メインビジュアルの写真

スタッフ写真

店舗写真

商品画像

施工写真

ブログ画像

背景写真

写真を中心にしたバナー

SVGを使う画像

会社やサービスのロゴ

メニューアイコン

SNSアイコン

矢印

チェックマーク

シンプルなイラスト

波や円などの装飾

図解やグラフ

写真はWebP、図形はSVGと覚えておけば、大きく間違えることはありません。

PNGやJPEGは使ってはいけないのか

WebPやSVGが使われる機会は増えていますが、PNGやJPEGが完全に不要になったわけではありません。

JPEGは写真に向いており、幅広い環境で使用できます。

PNGは背景を透過した画像や、文字・図形を含む画像に向いています。

ただし、Webサイトの表示速度を考えると、JPEGやPNGのまま使用するより、WebPに変換した方が軽くなるケースがあります。

一方、ロゴやアイコンの元データがPNGしかなく、SVG化すると形が崩れる場合は、無理にSVGへ変換する必要はありません。

画像形式を変えること自体が目的になってしまうと、本来の見た目や品質を損なう可能性があります。

必要に応じてPNGやJPEGも使用しながら、最適な形式を選ぶことが大切です。

PNG画像をSVGに変換すればきれいになる？

PNG画像をSVG形式に変換しただけで、必ずきれいになるわけではありません。

PNGはピクセルで作られた画像です。

その画像をSVGという形式で保存しても、元画像の輪郭が粗ければ、きれいな図形にはなりません。

特に、解像度の低いロゴを自動変換すると、線が歪んだり、細かい部分が崩れたりすることがあります。

ロゴをSVG化する場合は、元となるIllustratorやFigmaなどのデータから書き出すのが理想です。

元データがない場合は、画像をもとにロゴを作り直す作業が必要になることもあります。

拡張子だけをSVGに変更しても、画質が改善するわけではありません。

すべての画像をWebPにするべき？

写真については、基本的にWebPを使用して問題ありません。

ただし、すべての画像を機械的にWebPにする必要はありません。

ロゴやアイコンをWebPにすると、表示サイズによっては輪郭がぼやけることがあります。

そのような画像はSVGの方が適しています。

また、非常に小さな画像では、形式を変えてもファイルサイズがほとんど変わらない場合があります。

重要なのは、形式だけではありません。

画像の縦横サイズ

圧縮率

ファイルサイズ

表示される場所

画質

画像の内容

これらを含めて判断する必要があります。

画像形式よりも重要なこと

Webサイトを軽くするために、WebPやSVGを使うことは有効です。

ただし、画像形式だけを変更しても、十分な改善にならない場合があります。

例えば、ファーストビューに非常に大きな画像を何枚も使用していたり、表示していない画像まで読み込んでいたりすれば、サイトは重くなります。

画像を最適化する際は、次の点も確認する必要があります。

必要以上に大きな画像を使用していないか

画質を高くしすぎていないか

同じ画像を重複して読み込んでいないか

スマートフォンでも大きな画像を読み込んでいないか

不要な画像を配置していないか

WebPに変換しただけで安心するのではなく、画像の使い方そのものを見直すことが重要です。

まとめ

WebPとSVGは、それぞれ得意な用途が異なります。

写真や複雑な画像にはWebP、ロゴやアイコンなどの図形にはSVGを使用するのが基本です。

WebPは、写真の画質を保ちながらファイルサイズを軽くしやすく、Webサイトの表示速度改善に役立ちます。

SVGは、拡大や縮小をしてもぼやけにくいため、ロゴやアイコンをきれいに表示できます。

ただし、画像形式を変えることだけが最適化ではありません。

元画像のサイズや圧縮率、表示場所まで含めて調整する必要があります。

画像形式に迷ったときは、まず次の基準で判断するとよいでしょう。

写真ならWebP。

ロゴやアイコンならSVG。

この基本を押さえるだけでも、Webサイトの画質と表示速度を両立しやすくなります。