COLUMN コラム

みなさんは画像を書き出しする際、保存方法はどうしてますか？

今回はJPG、GIF、PNG、SVG、WebPの各ファイル形式の違いをご紹介します。

1.JPGについて

JPGって？

JPEGとは、静止画像のデータ圧縮形式の一つ。フルカラーの画像を多少の劣化を伴いながら高い圧縮率で符号化できるのが特徴で、写真など自然画像の記録に向いている。ファイル名の標準の拡張子は「.jpg」あるいは「.jpeg」。

引用元:IT用語辞典e-Words/JPEGとは

JPGのメリット

フルカラー1677万色で表示できるため、写真の色がきれいにでます。

JPGのデメリット

非可逆圧縮の性質上、圧縮するたびに画質が劣化します。
そのため複数回にわたって編集が必要なものはJPGじゃないほうがよいと言えます。

2.GIFについて

GIFって？

GIFとは、画像データを圧縮して記録するファイル形式の一つ。256色までの画像を無劣化（lossless）で圧縮することができ、図やイラストなどの画像に向いている。ファイル名の標準の拡張子は「.gif」。

引用元:IT用語辞典e-Words/GIFとは

GIFのメリット

色数が限定されている為、軽いです。
色数は256色がmaxなので、アイコンやボタンデザインなど色が少なくてすむパーツの書き出しに適しています。

軽いので簡単なアニメーションも作成可能です。

GIFのデメリット

メリットでもありますが、色数が少ないことがデメリットです。

3.PNGについて

PNGって？

PNGとは、画像データを圧縮して記録するファイル形式の一つ。フルカラーの画像を無劣化（lossless）で圧縮することができ、図やイラストなど向いている。ファイル名の標準の拡張子は「.png」。

引用元:IT用語辞典e-Words/PNGとは

PNGのメリット

・可逆圧縮なので、劣化せずに保存のし直しができます。

・背景の透過ができます。

・ベタ塗りのイラストなどは高画質で軽い画像に保存ができます。

・色数が選べます。
PNG-8：GIFと同じ256色
PNG-24：フルカラー1677万色可能

PNGのデメリット

写真の画質が高くなるので、重くなってしまいます。風景や人物などの色が多い写真はJPGで書き出したほうが無難です。

4.SVGについて

SVGって？

SVGとは、XMLの記法を用いて画像を図形の集合として表現する記述言語の一つ。2次元のベクター形式の画像ファイル形式の一つでもあり、ファイルに保存する場合の標準の拡張子は「.svg」。

引用元:IT用語辞典e-Words/SVGとは

SVGのメリット

上記３つのファイル形式に対し、SVGはベクターデータです。
拡大しても劣化がなく、きれいに表示ができます。

パスで作成したアイコンやロゴなどに適しています。

SVGのデメリット

写真には使用できないため、使用は限定的になります。

5.WebPについて

WebPって？

WebPは、Web上の画像に優れた可逆および非可逆圧縮を提供する最新の画像形式です。WebPを使用すると、WebマスターとWeb開発者は、Webを高速化する、より小さく、よりリッチな画像を作成できます。

WebPロスレス画像は、PNGと比較してサイズが26％小さくなっています。WebPの不可逆画像は、同等のSSIM品質インデックスで同等のJPEG画像よりも25〜34％小さくなり ます。

ファイルに保存する場合の標準の拡張子は「.webp」。

引用元:Google Developers

WebPのメリット

・とても軽く保存ができます。

・背景透過が可能です。

WebPのデメリット

IE以外の主要ブラウザには対応しているものの、画像編集ソフトからは書き出しができません。

書き出しは以下の手順で可能です。
・編集ソフトからJPG、PNGなどで保存する・
・Squooshに保存した画像を入れて、保存形式「webp」を選択する。

おわりに

今回はJPG、GIF、PNG、SVG、WebPの違いや使い方について紹介致しました。
きれいで出来るだけ軽い保存方法を心がけていきましょう。

弊社では士業やメディア、医療関係の制作実績もありますので、Webサイトについてお悩みがある方は、お気軽にお問い合わせください。