Webの画像形式を徹底解説！5つの基礎とその特徴

Web上で扱える画像についての基礎知識　

まずはWeb上で扱える画像についての基礎知識についてご紹介します。　

適切な画像形式選びに必要な知識ですので、しっかりおさえておきましょう。

ファイルの拡張子とは　

拡張子とはファイル名に付いている『.（ドット）』以降の文字列のことで、ファイルの形式を表しているものです。　

拡張子は画像ファイルだけではなく、テキストファイルなら.txt、Wordのファイルは.doc、音楽ファイルは.mp3になり、拡張子を確認すればファイルの形式が判断できます。　

拡張子は自分でもファイル名変更で変えられるのですが、拡張子を変更するとファイルが使えなくなってしまうので注意しましょう。　

画像の形式を変更したいときには、専用のツールを使ってファイルを変換してください。 　

ラスター画像とベクター画像　

画像データは、構造の違いからビットマップ形式とベクター形式という2つに分類されます。

【ビットマップ形式】　

ビットマップ形式は、ピクセルと呼ばれる小さな点がたくさん集まってできている画像です。　

豊富な色数で表現されるため、グラデーションや写真などのきめ細やかな表現が可能になります。　

ただし、画像を拡大すると構成している点が大きくなりぼやけて画質が荒くなってしまうため、用途によって使い分けて適切に使いたい形式です。　

ビットマップ形式の画像：JPG・PNG・GIFなど　 　

【ベクター形式】　

ベクター形式は、点や線、塗りなどの画像情報を数値で表現し、その数値をコンピュータが計算して画面上に描写する画像です。　

画像を拡大しても数値を再計算して表示してくれるので、画質が荒くならず美しく表示されます。

しかし画像情報を数値化するため、写真のような色数が多く複雑な画像を表現するには向いていません。　

色数が少ないアイコンやロゴマークなどに最適な形式となります。　

ベクター形式の画像：SVG・WebPなど　 　 　　

画像を拡大するとビットマップ形式は画像がぼやけてしまい、ベクター形式は画質が荒くならず表示されるため、違いがひとめでわかります。

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

データサイズを小さくして保存することを圧縮と呼び、圧縮方法には『可逆圧縮』と『非可逆圧縮』という2つの方法があります。　

2つの大きな違いは、圧縮前のデータと圧縮後に展開したデータが一致するかどうかです。

【可逆圧縮】　

可逆圧縮は、画質を落とさずに圧縮前のデータに戻せる圧縮方法です。　

画像以外だとZIP形式の圧縮はこの可逆圧縮が使われています。　

可逆圧縮は圧縮率が低く、あまりデータサイズを小さくできません。　

可逆圧縮の画像：GIF・PNGなど 　

【非可逆圧縮】　

非可逆圧縮ではデータを効率良く圧縮して容量を小さくするため、可逆圧縮よりもデータの容量を小さくできます。　

ファイルサイズを圧縮する際に人間の感覚に伝わりにくい部分を削っているため、あまり劣化を感じません。　

しかし圧縮を繰り返すとそのたびにデータを削って保存していくため、どんどん画像が劣化していきます。

画像を閲覧したり、コピーを作成するだけでは劣化しません。　

Photoshopなどの画像加工ソフトで開いたのちに『上書き保存』や『別名で保存』をすると非可逆圧縮で保存されるため、保存のたびに画質が劣化するので注意が必要です。

非可逆圧縮の画像：JPG・WebPなど

Webで扱える画像形式5つの特徴やメリット・デメリット　

それでは、Web上で扱える基本的な5つの画像形式の特徴やメリット・デメリットをご紹介します。　

先ほどご説明した画像の基礎知識と合わせて、ご確認ください！

JPG（ジェイペグ）　

• 拡張子：.jpgまたは.jpeg
• 色数：約1,677万色
• 圧縮方式：非可逆圧縮
• 主な使い方：多くの色を使う写真・グラデーションや複雑なイラスト　

一般的に使用されているビットマップ画像の形式で、iPhoneなどのスマホのカメラやデジカメで撮影した画像は基本的にこの形式で保存されます。　

表現できる色数が約1,677万色と豊富なため、写真など色数の多い画像に向いている画像形式です。

JPGには『.jpg』や『.jpeg』の拡張子がありますが、どちらも同じもので違いはありません。　

一般的には『.jpg』を使用することが多いため、迷ったら「.jpg」を選びましょう。　

【メリット】　

• 表現できる色数が約1677万色
• 写真などに向いている
• 圧縮してデータサイズを小さくできる
• PNGよりデータサイズが小さい 　

【デメリット】　

• 透過できない
• 非可逆圧縮のため上書き保存するたびに劣化する
• 文字などシャープさが必要な画像にはあまり向かない

PNG（ピング）　

• 拡張子：.png　
• 色数：約1,677万色　
• 圧縮方式：可逆圧縮　
• 主な使い方：ロゴやアイコン、背景透過の画像　

PNGは、JPGと同様の豊富な色数を表現できる形式で、写真やグラデーションなどに適しているビットマップ画像です。　

JPGとの大きな違いは、PNGは背景を透明にする透過処理ができる点になります。　

可逆圧縮の画像形式のため繰り返し上書き保存しても画質が劣化しません。　

PNGの中でさらに PNG-8・PNG-24・PNG-32という3つの種類があります。　

そしてこの中でPNG-24は、PNGの特徴である透過処理ができない形式なのです。　

PNG-8は透過処理が可能ですが、扱える色数は256色と少ないため注意しましょう。　

通常PNGと呼ばれるものは、色数約1,677万色で透過処理ができるPNG-32を指しています。　　 　

【メリット】　

• 表現できる色数が約1677万色（PNG-8以外）
• 背景を透明・半透明にする透過処理が可能（PNG-8・PNG-32）
• 可逆圧縮のため繰り返し上書き保存しても画質が劣化しない

【デメリット】　

• JPGやGIFに比べるとデータサイズが大きい
• 形式によって透過処理対応や色数が違う

GIF（ジフ）

• 拡張子：.gif
• 色数：256色
• 圧縮方式：可逆圧縮
• 主な使い方：単色など色数が少ないロゴやアイコン、短めのアニメーション

GIFは256色により表現されるビットマップ画像で、透過処理が可能な形式です。　

『アニメーションgif』と呼ばれるアニメーションを表現できるため、画像での動的表現に多く使われてきました。　

単色や色数の少ない画像ならファイルサイズが非常に小さくなります。

ただし、近年はディスプレイの解析度がどんどん高くなり、256色でしか表現できないGIFでは低画質のため使用される機会が減ってきています。　

【メリット】　

• データサイズが小さく軽い
• アニメーション表現が可能
• 透過処理が可能

【デメリット】　

• 色数が少ないため、写真やグラデーション表現には向かない
• 半透明はできない

SVG（エスブイジー）

• 拡張子：.svg
• 色数：約1,677万色
• 圧縮方式：非圧縮
• 主な使い方：ロゴやアイコン

SVGはJPG・PNG・GIFの3つと違いベクター形式の画像で、テキストエディタでコードを編集できます。　

画像を拡大しても数値の再計算によって美しく表示されるため、マルチデバイス対応しやすいのが特徴です。

数値で表現されているため、cssやJavaScriptで動的な変更を加えた表現が可能になります。　

扱える色数は1,677万色と豊富ですが、数値を計算する処理が必要なことから写真など色数の多い画像や複雑な図形には不向きです。　 　

【メリット】　

• 拡大表示しても画質が劣化しない
• 透過処理が可能
• cssやJavaScriptで動的に操作可能
• 繰り返し上書き保存しても画質が劣化しない
• GIFよりもデータサイズが小さく、とても軽い
• 文字などシャープさが必要なものに向いている

【デメリット】　

• 色数の多い写真や複雑な図形には向かない
• 写真をSVGにするとJPGよりもデータサイズが大きくなる
• 一部古いサーバーによっては使用できない可能性がある
• JPGやPNGで保存してしまうとSVGには戻せない
• SVGコードの知識が必要になる　 　

WebP（ウェッピー）　

• 拡張子：.webp
• 色数：約1,677万色
• 圧縮方式：非可逆圧縮
• 主な使い方：多くの色を使う写真・グラデーションや複雑なイラストなど。JPGやPNGをより軽量化したいとき

WebPは、Googleが開発した新しい画像ファイル形式のことです。

まだあまり一般的に使用されていませんが、2020年9月にiOS 14がWebPをサポートしたことにより、今後ますます使用されることが増えると考えられています。　

WebPは圧縮率が高く、データサイズを小さくして表示速度を速くするのが大きな特徴です。　

画質をあまり落とさずにJPGやPNGよりもデータサイズを小さくできるビットマップ画像になります。

透過処理が可能でアニメーションにも対応しているため、JPG・PNG・GIFのいいところ取りをしたようなメリットの多い形式です。　

これまでは用途や特徴によって画像形式を使い分けてきました。　

今後WebPへの対応ブラウザが増えて安定的に利用できるようになれば、WebPに画像形式を一本化できる可能性もあります。　

このことから今後の動向に注目していきたい画像形式です。　

【メリット】　

• 画質を落とさずにJPEGやPNGより軽くできる
• 非常にデータサイズが小さく、表示速度を速くできる
• 繰り返し上書き保存しても画質が劣化しない
• 透過処理が可能
• 非可逆圧縮と可逆圧縮の切替が可能
• アニメーション表現が可能

【デメリット】　

• ブラウザによってはまだサポートされていない　

用途に合わせて画像がさっと表示されるサイトを目指しましょう　

この記事でご紹介した画像の選び方を簡単にまとめると、以下のようになります。　

• 多くの色を使う写真やグラデーションならJPEG
• 背景を透明・半透明にしたい画像はPNG
• アニメーションを表現したいときはGIF
• ロゴなど単色で簡単な形の画像をマルチデバイスできれいに表現したいときにはSVG
• 今後主流になる可能性があり、表示速度を速くできる次世代画像形式のWebP

　 Webサイト上で扱う画像形式を選ぶときに大切なのは　

• なるべく画質を落とさない
• 表示速度を早めるためにデータサイズを小さくする　

この2点になります。

表示速度を上げるにはデータサイズを小さくしたいけれど、画質のクオリティを上げるに大きなデータサイズが必要になります。　

このように表示速度と画質のクオリティを両立するのはとても難しいため、サイトごとに最善のバランスを探りながら画像形式を適切に使い分けましょう。　

Webpの他にもAVIFなど新しい画像形式はどんどんと開発されています。　

ブラウザの対応状況やWebの動向をしっかりチェックして、用途に合わせた適切な画像形式を使い分けていきましょう！