JPGとPNGは何が違う？どっちを使う？【WEBデザインの基本】

今回はWEBで使われるJPGやPNG、GIFなどの画像形式について解説していきます。

こういった、基本だけど意外と知らなかったり、時々見返したくなるWEBデザイン・制作の基本的な知識や方法について少しずつシリーズでまとめていこうと思います。

これからWEBデザインをはじめる方や、WEBのデザインや制作をする中でちょっと気になること、疑問が出たときなど、ぜひ参考にしてください。

そもそも画像の種類＝拡張子って？

そもそも画像って種類があったの？拡張子ってなに？という方はここから読むとわかりやすいです！

画像のファイル名を見ると、「○○.jpg」「〇〇.png」となっているかと思います。このドットの後に続くjpgやpngが拡張子で、画像の種類を決めるものです。

拡張子はファイル名のリネームで変えると開けなくなったりするので注意が必要です。

変更したい場合はが画像を書き出す際に画像形式を変更するか、専用のツール、サイトなどを利用するのがよいと思います。
参考にどうぞ↓

• PNG → JPG　https://png2jpg.com/ja/
• JPG → PNG　https://jpg2png.com/
• そのほか　https://www.aconvert.com/jp/image/

画像はどうして使い分ける必要があるのか

WEBで使う画像の拡張子はいくつかありますが、うまく使い分けられないと画像が重くなってしまったり、きれいに表示できなかったりします。

画像が重くなるとサイト自体も重くなっていきます。そうするとユーザーが思うように操作できなくてユーザビリティが悪くなったり、待ちきれずにサイトから離脱してしまったり、ということが考えられます。

適切な種類の画像を使うことで画像やサイトの容量を軽くすることもできますし、画像を圧縮（＝容量を軽くする）してもあまり画質を落とさずきれいなまま使用することができます。

WEBデザインで使用される主な画像の種類

今回は以下の画像形式について、WEBサイトでよく使われるものを中心に説明していきます。

• JPG
• PNG
• SVG
• GIF
• WebP

JPG

フルカラーの1677万色で表現される画像で、色数が多く繊細な表現ができます。
圧縮率が高く低い容量で使うことができます。
非可逆圧縮の画像のため、一度解像度を下げて保存すると元に戻せず、保存のたびに画質が落ちていきます。
透過はできません。

適しているもの：

• 写真
• 繊細な表現が必要な画像
• グラデーションの画像
• できるだけ軽くしたい画像

注意：

• 一度画質を下げると元に戻せないので元データは必ず取っておく
• 色数が少ないものなどは返って容量が大きくなることも
• 文字やベクターでできたものなどは逆に荒くなることも

PNG

PNGは透過が可能です。
可逆圧縮の画像のため一度低画質で保存しても元に戻すことが可能ですが、容量がは重めになります。
RGBでの表現のみなので、印刷物ではなくWEBでの使用に向いています。

PNGの中には3つ種類があります。
PNG-8　扱う色数は256色まででファイル容量が軽いのですが、若干グラデーションなどの表現が苦手です。透過もできます。
PNG-24　容量は重くなりますが、JPG同様フルカラーで1677万色を扱います。透過はできません。
PNG-32　PNG-24に透過情報を加えたものです。

適しているもの：

• ベクター画像
• グラデーション
• 透過画像
• 図やアイコン、ロゴ

注意：

• 印刷物には不向き
• 容量重くなる傾向

GIF

JPGやPNGとは少し異なり、簡単なアニメーションや動画に適した画像形式です。
色数が256色で繊細な表現には向きませんが、透過ができ、容量がとても小さいです。

適しているもの：

• 動画やアニメーション
• 透過

注意：

• 色数が少なくPNGやJPGに比べて画質は下がる

SVG

ベクター形式の画像。JPGやPNGはピクセルという点で表現されていますが、ベクターは点と線の数式で作られた画像です。
そのため、いくら拡大してもピクセルの画像のように荒くなることもなく、容量も比較的軽いです。

適しているもの：

• アイコン・図形など

注意：

• 写真のような複雑なものを表現するのには不向き

WebP（うぇっぴー）

Googleが開発した、容量は軽く、画質の劣化は抑えられた画像形式です。
非可逆圧縮で、透過もできます。
ただし対応ブラウザが限られているため、表示されないブラウザ用に代わりのJPEGやPNGの準備が必要になります。

最後に

WEBで使われる画像形式と適切な使い道について理解が深まったでしょうか？
用途に合った使い方ができると、サイトで軽くてきれいな画像を使うことができます。