GIF・JPEG・PNG 3つの画像ファイル形式の基本

あなたがブログなどのWebサイトやSNSに画像を投稿する時、
適切な画像形式やファイルサイズに設定できていますか？

必要以上にファイルサイズが大きければなかなか読み込まれませんし、かといってファイルサイズを小さくしすぎると画質が劣化してしまいます。

今回はWebサイトやSNSなどで特に良く使われている３つのビットマップ画像ファイル形式、GIF、JPEG、PNGはどういうものなのかということ、
それからそれぞれの画像ファイル形式の上手な利用方法について解説します。

読者の視点になって考えるならば、
読み込みに時間がかかりすぎるサイトはいつまでも待てませんよね。

よっぽどのファンで無い限りはすぐに離脱してしまうでしょう。

そういう部分はやはりGoogleなど検索エンジンも考えているようで、一定のラインが設定されています。

Googleの場合は1.6MB程度のファイルサイズを推奨しています。
これは、1つの画像のサイズではありません。

1ページあたりの合計ファイルサイズです。

Webページの合計サイズを調べるには、以下のツールを使用するのがオススメです。


なぜここまでの厳しい基準があるのかといえば、
2020年には今よりさらに高速になった5G(第5世代移動通信システム)がサービス開始されると言われています。

しかし世の中の全ての携帯電話やスマートフォンが一斉に5Gになるのでない限りは、古いシステムを基準にする必要があります。

その基準が3G回線での接続を想定したファイルサイズとのことです。

そして、約7800ものサイトをチェックしたところ、1ページあたりの平均値は2.4MBだったそうです。

イーノ君の1画像10MB、というのがいかに無茶だったかというのがわかりますね。

GIFとはGraphics Interchange Formatを略した形式です。拡張子は「.gif」
GIFの特徴には以下のようなものがあります。

実はかなり古い形式

GIFは1987年、CompuServeで生まれ、今よりずっと低速だったインターネットの初期に活躍した画像形式です。

画像ファイル形式の中では古くなっている事、そして最大256色までしか扱えない事もあり、現在は静止画としての使用頻度は低くなっています。

最大256色が使える

GIFは色数が8bit＝最大256色まで使用でき、そして透明な部分を持たせることができます。
常に256色というわけではなく、画面が持つ色数にあわせて64色、32色など、色数を抑えることもできます。

ただ、透明度を持たせる場合はこの256色のうちの一色を透明色として利用することになるため、その場合は実質255色ということになります。

色数を制限しLZW圧縮をすることでファイルサイズが小さくなります。

アニメーション形式が書き出せる

唯一ブラウザだけで再生できるアニメーションGIFという形式で書き出せるため、アニメーションという視点で見ると利用している人も多いようです。

過去にアニメーションGIF作品が大流行したことがありましたが、今再びTwitterなどで静かに流行してきている印象があります。

LZW特許問題

GIFにはLZW圧縮という技術が使用されていて、米ユニシス社がその特許を保有していました。

当初はGIFのLZW技術については特許の使用料を請求しなかったのですが、
その後GIF形式が普及すると、グラフィックソフト制作者やユーザーから使用料を徴収しようと方針転換します。

これにより一時ユーザーの間で「GIFの使用をやめよう」という運動が起こります。

この問題については2003年にLZWの特許は失効し、現在は再び自由に使える状態であると考えられています。

現在もっともポピュラーな画像形式です。拡張子は「.jpg」または「.jpeg」

JPEGとはこの画像形式を作った組織であるJoint Photographic Experts Groupの略称が形式名として使用されています。

JPEGの特徴としては以下のようなものがあります。

フルカラーが使える

JPEGは24bitフルカラー＝1677万色が使用できることが大きな特徴です。

フルカラーが使えるということは、写真が表現できるということでもあります。
デジタルカメラやスマートフォンなど、事実上標準的な写真データ形式としても利用されています。

ただし、GIFやPNGと違い、透明な部分を持つことはできません。

ファイルサイズがとても小さくなる

JPEGは高圧縮率で保存することにより、オリジナルと比較してファイルサイズがとても小さくなります。

JPEGは非可逆圧縮を使用して、画質を犠牲にしてサイズを小さくしています。
非可逆圧縮については後ほど解説します。

PNGはPortable Network Graphicを略したものです。拡張子は「.png」
今回解説している画像ファイル形式の中では最も新しい形式です。

GIFの替わりとなる新しい形式

前述したLZW特許問題によって、多くのユーザーがGIFの利用をためらうようになりました。
PNGはそのGIFに替わるライセンスフリーの画像ファイル形式として1996年に誕生しています。

2つのカラーモードを持つ

GIFの替わりの画像形式なので、8bitモードで透明な部分を持つ事ができます。
それに加えてフルカラーモードも使うことができます。
もちろん、フルカラーモードでも透明な部分をつけられます。

また、単純に透明にするだけでなく、半透明にすることも可能です。

フルカラーではファイルサイズが大きくなる

256色モードではGIFよりもファイルサイズが小さくなり、フルカラーモードも使えるようになったのは進化したPNGのメリットです。

しかしその反面、フルカラーではJPEGファイルよりもサイズが大きくなるというデメリットがあります。

これはPNGのフルカラーモードが可逆圧縮を使用しているため、ファイルサイズよりも画質を優先しているからです。

可逆圧縮についても後ほど解説します。

GIF、JPEG、PNGの3種の代表的な画像形式を解説しました。
それではどのような画像にどの画像ファイル形式を選べばよいのでしょうか？

JPEGに使われている技術は非可逆圧縮と言います。
非可逆というのは「元に戻せない」ということを意味しています。

一定の大きさの正方形を一つのブロックにして、似た色に置き換えて省略することで情報量を減らしています。

ザックリ言うとJPEGは「人間が体感しにくいレベルで画像の一部を捨てる」ことでファイルサイズを小さくします。

写真の場合は情報量が多いためパッと見はわからないのですが、拡大すると画質が劣化していることがわかります。

シンプルなイラストなどの場合はもともと(色的に)情報量が少ないので、逆に輪郭などにノイズが目立ってしまい、向いていないと言えるでしょう。

例として写真を画質80％と10％で比較してみました。
いかがでしょうか？
JPEGが写真に向いているとはいえ、10％まで低下するとかなり劣化しているのがわかりますね。

PNGに使われている技術は可逆圧縮と言います。
可逆ですので、こちらは「元の状態に戻せる」ということを意味しています。

例えば赤緑青、と色が並んでいるとしたら、それぞれの色が何個ずつ並んでいるか、とデータ化します。

ザックリ言うとPNGは「8bitモード＝色数を制限してまとめる」ことでファイルサイズを小さくします。

色数を制限してまとめてしまうので、写真のような情報量の多いものには不向きで、シンプルなイラストにはとても効果を発揮します。

こちらはシンプルなイラストでどう違うかテストしてみました。
両方とも24bitフルカラーと8bit 64色で比較しています。

8bitで色をうまく調整できると、フルカラーの半分…場合によっては1/10以下になることもありますが、見た感じ見分けがつきません。

この例を見ていただければ、シンプルなイラストは8bitのPNGに向いているということがわかるでしょう。

少し乱暴な回答ではあるとは思います。
しかし、ここでPhotoshopやillustratorを勧めるのは理由があります。

基本的に画像圧縮とは、
「画質とファイルサイズを測りにかける」
ことです。

すなわち、

• 画質を優先するならファイルサイズを犠牲にする
• ファイルサイズを優先するなら画質を犠牲にする

ということになります。

Photoshopやillustratorは、圧縮後にどういう結果になるかを見ながら調整できる機能があります。

私がよく使うのは「Web用の書き出し(従来)」ですが、最近は「書き出し形式」という機能を使うことが増えてきているようです。

多くの人がPhotoshopやillustratorの機能や表現力に目が行きますが、
それよりも「適切な状態と形式で書き出せるか」という事が重要です。

Web用の書き出し(従来)機能を使ってJPEGに変換する方法を解説します。
ファイルメニュー→書き出し→Web用の書き出し(従来)を実行します。
※Photoshopもillustratorも書き出し方はほとんど同じです。

すると書き出し専用のウインドウが開きますので、右側にあるプリセットからファイル形式と画質を選ぶだけでも十分適した状態の画像が作成されます。

プリセットで満足できなければさらに画質の％を調整していきます。
(0に近いと低画質・ファイルサイズ小、100に近いと高画質・ファイルサイズ大)

または「ファイルをここにドラッグ＆ドロップしてください」という領域に直接ドロップしても良いでしょう。



すると、オリジナルとプレビューの比較画面が現れます。
ここでクオリティ設定で圧縮率を設定し、適用ボタンを押せば設定値が適用されます。

思ったよりも画質が悪くなってしまったり、ファイルサイズが大きいようであれば何度か試行錯誤してみてください。



結果が良ければダウンロードボタンを押して、圧縮された画像をダウンロードしましょう。

今回はWebサイトやSNSなどで特に良く使われている３つのビットマップ画像ファイル形式について解説しました。

私はそれこそ光回線になる前からインターネットに触れていましたので、画像は極力小さくするという事を心がけていましたが、

まさか令和の時代になってまで「1ページの合計は1.6MB推奨」だとは考えていなかったので、なかなか衝撃的な情報でした。

どんな力作のWebサイトや、ブログ記事を作成しても見て(読んで)貰えなければ意味がありませんよね。

使用する画像の内容や表現を良く考えて、適切な画像ファイル形式と圧縮形式を選択しましょう。

そして、恐ろしい話ですが、なんと合計10MBを超えると、Googleはクロール(巡回)を止めてしまうとの事です…！