画像がギザギザして不鮮明な理由

ギザギザで不鮮明なロゴ

下のYahooロゴのように、アイコンや画像がギザギザしているウェブサイトを見たことがある人は多いと思います。

特に高画質表示に対応しているパソコンやモバイル端末を使用している場合は、遠目にも不鮮明さやギザギザが目立ちます。

ロゴ以外でもイラストや見出し文字などがギザギザしている場合がありますが、どちらの場合もプロフェッショナルには見えません。

この原因は画像フォーマットにあります。

よく使われる画像フォーマット

多くのウェブサイトで使われる画像やイラストのフォーマットにはGIF、JPG、PNGの3つがあります。

GIF

GIFは"Graphics Interchange Format"の略で、その特徴はファイル容量が軽いことです。

色数が最大256色しか使えないという制限があるので、写真などの表示には向きませんが、色数の少なくてよいボタンやアイコンにはよく使われていました。

後述のPNGと同じように背景の透過処理も可能です。

今でもSNSで見かけるパラパラ漫画のような動画でよく使われています。

JPG

JPGは"Joint Photographic (Experts) Group"の略で、色数の多い写真の保存に向いており、スマートフォンで撮った写真は基本的にこのフォーマットで保存されています。

写真以外にもJPGが使われるケースは多く、もっとも一般的な画像フォーマットとして広く採用されていますが、画像圧縮時に画像劣化が起きます。

PNG

PNGは"Portable Network Graphics"の略で、イラストの保存によく使われます。

「透過」といって背景を透明にすることが可能で、また保存を繰り返しても劣化しない可逆圧縮という特徴があるものの、画像の種類によってはJPGと比べてサイズが大きくなる傾向があります。

ウェブサイトが安っぽく見える

ウェブサイトの画像には長い間これら3つの保存形式が使われてきました。

今でも広く使用されていますが、場合によってはこれら以外の保存形式がベターなケースがあります。

それは、これらの画像フォーマットはどれも拡大するとギザギザなところが見えてくるからです。

それはビットマップデータ方式という画像を小さなビット（ピクセル）で描写しているからで、ロゴマークのように比較的大きくて、目につきやすい所に設置された画像でよく目立ちます。

ギザギザ画像や画質の低い画像の問題は、そのホームページ全体が安っぽく信頼性が低く見えてしまうことです。

この問題の解決のために使われるのがSVGフォーマットです。

SVGの特徴

SVGは"Scalable Vector Graphics"の略で、ベクター方式で保存されたフォーマットのことです。

ビットマップデータ方式との最大の違いは拡大をしてもギザギザがまったくあらわれず、なめらかなまま表示できる点です。

例えば当サイトの左上のmonoteinロゴもSVGなので、いくら拡大をしても滑らかなままです。

SVGでは画像のデータを計算式として保存しており、色や曲線を計算で導き出して表示するので、どれだけ画像を大きくしてもその都度サイズに合う画像が計算されてなめらかなまま表示されるのです。

SVGはJPGやPNGなどよりも新しいフォーマットですが、パソコンやデスクトップ端末の高画質が進んでギザギザしたロゴやアイコンがかつてないほど目立つようになり、実際に多くのホームページのブランド価値を毀損している状況なので、SVGへの置き換えを進めていくことが大切です。

SVGのメリット

SVGを使う最大のメリットは、スクリーンサイズを問わずに高画質表示が可能なことです。

2つ目のメリットはSVGはファイルサイズが非常に小さいことです。

データが計算式として数字で保存されているので、データ容量が小さくて済むのです。

それ以外にも色やサイズの変更が後から可能なこと、アニメーションや透過処理が行えることなどもSVGもメリットです。

SVGのデメリット

SVGは写真のように色数が多く、複雑な形の曲線が多く使われているものの描写には向いていません。

これは前述の通り、SVGでは計算式によって画像を表示しているためで、描写が複雑になるほど計算式も複雑化してしまうためです。

JPG、PNG、SVGそれぞれに最適な使い道があり、すべての画像をSVGで置き換えられる訳ではないことに注意しましょう。

もし写真などの画像を使う場合は、JPG形式の画像を使うと重すぎます。

従来はWEBP形式に変換して使うことが推奨されていましたが、今ではさらに新しいAVIF形式が登場しているので、PNGやJPG画像はAVIF画像で使うようにしましょう。

くわしくは次の記事をご覧ください。

SVGのユースケース

ホームページの中でも大きく、目立つ場所に使われるロゴにはSVGを使用した方がいいでしょう。

またアイコン画像にSVGを使用できるケースも多くあります。

前述の通りSVGはその性質上、複雑な形やグラデーションの描写が苦手です。

ロゴの中にはSVG化するのが難しい複雑なデザインもありますが、デバイスの高画質化が進み、ロゴの表示にPNGやJPGを使用するのが不適切なケースは多くなっています。

なのでロゴをデザインする段階で、SVG化することを前提としたシンプルなロゴを作成することも重要です。

SVGの作り方

SVGはAdobe Illustratorをはじめとするイラスト編集ソフトによって作成できます。

CSSを使った描写も可能で、CSSと合わせるとアニメーション機能も付加できます。

一番いいのはデザイナーなどに依頼をして作ってもらうことですが、自分で作りたい人は下記サービスがSVGでの書き出しに対応しています。

• https://vectr.com

• https://figma.com

サイト上のSVG画像をコピーする方法

サイト上のSVG画像は、通常その画像の上で右クリックをして「画像を保存」を選べば保存できます。

しかしこの方法が使えないケース（<img/>タグを使わず、SVGを直接埋め込んでいるケースなど）もあり、その場合は次のようにします（ここではGoogleクロームの使用を想定）。

---

A. 画像の上で右クリックして「検証」をクリック

B. 画面右部（もしくは下部）に開いた開発者ツールのコードの中から<svg...で始まるコードを選択し、右クリックで「Copy(コピー)」→「Copy element(要素をコピー)」をクリックして、<svg...全体のコードをコピーする。

C. Macユーザーであれば「テキストエディット」などの.txt形式で文章を保存するアプリを開き、そこに今コピーした<svg...コードを貼り付ける。

D. ファイルを保存する。保存後、そのファイルの拡張子を.txtから.svgに変更する。

---

これでSVG画像を保存できます。

ロゴやSVG画像のコピーにあたっては著作権などに注意しましょう。

SVGを最適化する

基本的にSVGはPNGやJPG形式よりも軽くなっていますが、不要なデータが含まれている場合もあります。

そのようなデータを削除して、SVGをより軽量化するためのサービスには以下のようなものがあります。

• SVGOMG

なおSVG画像によっては最適化で画像の崩れなどが発生するケースがあるので、最適化後は一度確認してから使うようにしましましょう。

積極的にSVGを使う

SVGの「高画質でありながらサイズが小さい」という特徴は、そこだけ見るとSVGがJPGやPNGより優れているように見えてしまいますが、前述の通り、それぞれのフォーマットに最適な使い道があることに注意してください。

どの保存形式を使うかはケースバイケースで、その画像に応じて決めていく必要があるのです。

とはいえ、多くのウェブサイトでSVGを採用できるにも関わらず依然としてPNGやJPG形式が不適切に使われ、ギザギザのロゴやアイコンが目立ち、ホームページ全体の価値を大幅に低下させてしまっているのも事実です。

これはウェブサイトの見た目のみならず、ウェブサイトのパフォーマンスにも影響します。

ファイルサイズがSVGよりも重いJPGやPNGを使うと、ページ表示に時間がかかるようになり、これはページ表示に3秒以上かかると53%のユーザーは離脱するという現代のスピード優先のビジネス環境では大きな問題となります。

SVGが使用できるところには積極的に利用をし、ホームページをどのデバイスでもスピーディー、かつ美しく表示できるようにすることが大切です。