画像ファイル形式は数十種類あり、圧縮の種類やフォーマット、ブラウザの対応状況によって異なりますが、一般的に最も使われているファイル形式は、SVGとPNGの2つの形式です。
この2つの形式は全く異なり、それぞれに適した用途があります。すべての面で互換性があるわけではないことは確かですが、特定の使用条件によっては、より一般的なPNGよりもSVGの方が向いている場合があります。
これから、SVGとPNGの違い、そしてサイトでのベストな適用方法を見ていきます。
SVGとPNGについて動画での解説もご用意しています。
SVGとは
SVGとは、スケーラブル・ベクター・グラフィックスの略で、ウェブ上で最も広く使われているベクターファイル形式です。この3つの組み合わされた単語をそれぞれ詳しく見てみましょう。
- スケーラブル:画質を損なうことなく、サイズの拡大・縮小が可能です。サイズの大小に関わらず、完璧な画質が保たれます。
- ベクター:ほとんどの画像形式には、ピクセルが含まれており、ベクターは、画像をリアルタイムでレンダリングし、画面に表示されるピクセルに変換するコードです。同じ画像が表示されていても、その背景で起こっていることは大きく異なります。
- グラフィックス:扱い方がやや異なるため、あまり知られていませんが、SVGはPNG、JPEG、GIFと類似した画像形式です。
ベクターとは、XMLで書かれたコードで、形状、線、色などを表現し、その仕組みを詳しく説明するものです。
コードだけでも問題なく画像を作ることができますが、たいていはInkscapeやAdobe Illustratorのようなベクターグラフィックエディターが使われます。また、PNGのようなラスター画像をSVGに変換することもできますが、適切に変換されない場合もあります。
ページが読み込まれると、コードがグラフィックに変換されるため、SVGとPNGをすぐに見分けることはできません。ですが、SVGは単にコードをピクセルに変換したものなので、画質を損なうことなく、大小さまざまな解像度に拡大が可能です。
SVGは、アニメーションと透過処理にも対応しており、汎用性の高いファイル形式です。
懸念点として、SVGはPNGのような標準的なファイル形式ほど広く普及していないため、古いブラウザやデバイスではサポートされていない場合があり、サイトにアップロードしても正しく表示されないことがあります。
SVGのメリット・デメリット
PNGのようなラスター画像ほどはまだ普及していませんが、ベクター画像は急速に普及しており、ラスター画像にはない大きな特長があります。その特長には、以下のようなものが挙げられます。
- 拡大・縮小が自由自在。どんな解像度でもデザインでき、画質を損なわず、ピクセル化することなく画像の拡大や縮小が可能。ラスター画像の場合は、あらかじめ必要なサイズを把握しておかないと、画像が大きくなりすぎたり、小さくなりすぎたりする可能性がある。
- 画質の劣化がなく、常に鮮明で美しい画像になる。ラスター画像の場合は、少しでもサイズを変更すると、ぼやけてしまうことがある。
- ただのコードで構成されているため、ファイルサイズは最小限に収まり、最適化されている。また、より扱いやすくするための最適化ツールもあり、これを活用することで、サイトの読み込み速度をより上げることが可能。
- PNGと違い、SVGはアニメーションに対応している。
SVGは、拡大・縮小可能であったり、よりファイルサイズが小さくなったりと、PNGに大きく優っていますが、すべてにおいて優れているというわけではありません。ベクター画像の欠点としては、以下が挙げられます。
- 最新の主要ブラウザではサポートされているが、古いブラウザやデバイスでレンダリングする場合、互換性の問題が生じる可能性がある。訪問者の多くがこのような古いバージョンのブラウザを使用している場合には、SVGへの切り替えが裏目に出る可能性も。
- 作成や編集には特別なプログラムが必要になるため、作業の難易度が上がる。XMLだけで設計することも可能だが、必ずしも実現可能というわけではない。また、Adobe Illustratorのような有料ツールは高価になる場合がある。
- PNGほど埋め込みが簡単ではない。WordPressを使用している場合は、デフォルトのメディアライブラリではサポートされていないため、アップロードするにはプラグインが必要。
- ページ読み込み時にブラウザでレンダリングを行う必要があるため、過剰に使用したり、多くのベクター画像を含む大きなファイルを使用したりすると、デバイスに負担がかかる恐れがある。
PNGよりもSVGを使用した方がいい場合
すべてのPNGをSVGに変換するべきではありませんが、一部の画像の代わりとして使用するのは非常におすすめです。
SVGは、ウェブサイトの装飾用画像、ロゴ、アイコン、グラフ、図、その他シンプルな画像に最適です。ベクターアートワークの優れた活用例として、Kinstaのホームページをご覧ください。
スクリーンショットや写真、細かいアートワークなどの多くの色や形を含む複雑な画像にはあまり向いていません。SVGに変換すること自体は可能ですが、何百色もの複雑なベクターは、ページ読み込み時にレンダリングする必要があるため、ブラウザがうまく処理できない場合があります。
また、SVG形式の画像は美しいですが、複雑な画像をデザインするには、多くの時間と労力、高度な編集ツールの習得が必要です。ベクター画像を作成する場合は、シンプルなものにすることを心がけましょう。
複雑な画像には、PNGを使用してください。
ただし、SVGは拡張性があり、画質の劣化がないため、レスポンシブウェブデザインや、Retina対応のウェブデザインには向いています。また、PNGはアニメーションに対応しておらず、GIF、APNG、WebPなどのアニメーションをサポートするラスター画像もそれぞれに欠点がありますが、SVGはアニメーションに対応しています。
アニメーション付きのシンプルなグラフィックで、画面サイズ問わず適切に表示されることがわかっている場合には、SVGを使用してください。
PNGとは
PNGはポータブル・ネットワーク・グラフィックスの略で、その名の通り、広く普及している形式です。PNGは、インターネット上でJPEGの次に最も使用されている形式であり、コンピュータを使ったことがある人なら誰でも扱ったことがあるでしょう。
PNGはラスター画像の形式で、一般的な画像形式と似ています。言い換えると、モニターやスクリーンに表示されるのと同じ小さなドット、ピクセルで構成されています。これは表示しやすい反面、画質が解像度、つまり何画素で表示されているかに影響を受けることを意味しています。
そのため、ラスター画像のサイズを拡大・縮小すると、画質に影響が出ます。特に縮小した場合は、画質の変化は無視できる程度のものである場合もありますが、画像がぼやけてしまい全く使えなくなる場合もあります。
それでもPNGの普及率を考えれば、汎用的に使用する画像形式として良い選択肢のひとつでしょう。PNGは透過処理に対応していますが、アニメーションには対応していません。
PNGのメリット・デメリット
PNGがインターネット上で最も普及している画像形式である理由は何でしょうか。PNGの特長には、以下が挙げられます。
- 一般的な画像編集ツールで簡単に編集して開くことが可能。PNG画像の作成や編集には、高度なプログラムを購入する必要はなく、必要になっても、GIMPのような無料のエディターをダウンロードする程度。
- ゼロからコーディングする場合でも、WordPressのメディアマネージャを使用する場合でも、サイトへのPNG画像の挿入が簡単。
- PNGは可逆圧縮を採用しているため、非可逆圧縮のJPEGよりも鮮明な画像になる。しかしその結果、ファイルサイズが大きくなるため、ベクター画像にはかなわない。
一方、PNG形式は数十年前に作られた形式であり、現在もアップデートされていない欠点があります。
- 画質を落とさずにサイズを変更することができない。ラスター画像をデザインする際には、慎重に計算し、適切なサイズにしなければ、使い物にならない画像になってしまう。
- 可逆圧縮のため、ファイルサイズが非常に大きくなり、サイト速度の低下につながる。これを解決するには、さらに圧縮して画質を下げる必要がある。
- Retina対応にするには、PNG形式では面倒で、ぼやける可能性もある。
- アニメーションに対応していない。例えばGIFのような他のアニメーションラスター画像には、超低品質で、256色しかサポートしていないなどの無視できない問題がある。
SVGよりもPNGを使用した方がいい場合
汎用性が高く、あらゆる状況に対応しているのが、PNGが最も一般的な画像形式である理由です。ただし、ファイルサイズが大きい、拡張性に乏しいなど、使用する上で考慮すべき欠点がいくつかあります。
PNGは、細かい画像やアートワーク、写真など、ベクター画像では扱えないものを表示するのに適しています。何百色もの色を使い、大きな解像度を持つ画像には、PNG形式がいいでしょう。
ロゴや装飾的なグラフィックなどの象徴的な画像にはPNGを使えないということではありませんが、SVGの方が適しています。
使用したいプラットフォームが、PNG形式に比べると新しく、普及率の低いSVG形式に対応しているかどうかがわからない場合には、念のためにPNGを選択することをおすすめします。
例えば、ほとんどのSNSにはSVGをアップロードすることはできません。また、メールソフトによってはベクター画像を扱えないものもあるため、メールテンプレートには、基本的にPNGを使用することをおすすめします。
一般的に、PNGは複雑な非アニメーション画像、特に透過が必要な画像と相性抜群です。時にはSVGの方が適している場合があるというだけで、ほとんどどこでも使うことができます。
SVGの読み込みに失敗した際には、いつでも予備のPNGを使用できるため、ユーザー基盤の大部分が古いデバイスやブラウザを使用している場合であっても、ベクター画像を選ぶのが得策です。
SVGとPNGはどちらが優れているのか
どちらのファイル形式が良く、どちらのファイル形式が悪いということはなく、どちらにも制約があります。SVGはいくつかの面でPNGより優れていますが、特定のものの処理では、PNGに軍配が上がります。
とはいえ、一般的には、適切な場面ではSVGを使用し、SVGでは対応できない場面ではPNGを使用することをおすすめします。どちらの形式を使ってもいいですが、特定の条件下においては、SVGが望ましいということです。
SVGはアニメーションに対応していますが、PNGは対応していません。この代用として、GIFやAPNGのようなラスター形式は使用できますが、広く普及し、多くのプラットフォームでサポートされ、高画質で、ファイルサイズが小さい、完璧なアニメーション用のラスター形式は今のところ存在しません。一方で、SVGはこのすべての要素を満たしています。
また、SVGはどのような画面サイズにも完全に対応するため、デフォルトでレスポンシブ、Retina対応になっています。PNGはサイズを変更すると画質が落ち、スムーズに拡大・縮小ができないのは厄介です。特に、大きな画面ではうまく表示されないような小さな画像しか持っていない場合は、なおさらです。
最後に、SVGは一般的にPNGよりもサイズが小さいため、読み込み時にレンダリングが必要になるにもかかわらず、サーバーへの負荷が少なくなります。
SVGは、シンプルで色数の少ないアートワーク、ロゴ、サイトの装飾的なグラフィックなどに使用してください。
一方、PNGは複雑なグラフィックを大きな解像度で表示したり、何千色もの色を使った写真を表示したりするのに向いています。今のところ、SVGはそのような量の色や形を処理することができません。
このような複雑な画像は、サイト上の画像の大半を占めるため、まだPNGを手放す時ではありません。
そして、ブラウザや、メールソフトなどの特定のプラットフォームでは、PNGの方が広くサポートされています。SVGが正しくレンダリングされるかどうかわからない場合は、慎重にPNGを使用してください。
まとめ
SVGとPNGは全く異なるファイル形式です。結局のところ、ニッチな使用状況を除いて、サイトでPNGとJPEGのどちらを使うかは大した問題ではありませんが、SVGとPNGのどちらを選ぶかは、非常に重要な選択です。
PNGは、シンプルでアクセスしやすく、汎用性の高いファイル形式であるため、PNGを使用する頻度の方がはるかに高いでしょう。スクリーンショットや凝ったイラストなどの複雑な画像は、PNG形式を使用してください。
SVGは作成と編集が難しい反面、PNGと比べて様々な利点があります。装飾的なグラフィックやロゴなど、ベクター画像を使用することが適切な場合には、必ずSVG形式を使用してください。
サイト上のすべての画像をSVGに置き換えることはないかと思いますが、レスポンスの良さとファイルサイズの小ささから、特定の状況下ではSVGが最適な形式になります。
あなたはSVG派ですか？それともPNG派ですか？以下のコメント欄でぜひ意見をお聞かせください！
コメントを残す