JPEG・PNG・GIFの違いとは？広告運用者も知っておきたい、最適な画像ファイル形式の選び方

この記事は最終更新日から約6年が経過しています。

みなさんは広告の入稿で使用したり、ウェブサイトで閲覧している画像ファイルの形式についてどの程度ご存知でしょうか？Googleによればインターネットの画像トラフィックの96%は「JPEG」「PNG」「GIF」の3種類によるものとのことですし、広告の入稿画像もこの3種類がほとんどかと思います。

参考：画像の最適化 | Google Developers

では、この3種類の画像ファイル形式にはどんな違いがあるのでしょうか。入稿さえ可能であれば細かいことは気にしていないという方も多いかもしれません。しかし画像ファイル形式の知識が運用型広告の業務に役立つ場面は意外にあるものです。たとえば入稿しようとした画像のファイルサイズが規定より大きかった場合に安易にフリーソフトで圧縮し、ファイル形式を変えてしまっていませんか？気が付かないうちに、色味や画質を変えてしまっているかもしれません。

この記事では元ウェブデザイナーである筆者が、運用型広告の業務に関連がある情報に絞りつつ内容をわかりやすくする目的で簡略化しながらお伝えします。

※本記事では、あくまで画像ファイル形式のおもな特徴を解説することを目的としているため、技術的な面などで必ずしも最適解ではない場合がありますのであらかじめご了承ください。

画像は「軽くてキレイ」がベスト

当然ながら、画像ファイルはできるだけファイルサイズが小さくて高画質なものが良いですよね。どうせ同じ画像を見せるのであればできるだけキレイな方が良いですし、読み込み速度が早くて困ることはありません。反対に、画質が悪いうえに重くて読み込みに時間がかかる画像は百害あって一利なしです。逆に、肉眼では区別がつかないほどに画質にこだわり、必要以上にファイルサイズを肥大させてしまうことや、読み込み速度を追求するあまり劣化した画像ばかり掲載するも避けたいところです。

画像ファイル形式は適材適所で選択しよう

基本的には画質とファイルサイズは比例関係にありますが、実は画像ファイル形式を適切なものにするだけでファイルサイズをぐっと抑えられることがあります。反対に、画像ファイル形式が適切でないと画質が低いのにファイルサイズが大きな画像になってしまうこともあります。

冒頭でも述べたように、ウェブで使用される画像ファイル形式のほとんどは下記の３種類であり、それぞれ向き不向きがあります。これらを適切に使い分けることでより軽くてキレイな画像として保存することができます。

JPEG（拡張子・・・jpg、jpeg）
PNG（拡張子・・・png）
GIF（拡張子・・・gif）

「実写の写真」と「シンプルなイラスト」の2種類で比較してみましょう。

JPEG

JPEGは実写の写真のように、情報が複雑な場合に向いている画像ファイル形式で1600万以上の色を扱うことができます。情報が複雑とは、かんたんにいえば色の数が多いということです。スマートフォンで撮影した画像ファイル形式としてJPEGが利用されているのも、実写に適しているのであれば納得できますよね。

反面、シンプルなイラストや図やロゴのように色の数が少ない画像を保存する場合はPNGと比較して画質とファイルサイズの面で劣ります。画質については拡大してじっくり見ない限り気が付かないこともありますが、ファイルサイズでは倍以上の差になることも珍しくありません。また、背景の透過には対応していません。

ちなみに拡張子の「jpg」と「jpeg」に機能的な違いはありません。ただし拡張子が異なれば物理的には異なるファイルであるため、データフィードなどに画像のURLを入力する際は実際に指定したいファイルと間違えないように注意してください。

PNG

PNGは図やロゴのように色の数が少ない場合に向いている画像ファイル形式で、背景の透過にも対応しています。しかし最大256色までしか扱えないため、実写の写真やグラデーションがふんだんに使用されていている色の数が多い画像には不向きです。色の数が多い画像をPNGで保存すると、画質は荒くファイルサイズも非常に重くなるケースが多いです。

※実はPNGには「PNG-8」「PNG-24」「PNG-32」の3種類があり、数字が大きいほど扱える色の数が多いです。「PNG-24」「PNG-32」ではJPEGと同様1600万以上の色を扱うことができるものの、ファイルサイズが非常に重くなってしまうためサイズ制限のあるウェブ広告には不向きな画像形式といえます。また、フリーのツールなどでPNGへの変換を行う場合「PNG-8」として扱われ、種類が選択できるケースはあまりないため、本記事ではPNG＝「PNG-8」として紹介していきます。

GIF

GIFは扱える色の数や、背景の透過が可能であることについてはPNGと同じですが、同じ画像のファイルサイズをGIFとPNGで比較すると大抵PNGの方が軽いため出番は多くありません。昔まだモバイルといえばガラケーが主流だった頃（ガラケーという言葉もなかった頃ですね）はガラケーのブラウザでPNGがサポートされていないことが多くGIFの出番も多かったのですが、最近はあまり見かけなくなりました。

しかしGIFは静止画の画像ファイル形式では唯一アニメーションに対応しています。そのためGIFアニメと呼ばれるパラパラ漫画のような表現や、シネマグラフと呼ばれる画像の一部を動かす表現ではGIFを使用することになります。

画像ファイル形式のまとめ

ここまで紹介した内容をまとめると上記のようになります。同じ画像であっても画像ファイル形式によって画像サイズが異なることがよくわかりますね。

最適な画像ファイル形式と画質の判断が大切

運用型広告に限らず、ウェブ広告で使用するファイルにはサイズの制限が設けられていることがほとんどです。GoogleやYahoo!のレスポンシブ広告やバナーであれば150KB以内に抑える必要があります。150KBはバナーの大きさ（面積）によっては結構ギリギリのラインで、適切でない画像ファイル形式ではサイズオーバーになってしまうこともあるでしょう。ファイルサイズを軽量化する際も画像ファイル形式の知識があればスムーズに対応することができます。

画像ファイル形式の判断方法

こちらのシンプルなフローチャートに従って画像ファイル形式を判断します。

まず、アニメーションが必要なら選択肢はGIFしかありません。他の画像ファイル形式ではサポートしていないためです。次にJPEGとPNGですが、もし迷った場合でもJPEGとPNGでそれぞれ比較してベターなものを使用すれば良いだけなので、あまり深く悩む必要はありません。

画質を調整する

同じ画像ファイル形式であっても、画質によりファイルサイズは異なります。基本的には高画質になるほど比例してファイルサイズも肥大しますので、実際に閲覧したときに気にならない程度まで画質を落としてファイルを軽量化すると良いでしょう。

ただしサイトや画像の役割によっては多少ファイルサイズが肥大しても画質を優先するべきケースもあります。たとえば写真家の作品として掲載するのであればユーザー体験を損ねない範囲で高画質にしていくべきですし、ブログのアイキャッチ画像のような飾りであれば読み込み速度を犠牲にしてまで高画質にする必要はないですよね。画像の役割とユーザー体験への影響を考慮して最適な画質・ファイルサイズに調整することが大切です。

画像ファイル形式の変換・ファイルサイズ圧縮ツールの紹介

画像ファイル形式の変換や画質の調整を行うためのツールを紹介します。Adobe Photoshopのような専門の画像編集ソフトを誰しも使えるわけではないですから、こういったツールが無料で使用できるのはありがたいですね。

参考：iLoveIMG | 画像編集用オンラインツール

このツールはインストール不要、画像の処理も数秒で完了するので大変便利です。この記事で紹介した、画像ファイル形式の変換や画質の調整は下記の3つの機能で行うことができます。

・JPGに変換
PNGやGIFなどをJPEGに変換してくれます。

・JPGから変換
JPEGをPNGまたはGIFに変換してくれます。

・画像の圧縮
画質への影響を最小限に抑えたままファイルサイズを軽くしてくれます。JPG、PNG、GIFすべてに対応しています。

画像ファイル形式が適切でない状態で圧縮したとしても大きな効果は期待できませんので、さきほどのフローチャートに沿って必要であれば画像ファイル形式を変換してから画像の圧縮をすると良いでしょう。試しに、当ブログのアイキャッチ画像として使用しているこの画像を変換・圧縮してみます。

この画像は色の数が多いですがPNGで保存されているため、JPEGに変換することでファイルサイズを軽量化できそうですね。現状のファイルサイズは253KBあり、ブログのアイキャッチ画像としてはちょっと重すぎます。これをPNG→JPEGへ変換するだけでファイルサイズは87KBまで軽量化されました。さらに変換後のJPEGをファイル圧縮したところ、この2つの処理だけでファイルサイズを253KBから31KBまで軽量化できました。