.pngと.jpegの違い。最適な保存形式を選択しよう！

画像データの保存時、保存形式は何となくで決めていませんか？

静止画で代表的な「PNG」と「JPEG」形式ですが

今回はそれぞれの異なるメリットデメリットを紹介します◎

保存形式に違いがある理由

画像データは作成したそのままだと膨大なデータ量になってしまう為、

圧縮しなければなりません。

PNG、JPEGの違いを大まかに説明すると、その圧縮の仕方の違いです。

圧縮の仕方により「出来る事」「得意な事」が変わってきます。

PNGの得意不得意

PNG形式は「同じ色のビット(画像を構成する点の事)」を一つのくくりとして

圧縮保存する形式です。

イラストなど色の違いがはっきりしている画像の圧縮は得意ですが、

写真のようななだらかな色の変化がある画像は苦手としており

ファイルサイズが大きくなりがちです。

PNGにしか出来ない事

また、JPEGには出来ずPNGにだけ出来る大きな機能として挙げられるのが

「透過処理が出来る」という点！

アイコンやロゴ、キャラクターの画像など、画像本体部分だけ表示させたい時

背景の白い部分を透過した状態で保存が出来ます。

(ロゴ画像は出来るだけ透過処理を行ったPNG形式で欲しい！と思うのは制作あるあるなはず)

JPEGの得意不得意

画像データには表面上には出てこないデータが多く含まれており、

これがファイルサイズが大きくなる原因となっています。

その、表面上に出ないデータを出来るだけ削除・圧縮を行う形式がJPEGです。

PNGとは逆に

イラストのような色の違いがくっきりした画像は不得意で、

色の境界線にノイズが走る事もあります。

一方、写真のようななだらかな色の変化の表現が得意で、

同じ画像を圧縮した場合のサイズはPNGよりも小さくする事が可能です。

JPEGの注意点

保存をする度にデータを削除していくので、保存を重ねると画質が荒れていきます。

SNSなどで同じ画像なのに人によって画像が良かったり悪かったりしているのを見たことはありませんか？

あの現象は、人がアップロードしたJPEG画像を他の人がダウンロードして保存、

さらに他の人が保存…という行為を繰り返した結果になります。

PNGとJPEGの使い分け

保存形式を選ぶ際は、以下の手順を追う事で最適な方法を選べるでしょう◎

まとめ

「保存形式なんて見た目の問題じゃない？」と思われるかも知れませんが

特にWeb上での表示となると

ファイルサイズの違いが表示速度に影響し、サイト自体の評価にも関わります。

「画質が良いからとりあえずPNGで」ではなく

写真は必ずJPEGで保存し、

透過処理が必要なもの・ロゴはPNGにするといった使い分けが大切です！

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。