HTMLでよく使う画像のファイル形式と特徴

Webサイトでよく使われる画像のファイル形式

コンピュータでよく使われる画像のファイル形式には次のようなものがあります。

主要な画像ファイルの形式

• WebP （ウェッピー）
• SVG （エス・ブイ・ジー）
• JPEG (ジェイペグ)
• GIF (ジフ)
• PNG (ピング)
• TIFF (ティフ)
• BMP (ビットマップ)

WebP （ウェッピー）

WebP（ウェッピー）は可逆圧縮と非可逆圧縮のいずれにも対応できる、2010年に登場した新しいファイル形式です。
JPEG、GIF、PNGを置き換えることを目指して開発されており、透過（アルファチャンネル）、アニメーション、ICCプロファイル、XMPメタデータに対応しています。

写真のような画像をJPEGと同じぐらいの圧縮比率で保存するとWebPの方がファイルサイズを抑えられます。
以下の3つの画像は1枚の写真についてJPEG、WebP（非可逆圧縮）、WebP（可逆圧縮）でそれぞれ保存したものになります。

写真のような色情報の多い画像では非可逆圧縮が有利ですが、JPEGとWebPで大体同じ程度の圧縮率にするとWebPの方がファイルサイズを抑えることができました。
画像を並べてみても、見た目はあまり違いはないことが分かります。

イラストなどPNGで保存するファイルに対しては、WebPの可逆圧縮で保存するとファイルサイズをより抑えられることがあります。

WebPは2022年8月現在は主要なブラウザは概ね対応しているため、よほどニッチなブラウザやIE対応が必須などのイレギュラーがない限りは対応状況を気にせずに使用することができます。

SVG (エス・ブイ・ジー)

拡張子：.svg」
カラー：約1,677万色 (24bitカラー)
圧縮方式：非圧縮
透過：対応（アルファチャンネル対応）
用途：ロゴ、アイコン、マルチデバイス対応が必要な画像

JPEG、PNG、GIFはピクセル単位で表現する「ラスター形式」であるのに対し、こちらはIllustratorのような「ベクター形式」。
よって、拡大しても劣化しないのでマルチデバイス対応が容易になり、テキストベースで保存するためファイルサイズも非常に軽く、主にロゴやアイコンに使われている。
計算して出力するため、フルカラー対応ではあるが色数の多い写真画像には不向き。

ベクター形式は拡大縮小してもシャギー（画像の線に出るギザギザ）が出ないので綺麗に表示されることから、イラストやアイコンはSVG形式で保存することが多くあります。
アニメーションにも対応しており、After EffectsなどでアニメーションのSVGを出力するとそのままHTMLに埋め込んで表示することができます。

その他のファイル形式

JPEG、GIF、PNGの3つは画像を圧縮してファイルサイズを小さくするファイル形式となり、下の2つ(tiff、bmp)は無圧縮なファイル形式となります。
無圧縮は生のデータをそのまま保存することができるメリットがありますが、裏を返すと容量が大きくなってしまうため、データサイズを可能な限り抑えたいWebサイトには向きません。

Webサイトへの使用に適した画像に絞ってみていきましょう。
上記の3つに加え、SVGもご紹介します。

JPEG (ジェイペグ)

拡張子：.jpg、または.jpeg
カラー：約1,677万色 (24bitカラー)
圧縮方式：非可逆圧縮
透過：非対応
用途：写真画像

フルカラーに対応し、非可逆圧縮による効率の良い圧縮ができるため、色数の多い写真画像に適したファイル形式。

PNG (ピング)

拡張子：.png」
カラー：約1,677万色 (24bitカラー)
圧縮方式：可逆圧縮
透過：対応（アルファチャンネル対応）
用途：ロゴ、アイコン、透過のある画像

GIFに代わるファイル形式として登場した比較的新しいファイル形式。
ロゴ、アイコン、色数が少なめの写真画像などに使う。
JPEG同様にフルカラーを扱うことができるが可逆圧縮のため、色数が多いとJPEGよりもファイルサイズが大きくなる。
透過を綺麗に表現することができ、透過度の異なるグラデーションを表現することも可能。

GIF (ジフ)

拡張子：.gif」
カラー：256色(8bit)
圧縮方式：可逆圧縮
透過：対応(1色のみ)
アニメーション：対応
用途：色数の少ないロゴ、アイコン、短いアニメ

扱うことのできる色数は少ないが、ロゴやアイコンなど色数の少ない画像を保存する場合にはファイルサイズを最小限に抑えることができる。
PNGほど高機能ではないが、簡単な透過にも対応。
今回のファイル形式の中では唯一アニメーションに対応しており、短い動画ファイルにも使用される。

それぞれのファイル形式では以上のような特徴があることから、メインビジュアルやバナーなど写真画像が入る場合はWebPやJPEGを使い、ロゴやアイコンなどの小さいパーツはSVG、WebP、PNG、GIFの順で使うことが多いです。
アニメーションはWebPやGIFを使い、アイコンなど小さい画像に動きをつけたいときはSVGを使います。

可逆圧縮と非可逆圧縮の違い

画像の保存方法には大きく分けてJPEGの「非可逆圧縮」と、PNGやGIFの「可逆圧縮」があります。
この2つの違いは、圧縮前のデータと圧縮・展開したデータが一致するか否かです。

非可逆圧縮は効率良くデータを圧縮し、ファイルサイズを抑えることができます。
しかし、圧縮を繰り返すとデータは劣化していきます。
次の写真画像は2枚ともJPEG形式ですが、1枚目は1度だけJPEGで圧縮した画像、2枚目はJPEGで10回圧縮した画像です。

見比べてみると、2枚目の写真画像は空の部分にムラが目立っていることが分かります。
ファイルサイズも1枚目は101,977バイト、2枚目が114,918バイトと約12%ほど大きくなりました。

続いて、これと同じことをPNG形式でも試してみます。

PNG形式では1回と10回を見比べても差はなく、ファイルサイズも両方とも245,531バイトと完全に一致します。

以上のように、非可逆圧縮と可逆圧縮では圧縮方法の違いから画像の劣化具合に差が出ます。
しかし、見た目が同じ写真画像でもJPEG形式(約101Kb)はPNG形式(約24.5Kb)より50%以上もファイルサイズを抑えることができており、見た目に影響がない範囲ではJPEG形式の方が圧倒的に効率が良いことも分かりました。

ラスター形式とベクター形式の違い

JPEG、PNG、GIFはラスター形式の画像、SVGはベクター形式の画像です。
この2つの違いは、ピクセル単位で描かれているか、パスで描かれているかの違いになります。

Adobeのソフトに馴染みがある方は直感的に分かりやすいと思いますが、Photoshopがラスター画像、Illustratorがベクター画像です。

次のような星の画像を、ラスター形式とベクター形式の2タイプ用意して拡大してみます。

ラスター形式の画像を拡大

ベクター形式の画像を拡大

拡大してみると歴然とした違いがあります。

さらに、今回の場合だとPNGで約10キロバイトだったのに対し、SVGは681バイトと、なんと約6.7%のサイズに収まっています。

SVG形式はAppleのRetinaディスプレイをはじめとした高解像度のデバイスでも画像が劣化せず、ファイルサイズも少ないので様々なデバイスを広くカバーすることが可能です。
そのため、色数が少ないロゴやアイコンなどはこのSVG形式が現在の主流になっています。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。