Web制作で絶対覚えるべき画像ファイル形式の違いと特徴【JPEG, PNG, SVG】

現代において、ほとんどのWebサイトには画像が使用されています。
画像にはPNGやJPEGなど様々なファイル形式がありますが、画像ごとに適したファイル形式を正しく使用できているでしょうか？

画像のファイル形式とは、「画像をデジタルデータとしてどう保存するか」を表したものです。
拡張子とは、「.png」や「.jpg」など、ファイル形式を識別するためにファイル名の最後に付与されるものを指します。

Webサイト制作をする上で、画像のファイル形式に関する知識は必須です。
ファイル形式が不適切だと、見た目の品質を損なったり、容量が重くなり表示速度が低下してしまう恐れがあります。

この記事では、Webサイト制作で代表的に使用される、JPEG、PNG、SVGの３種の画像ファイル形式について、それぞれの特徴と適した使用方法を解説します。

JPEG画像の特徴

JPEGとは

JPEG（Joint Photographic Experts Group）は、写真などのカラー画像に最適なファイル形式の1つであり、Webページやデジタルカメラでよく使われる画像フォーマットです。ファイル名には”.jpeg”または”.jpg”の拡張子が付きます。

JPEG形式の画像は1,677万色のフルカラーに対応しており、色彩が豊かで細かいディテールを持つ写真などの保存に適しています。
写真など色数の多い画像を他のファイル形式より圧倒的に小さい容量で保存することが可能です。

これは、JPEGが画像を圧縮する際に、各ピクセルに含まれる色情報を適度に破棄する非可逆圧縮形式であるためです。
デザインツールなどからJPEG画像を書き出す際には、画像をどの程度圧縮するか、圧縮率を選択できます。

.jpegと.jpgの違い

JPEG形式のファイルには、「.jpeg」か「.jpg」の拡張子が付きます。
「.jpg」は「.jpeg」の略称であり、ファイル形式そのものに違いがあるわけではありません。

昔はファイル拡張子が３文字までという制限があり、略称である「.jpg」が使われていました。
技術の進歩により、４文字のファイル拡張子も使えるようになったことから、JPEGに関しても正式名称に則った「.jpeg」の拡張子が使われるようになりました。

JPEGに向いている画像

JPEGは色数の多い画像を圧倒的に小さい容量で保存できるのが最大のメリットです。
そのため、デジタルカメラで撮影された写真などの保存に向いています。

上の２つの画像は、同じ写真を異なるファイル形式で保存したものですが、見た目上の差はありません。
しかし、この例では、JPEGファイルの容量はPNGファイルの1/10程度まで小さくなっています。

画像ファイルの容量が大きいとWebサイトが重くなる原因になるので、写真には基本的にJPEG形式を使用しましょう。

使用上の注意

圧縮率を高くするほどファイルサイズは小さくなりますが、画質が目に見えて劣化してしまうことがあります。
JPEG形式で画像を保存する際には、画質とファイルサイズのバランスを上手くとりましょう。

また、JPEGは非可逆圧縮形式であることから、一度圧縮してしまうと元の画質に戻すことが出来ません。
そのため、JPEG形式への変換や圧縮は繰り返し行わず、可能な限り１回にとどめるべきです。

JPEGのデメリットとして、透明色を扱うことができません。
透明色を含む画像をJPEGに変換すると、透明の部分は白や黒で塗りつぶされてしまうので注意しましょう。

PNG画像の特徴

PNGとは

PNG（Portable Network Graphics）は、Web上で画像を扱うために開発されたフォーマットであり、Web上で多く使用されています。ファイル名には”.png”の拡張子が付きます。
JPEGと比較して、より高品質な画像を保持でき、透明色を表現することが可能です。

JPEGでは、各ピクセルに含まれる色情報を適度に破棄することで圧縮を行なっていましたが、PNGはピクセルごとの色情報を完全に保持するビットマップ形式です。
可逆圧縮な画像形式であり、何度保存し直しても画質が劣化しません。

JPEGよりも高画質になりやすいPNGですが、圧縮による容量削減効果はJPEGの方が優れています。

PNGに向いている画像

透過が必要な画像

PNGはアルファチャンネル（不透明度）をサポートしており、画像に含まれる透明色を表現することができます。
そのため、背景が透明の画像を、他の画像の上に重ねて表示する等の使用が可能です。

色の少ない人工的な画像

JPEGはその圧縮形式から輪郭がぼやけやすいという特徴がありますが、PNGは輪郭や色の境界をくっきりと綺麗に表現できます。
そのため、図形やロゴ、テキストを含む画像、色の少ないイラストなど、人工的な画像に向いていると言えます。

上の２つの例では、PNG画像の方が輪郭や色の境界がくっきりしていて綺麗に見えるでしょう。

使用上の注意

PNGに適した画像であっても、色数が多くなるほどファイル容量が大幅に増加してしまいます。

写真などをPNGにしてしまうと、簡単に数メガバイトを超えて読み込みが重くなるので注意が必要です。

もしもPNGにしたいけど、色数が多くてファイル容量が大きくなりすぎてしまう場合は、次世代フォーマットである「WebP形式」の使用を検討しましょう。
WebPに関しては以下の記事で詳しく解説しています。

SVG画像の特徴

SVGとは

SVGは、大きさを自由に変更できるベクター画像を表す「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略称です。ファイル名には”.svg”の拡張子が付きます。

PNGやJPEGなどのラスター画像（ビットマップ画像）は、ピクセルの集合で画像を表現するのに対し、ベクター画像は、任意の点や線の座標、色情報などを数式で表現します。
この数式の計算は画像サイズの変化に適応できることから、サイズを変更しても画質が劣化しない特徴があります。

SVGはXMLベースのフォーマット（HTMLに似たテキストベースのマークアップ言語）であるため、テキストエディターなどで編集することができます。
CSSで色を切り替えたり、JavaScriptで動的に図形を変化させるといった使い方も可能です。

SVGに向いている画像

SVGは、色数の少ない単純な図形（文字やアイコン、ロゴ等）の描画に向いています。
以下のようなSVGに適した画像であれば、ファイルサイズを数キロバイト以下という圧倒的な小容量に抑えることができる上、画質が一切劣化しません。

使用上の注意

複雑な画像には向かない

画質が劣化しないという魅力的な特徴を持つSVGですが、色のグラデーションや複雑な形状の表現には適していません。
写真や色数の多いイラストをSVGに変換すると、ファイル容量が莫大になってしまうため、使用するのは前述した「SVGに向いている画像」に限定するべきです。

テキストはアウトライン化が必要

テキストを含む画像をSVG化する場合は、そのテキストに使用されているフォントがデバイスに存在しない場合、違うフォントが適用されてしまいます。
そのため、テキストを図形に変換する「アウトライン化」をする必要があります。

XDを例に具体的に解説しましょう。

「ウェブスペ」の文字をSVGで書き出したいとします。この時、サイドメニューのレイヤーから分かるように、「ウェブスペ」の文字はまだテキストの扱いです。

変換したいオブジェクトを選択した状態で、command + 8 、または、上部メニューから「オブジェクト」→「パス」→「パスに変換」。

「ウェブスペ」の文字がテキストではなく、図形として変換されました。
これで、あとはSVG形式での画像書き出しを行えば、デバイスのフォントに依存せず、全デバイスで同じ見た目の画像を表示することができます。

一度アウトライン化してしまうと、テキストに戻すことは出来ません。
テキストをアウトライン化するのは、SVGなどの画像化させることが決まっているものに限定しておきましょう。

CSSでカラーを変更可能

SVG形式の画像は、CSSによって動的に色を変更することが可能です。

例えば、以下の星型のアイコンは通常時はグレーですが、マウスホバーすると色がイエローに変わります。

See the Pen SVGの塗りつぶし色をCSSで切り替える by iwa (@iwa0109) on CodePen.

詳しい実装方法は以下の記事で解説しています。

ファイル形式の変換や圧縮に便利な「Squoosh」

画像ファイル形式を変換したい場合は、「Squoosh」というオンライン画像圧縮ツールがおすすめです！

Squooshでは、ここでは紹介できなかったWebP形式への変換も可能な他、画像のリザイズや圧縮なども行えて、画像の品質を維持しながらファイルサイズを最小限に抑えることができます。

画像の軽量化は、Webサイトの読み込みを高速化する上で非常に重要なため、是非以下の記事を参考に、Squooshを有効活用してください。

Squooshは、SVGへの変換や、SVGから他のファイル形式への変換はできません。
また、SVGはリサイズや圧縮といった概念もないため、圧縮ツールなどでの軽量化は不要です。
SVGを使用する場合は、デザインツールに標準搭載された画像書き出し機能を使用しましょう。

まとめ：適切な画像ファイル形式を使用しよう

Webサイト制作で代表的に使用される、JPEG、PNG、SVGファイル形式について解説しました。
最後に、それぞれのファイル形式のメリット・デメリットをおさらいしておきましょう。

JPEGのメリット
・写真など色数の多い画像でも、容量を小さくできる
・圧縮率の変更で柔軟にファイル容量を調整できる

JPEGのデメリット
・透明色を表示できない
・圧縮を繰り返すと画質が劣化し、元に戻せない
・輪郭がぼやけやすい

PNGのメリット
・透明色を表示できる
・JPEGより基本的に高画質
・輪郭をくっきり表現できる

PNGのデメリット
・容量が大きくなりやすい
・圧縮による容量削減効果が薄い

SVGのメリット
・拡大や縮小をしても画質が粗くならない
・シンプルな図形の場合、容量を非常に小さくできる
・CSSで色の切り替えができる

SVGのデメリット
・形状や色彩が複雑な場合、容量が非常に大きくなる

今回紹介した画像ファイル形式以外にも、WebPという軽量な画像フォーマットも存在します。
比較的新しいファイル形式のため、非対応ブラウザなどの実装の手間はかかりますが、画像ファイル容量をかなり削減できるため、上手く使いこなせるとページのパフォーマンスがさらに高まります。