PNG・JPG・GIF…Webで使える拡張子の違いとは？

コーディング

コーディング基礎

コーディングをするために画像を書き出すとき、PNG、JPGどちらで書き出したら良いのか迷うことはありませんか？
他にもGIFやSVG、BMP…どこにどれを使えば良いか迷ってしまいますよね。
今回はそれぞれの拡張子の特徴と違いについて解説していきます！

それぞれの拡張子の特徴

JPEG / JPG

一番使う頻度が高いと言っても過言ではないのは「JPEG / JPG」の拡張子だと思います。
JPGとはフルカラーに対応した非可逆圧縮の画像フォーマットです。
非可逆圧縮とは、圧縮の際にデータが劣化してしまうため圧縮したデータを元に戻したい時に戻すことができない圧縮方法です。

ファイルサイズが小さくできる反面、圧縮の際に劣化してしまうため画質は元のファイルより悪くなってしまうデメリットがあります。
また、保存をするたびに劣化をしてしまうため、なるべく保存する回数は最小限にし、トリミングなどに修正が必要な場合は元のデータを修正した後に書き出し直す方が良いです。

PNG

透過をさせたいときは「PNG」で書き出すことが多いのではないでしょうか。
PNGとはフルカラーに対応した可逆圧縮の画像フォーマットです。
JPGの非可逆圧縮とは反対に、可逆圧縮は圧縮したデータを元に戻す時に完全に元通りに戻すことができる圧縮方法のことです。

実はGIFの代替えとして誕生した拡張子で、圧縮率はGIFより良いですが、JPGよりは劣ります。
透過させることはできても、GIFのようなアニメーション機能をつけることはできません。

GIF

PNGと同じく、可逆圧縮の画像フォーマットです。
PNGと違う点は、PNGがフルカラーに対応しているのに対し、GIFは256色のみ対応しています。
対応している色が少ない反面、画質の劣化がないため、単純なイラストに向いています。
GIFも透過させることができ、複数コマを結合したアニメーションを作成することもできます。

SVG

これまで紹介してきた内容とは異なり、XMLで記述するベクターデータの画像フォーマットです。
ベクターデータのため、拡大・縮小をしても画像の劣化がなく、図形やアイコン、文字を画像で置きたい時に良いフォーマットです。
書き出しを工夫することでJavaScriptで手書き風のアニメーションをつけるような制御を行うことが可能です。

BMP

あまり聞き慣れない拡張子、BMPとはフルカラーに対応したWindowsの標準ビットマップ画像のフォーマットです。
圧縮されることが少ないため、ファイルサイズが大きくなりすぎてしまいがちなため、Webサイトで使用されることはめったにありません。

Webで使うのに最適な使い分けとは？

画像形式の違いがわかったところで、Webサイトを作る時にどこにどの形式を使ったら良いのかに付いて解説いたします！

ロゴマーク

ロゴマークの画像にはPNGかGIFのどちらかの画像が良いと言われています。
配置する場所によって背景を透過させることができたり、画像の劣化が少ないためです。
PNGの方が色数が多い反面、容量が重くなってしまうため、色数が少ない場合にはGIFを使うなど作成するサイトに合わせて臨機応変に形式を使い分けることがお勧めです！

写真などの画像

サイトに掲載する画像は基本的にJPGとPNGの画像を使用します。
どちらにも良い点があるため、使い分けるとすれば写真などの色数が多く普通に見えれば良い画像はJPG、グラフなど色がはっきりしている画像はPNGにすることがおすすめです！
軽量だから透過させたい画像以外は全部JPGの方が良いのでは？と思うかもしれませんが、色数の少ない画像の場合はPNGの方が画質が良い&軽量になることもあります。

印刷する可能性のある画像

サイトに掲載する画像の中でも印刷する可能性のある画像や、印刷用素材として掲載する場合はPNGの画像にすることがおすすめです！
JPGは説明の中にもあったように保存するたびに劣化してしまうため、印刷や加工をすると粗くなっていってしまいます。
そのため、印刷をしそうなページに掲載する画像には注意が必要です！

合わせて知っておきたい！インターレースとは？

拡張子について調べているとたまに見かける「インターレース」とは、画像の表示形式のことを指しています。
ページの読み込み時(データの受信中)に粗い解像度の画像を表示させ、読み込みが進むにつれて徐々に高解像度の画像を表示させていきます。
画像サイズが大きい場合や、回線が低速な場合でも画像の全体像がわかる利点があります。
インターレースはGIF、PNGに使うことができ、JPGではインターレースに似た「プログレッシブJPG」を設定することができます。