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

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

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

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

• JPEG (ジェイペグ)
• GIF (ジフ)
• PNG (ピング)
• TIFF (ティフ)
• BMP (ビットマップ)

上の3つ(jpg、gif、png)は画像を圧縮してファイルサイズを小さくするファイル形式となり、下の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ほど高機能ではないが、簡単な透過にも対応。
今回のファイル形式の中では唯一アニメーションに対応しており、短い動画ファイルにも使用される。

SVG (エス・ブイ・ジー)

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

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

以上のような特徴があることから、メインビジュアルやバナーなど写真画像が入る場合はJPEG形式、ロゴやアイコンなどの小さいパーツはSVG形式、PNG形式、GIF形式の順で使うことが多いです。

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

画像の保存方法には大きく分けて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形式が現在の主流になっています。

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

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