Webサイトに画像を入れるときに画像ファイル形式（png, jpg, webpなど）を選べばいいのか、ふと疑問に思ったことがある人は多いと思います。画像で使用できる拡張子・フォーマットの種類は複数ありますが、種類があるということはそれぞれ特徴があるということです。
どの画像が良いのか悩んでしまう時はフォーマットの特徴を理解することが必要です。この記事はそんな時に役立てられるよう、それぞれの画像形式の特徴についてのメモです。
拡張子・フォーマットとは
拡張子やフォーマットはファイルの種類のことを指しています。ファイル名に拡張子をつけることによってそのファイルがどのような形式のデータかを指定していることになります。
Webサイトを作るときに使われる主な画像ファイルは以下の拡張子です。
.png / .jpg(jpeg) / .gif / .webp / .svg
これらの他、まだあまり普及されていない AVIF というフォーマットもあります。
画像フォーマットは、できるだけ画質を落とさずにサイズを小さくするように作られています。またフォーマットにはそれぞれ性質があり、画像のタイプによって適切なものが異なります。
画質の良さとファイルサイズの大きさは比例しますが、フォーマットを変えることでサイズを軽減することが可能です。
Webサイトで意識したいのは可能な限りきれいな状態を維持してファイルサイズの小さい画像を使用することです。
それぞれの特徴からどの画像にどのファイル形式が最適かを考えて画像を設置していきましょう。
JPG（ジェイペグ）
Joint Photographic Expert Group（JPG）
主に写真画像に使われるのが jpg です。高精細・高品質な画像ファイル形式に bmp というものがありますが、このファイル形式は高品質ではあるものの容量が膨大なため、Webサイトで表示させるのには向いていません。
そこでより使いやすく、質をそこまで落とさず圧縮したファイルとして作ることができるようにしたのが jpg です。
bmp には画質が劣るものの扱える色数は多く、約1670万もの色を表現することができます。
容量が多い jpg 画像をさらに圧縮することでデータ容量を抑えることも可能ですが、圧縮では色の境目をぼやかしているので、あまり圧縮しすぎるとぼやけた画像になってしまうこともあります。
jpg は「非可逆圧縮」といって圧縮すると、その前のデータが消えてしまうファイル形式です。サイズを変更したり、保存するたびに劣化してしまうのも特徴です。圧縮前に元のデータもとっておいた方が安心です。
また jpg は背景の透過がされません。背景が透明で四角形ではない画像でも、 jpg で書き出すと四角形でその背景が白の画像データになります。
こういった特徴から色数の多い画像や写真に用いられる画像形式となっています。
拡張子として「jpeg」が使われることもありますが、「jpg」と機能面での違いはなくどちらを使っても問題ないそうです。
jpgは保存する際には「品質」（0〜100）が指定できます。これを画像の品質やサイズを見比べながら設定していきます。基準として75〜90くらいが目安です。
PNG（ピング）
Portable Network Graphics（PNG）
シンプルで色が少なめに作られる図やイラストに向いているのが png です。png も約1670万もの色を表現することができます。（png の種類によっては256色）
png は「可逆圧縮」で、データを変更しても元に戻すことができます。圧縮しても画質がきれいに保たれるのも特徴です。加工を何度も行う画像は png 形式にすることで画像の劣化を防ぐことができます。
jpg と違って背景を透明、半透明にすることもできます。
jpg に比べてファイルサイズが大きくなる傾向にあり、特に写真など情報が多いデータは容量が大きくなります。
png にはさらに種類があり、「PNG-8」「PNG-24」「PNG-32」と3種類あります。ざっくりですが以下の通り。
| PNG-8 | 色数は256色（8bit）でGIF並みのデータ容量のためサイズは軽い。透過は可能なものの少し荒くなります。 |
| PNG-24 | JPG並みのデータ容量（24bit分カラーが扱える）で透過はできません。 |
| PNG-32 | JPG並みのデータ容量＋透過可能（8bitの透明度情報）で、サイズは他2つと比べて大きくなります。 |
JPGとPNG−24の違い
jpg と同様のデータ容量で透過ができない「png-24」は実質 jpg と同じなのでは？という疑問も出てくるでしょう。違いは以下のことがあげられます。
- ファイル容量：色数の多い写真はJPGの方が軽く、シンプルなイラストなら png の方が軽い
- 画質設定：JPGは画質を細かく設定して軽くできる
- 圧縮：PNGは可逆圧縮なので何回保存しても劣化しない。（JPGは非可逆圧縮なので劣化する）
【PR】
GIF（ジフ）
Graphics Interchange Format（GIF）
gif は容量を小さく抑えたアニメーション表示もできるファイル形式です。アニメーションは無限にループされます。
色数は256色（8bit）までしか扱うことができないので、写真画像には向かず、色の少ない画像で使用します。
背景の透過は可能ですが、半透明にはできません。
png と同様「可逆圧縮」で、編集・保存しても画像劣化はしません。
gif が活躍するのは簡易的な動画・アニメーションを容量を抑えて表示したい時です。
ファイルサイズを小さくできるものの、同じ画像で比較すると png の方が軽いことが多いので容量削減だけで gif を使うことは少ないと思います。
WebP（ウェッピー）
webp はWeb上で使用する新しい画像ファイルとして Google によって開発されました。
webp は容量が小さく、透過処理ができることに加え、可逆・非可逆を選択することもできます。
また gif のようにアニメーション表示も可能です。
それぞれのファイル形式の良いところどりをしているフォーマットと言えますね。
数年前までは safari ブラウザが WebP に対応していませんでしたが、現在では最新バージョンであればほぼ全てのブラウザで表示することができます。
SVG（エスブイジー）
Scalable Vector Graphics（SVG）
svg はベクター画像で、画像を拡大しても画質が劣化せずきれいに表示されます。編集や保存による劣化もありません。
svg では一つの画像データでレスポンシブ対応も可能です。
画像のちょっとしたカラー変更などであればCSSで調整できるのも svg の特徴です。画像データの色数値を変更すれば、わざわざ画像編集ツールを使用せずとも変更できます。
ベクター画像はデータにある数式をコンピュータが処理してイメージを表示させています。単純な数式なら他の画像形式よりもデータが軽いですが、複雑で色数の多い画像は容量が大きくなってしまいます。
AVIF（エーブイアイエフ）
AV1 Image File Format（AVIF）
AVIFは、AV1 ビデオ形式に基づく最新の画像形式で WebP、JPEG、PNG、GIF といった現在普及しているフォーマットよりも圧縮率が高いフォーマットです。
アニメーションにも対応でき、GIFと比べてファイルサイズが小さく高品質に仕上げられるそう。透過処理が可能であったり、可逆・非可逆を選べたりと今までのフォーマットの良いとこどりをして改良されたフォーマットだと思います。
比較的新しいフォーマットのため、他の拡張子と比べると表示できるブラウザは少ないですが、最新バージョンのブラウザでは大体対応されています。
ビットマップ画像とベクター画像の違い
画像ファイル形式にはビットマップとベクターという種類があります。この2つの違いも覚えておきましょう。
ビットマップ画像
ビットマップ画像はピクセルという点の集まりで作られている画像のことを指します。
ピットマップ画像はピクセルごとに色情報があり、一点一点の色を変化させて色彩豊かな画像を作ることができます。
写真のように色数が多い画像でもきれいに表示させることができる一方容量が大きくなりやすいです。また、画像を拡大するとぼやけてしまったりする（画質が悪くなる）のも特徴です。
拡張子では png, jpg, gif, webp がビットマップ画像です。
ベクター画像
ベクター画像は線を数式化した画像です。コンピューターが数式を処理して形にして表示させます。
ビットマップ画像とは違い拡大・縮小しても画質は変わりません。そのため1つの画像を拡大・縮小して使用したい場合はこのベクター画像が向いています。
またイラストやアイコンなど比較的くっきりと色が分かれているような画像に向いているのも特徴です。写真のように色数が多く、輪郭がはっきりしない画像の場合はデータ容量が膨大になってしまうため向いていません。
拡張子では svg がベクター画像です。
Webサイト画像は軽くてきれいに表示されるものを選ぶ
Webサイトに載せる画像は、容量が軽くて画質の良いものが最適です。
きれいな画像の方が見やすくサイトの印象も良くなります。ですが画像の質ばかりにこだわって容量が大きくなり過ぎてしまってはサイトの読み込み速度が遅くなってしまうことも。
ページの表示速度が遅ければアクセスしてくれた人はすぐに離脱してしまうかもしれません。
画像ファイル形式の特徴を考えて、その画像が最も良い状態で表示される画像タイプを選んでサイトに設置していきましょう。
現段階での私の使い分けはこのような感じです。
写真は基本的に「jpg」。
写真以外のイラストなどで作成したものは「png」や「svg」。
写真とイラストが混じったものは実際の画像を見て最適な方を選択。
アニメーションをつけるなら「GIF」。
「WebP」や「AVIF」に対応できるならこれらを使用する。
カテゴリー : WEB全般
