【5秒でわかる】JPGとPNG、GIF、SVGの使い分け 軽くてきれいなのはどっち?

うさぎのアイコン画像うさぎ

Webサイトやブログに使う画像って全部JPGがいいの?どうやって使い分けるべき?

黒猫のアイコン画像黒猫

PNGを使ったほうが軽くてきれいになることもあるよ。どっちを使うべきかは下記表を見れば一目瞭然

画像拡張子の使い分け(JPG/PNG/GIF/SVG/BMP/WebP)
画像形式の使い分け
  • JPG:写真や色のグラデーションが複雑なもの
  • PNG:PCで作成したデータや透明を使うもの
  • GIF:色が単純なアニメーション
  • SVG:ベクター形式で作成されたロゴ
  • BMP:写真向きだがファイルサイズ大きすぎて使えない
  • WebP:ブラウザ対応できればJPG,PNG,GIFの代わりに

ちなみに上図の図解はPNGを使用しており、JPGで書き出した場合と比較すると三分の一以下のサイズになっています。

このように色数が少なく、グラデーションもない図解の拡張子はPNGが最適。

下記はIllustratorでWeb用に圧縮したPNGとJPGの画像の比較です。

PNG

PNG 2KB
PNG 12KB

JPG

JPG 7KB
JPG 26KB

拡大して比較してするとサイズ、画質ともにPNG優位なのが一目瞭然ですね。

このようなIllustratorで作るような図解やイラストはPNGを使用したほうが軽量かつきれいに書き出せます。

最適な拡張子を使うことで画質を保ちながらサイズを圧縮できるためWeb制作において拡張子選定は想像以上に重要。

黒猫のアイコン画像黒猫

画像形式の特徴や使い分けについてさらに詳しく知りたい方向けに、それぞれの特徴や比較を図解とともに詳しく解説していきます

目次

JPG/PNG/GIF/SVG 画像拡張子の特徴について

現在Webで見かける主要な画像拡張子は下記の4種類

  • JPEG
  • PNG
  • GIF
  • SVG

それぞれの特徴や使うべきシーンについて解説していきますね。

JPGは写真に最適だが劣化に注意

JPGは作成したJoint Photographic Experts Groupの頭文字をとってJPEG。読み方はジェイペグ。

ちなみに拡張子JPG、JPE、JPEGに違いはありません

昔のWindowsの拡張子は3文字までしか表示できなかった時のなごりでjpgが多く使われていますが今のOSではjpg、jpeg、jpeどれも同じように使用可能です。

世界で一番使われている画像形式であるJPEGの特徴は下記の通り。

  • 写真に最適
  • 非可逆圧縮
  • モアレやノイズが発生する
  • 24ビット(16,777,216色)
  • 色の境界が複雑なものに最適

JPEGはフルカラー使用できるので写真や色の境界が複雑なグラデーションに最適。

圧縮画質は0~100で変更が可能ですが、非可逆圧縮のため高圧縮にしても劣化し画像にモアレやノイズが発生します。

画質設定を変更による変化は下記の通りです。空のグラデーションの変化がわかりやすいですね。

圧縮画質100のJPEG画像
圧縮画質100

圧縮画質100:1,700KB

圧縮画質60のJPEG画像
圧縮画質60

圧縮画質60:512KB

圧縮画質0のJPEG画像
圧縮画質0

圧縮画質0:97KB

写真に強いJPEGですが、エッジがかすれて表示されるため輪郭がシャープな文字や図形には不向き

色数が少なく、色の境界がはっきりしたイラストや図はJPGよりもPNGを利用したほうがファイルサイズを抑えられるので写真以外はPNGを使用しましょう。

PNGとJPGの画質比較

4KB
PNGとJPEGの比較ーPNG
2KB

JPGの圧縮を30%まで落としてもPNGより小さくはならず、文字や図形の鮮明さも劣ります。

PNGは写真以外の画像に最適

PNGはPortable Network Graphicsの略で、読み方はピング。

「写真以外の画像はPNGを使え」といわれる程にWebで多く使用されている画像形式。

PNGの大きな特徴は下記の通り

  • 可逆圧縮
  • 透過が使用可能
  • サイズがとても軽い
  • 色数は256色(PNG8)

PNGはJPEGとは違い「可逆圧縮」のため元の画質に戻すことも可能で「透過」も使用できる。さらにファイルサイズも軽量なのでWebでは写真はJPEG、それ以外の画像はPNGと使い分けられることが多い。

一般的にWebで使用するPNGは「PNG8」を指すが、PNGは大きく2つに分けられる。

  • 軽量できれいだが256色数制限のあるPNG8
  • JPEG同様にフルカラーが使えるPNG24

写真を保存するならフルカラーが使えるPNG24ということになるが、PNG24はファイルサイズがとても大きくなるのでWebではフルカラーが必要な場合はJPEGが使われることが多い。

PNGをさらに詳しく分類すると下記表のようになる。

PNG透明ファイルサイズ使用可能色数
PNG8×より小さい256色
PNG8 alpha小さい256色
PNG24×大きい16,777,216色
PNG32より大きい16,777,216色

PNGは256色しか使用できませんがディザと言われる手法を利用することで擬似的に多くの色を表現することが可能になっています。
JPEGと違い、色数を絞れば絞るほどファイルサイズが小さくなるため、128色、64色と色数を絞ってディザをかけることでさらにサイズを縮小させることができるので不必要に色数を増やさないのも重要。

ディザとは?

ディザとは誤差拡散法とも呼ばれ、色を交互配置することで色の階調をなめらかにする手法のこと

PNGやGIFのように表示色数に制限がある圧縮形式で使用される。

PNG8やGIFで使える色は256色だけですが、ディザ手法を使用することで擬似的に制限以上の色を表現することが可能になる。

ディザの仕組み

ディザの仕組み

左の図では赤と緑の2色でも交互配置することで黄色を表現しています。

このように限られた色数でも擬似的に色を再現できるのでファイルサイズを大きく軽減することが可能に。

とはいえ色を交互に配置している都合上、ギザギザや点々が目立ってしまいます。

ディザによるグラデーション再現

ディザ100%と0%の比較

ディザ手法を用いることで少ない色数で多くの色を表現が可能になりますが、ディザはあくまでも疑似再現でしかありません。

多くの色を表現したい場合にはJPGやPNG24を使用するため、ディザを用いて複雑な色表現を行うことはあまりありません。

ディザ方法3種「誤差拡散法」「パターン」「ノイズ」

誤差拡散法、パターン、ノイズ 3種類の比較
  • 誤差拡散法:ディザ効果が隣接ピクセル上で拡散されるため最も境界が目立ちにくいランダムパターン
  • パターン:ハーフトーン調に正方形パターンを作成
  • ノイズ:誤差拡散法と同様のディザ効果だが隣接ピクセル上には拡散しない

あまり使うことはないかもしれませんがディザは上記の3種類から選択可能です。基本的にはデフォルトの誤差拡散法を選んでおけばOK

GIFはアニメーション作成が最大の特徴

GIFはGraphics Interchange Formatの略でジフと呼ぶ。

GIFは30年以上前から使用されてきた画像形式で下記のような特徴がある。

  • 色数は256色まで使用可能
  • ファイルサイズは小さめ
  • アニメーションに対応
  • 透明色が使用可能
  • 可逆圧縮

PNG同様に8ビットカラーなので色数が少なく写真には向いていませんが、ファイルサイズが小さく透明色が使用可能ということでロゴや装飾用の画像などで使用されていた。

しかし現在では画像はPNG8、アイコンや装飾はSVGのほうが優れており、下位互換となるGIFが使われる機会は激減している。

Webアニメーションの今後

使用枚数や色数を減らして丁寧に作られたGIFは容量を大幅に縮小できるが、変換ソフトなどを利用して作成した場合はサイズが大きくなる傾向がある。
そうなってくるとmp4のほうが圧縮率が良い場合も多く、後述するWebPでもアニメーションが作成可能なので今後GIFを使う理由はより少なくなってくるだろう。

Flash(flv)とGIFアニメはWeb用アニメーションとして長年活躍したがそろそろ終止符が打たれそうだ。

SVGはベクターデータを表示できる

SVGは点と線を数値化して表されているベクタ形式で、JPG、PNG、GIFなどとは全く別の形式。読み方はエスブイジー。

ベクター(ベクトル)に関しては>>アウトラインとは?の記事にて詳しく解説しています。

  • 簡易的な図形は軽量かつきれいに表示可能
  • 複雑な図形になると処理が重くなる
  • 古いブラウザはSVGに対応していない

Illustratorで作成した下記のようなデータをJPGやPNGのようなピクセル状にせず、そのまま使えるのでロゴやアイコンをいちばんきれいに表示できる方法になっている。

ベクターで作成されたデータイメージ

イラストやグラフなどもベクター形式としてが利用可能だが、ロゴやアイコン以外ではPNGが使われることのほうが多い。

BMP

BMPはWindowsで使用されていた圧縮されていない画像形式です。正式名称はMicrosoft Windows Bitmap Imageでビットマップと呼ばれる。

圧縮されていないので画質は良いんですがとてもファイルサイズが大きくてWebでは使用できません。

CMYKに対応しておらず、いくら高画質データでもDTPに向かないということで本当に使いみちがない。

次世代画像フォーマット JPEG2000/JPEG XR/WebP

主要な画像形式を解説してきましたが、ここからは次世代の画像フォーマットについて解説していきますね。

結論から言うと今後はWebPが主流になると予測されます。

というのも先日のAppleのアップデートで長年の懸念事項であった主要ブラウザの非対応という状況が解消された為です。

黒猫のアイコン画像黒猫

その他の次世代フォーマットの解説をサラっとしながら解説していきますね

JPEG2000はJPGの進化版として開発されたが…

JPEG2000はJPGの最大の欠点である画像の劣化に対応すべくJoint Photographic Experts Groupが新たに開発したJPEGの進化版です。

より綺麗に画質を保ったまま圧縮保存できる優れたフォーマットですが、まったく普及しませんでした。

普及しなかった理由としてあげられるのは下記の3つ

  • 多機能すぎて処理が重い
  • JPEGの汎用性の高さに勝てない
  • ブラウザがいつまでも対応しなかった

機能的には優秀だったJPEG2000ですが、何しろ処理が遅くWebサイトでは使えないという状況。

無理やり使おうにも主要ブラウザが対応しなかったためWebデザイナーも使うことがなく現在まで来てしまった。

JPEG XRは高圧縮&軽量

おそらく聞いたことない人が大半であろう「JPEG XR」という規格もリリースされています。

  • 可逆圧縮対応
  • 高圧縮&低メモリ
  • 32bit対応(非可逆)
  • アルファチャンネル対応

かなり性能的には良く、流行っても良さそうな感じがしますがこちらも主要ブラウザが対応しておらず全然使われていません。

後述するWebPがなければ今後使われたかもしれませんね…

WebPはGoogleが開発した軽量画像フォーマット

WebPはGoogleが開発した画像形式で画質を保ったままファイルサイズを小さく圧縮することが出来る。

読み方はウェッピー。

Webのトラフィック減少を目的としてJPGやPNGに変わる次世代フォーマットとして作られた。

  • 高圧縮
  • 透明対応
  • アニメーション対応
  • 可逆圧縮・非可逆圧縮両対応

特徴は上記の通り。

ファイルサイズは大幅な圧縮が可能です。

WebPを使用し圧縮した場合JPEGと比較して25〜34%小さくすることが可能。

可逆圧縮を行った際はPNGと比較し28%小さくなり、22%のファイル増加でアルファチャンネル(透明)を追加できる。

すばらしい圧縮率と利便性ですね。

現在主流のWebフォーマットを置き換える目的で開発されただけあってJPEG、PNG、GIFすべての上位互換です。

WebPに移行すべき?

今までは主要ブラウザが対応していなかったことで導入するWebデザイナーは少なかったが、2020年秋にリリースされたiOS14にてついにiPhoneがWebPに対応。Googleが2021年以降のアップデートで表示速度を重視すると発言しており、今後WebPを使用するWebサイトが増えると予想される。

とはいえ旧ブラウザをすべて捨てるなんてことは出来るはずがないので、非対応ブラウザを使用している場合はJPEGを表示するなどの複数画像を用意した切り替え対応をしながら移行していく感じになります。

WordPressならEWWW Image Optimizerでの一括変換なんかもできますが、他ブラウザへの対応ができないのであればまだ慌てて移行しなくても良いと思います。

画像形式の選び方まとめ

画像の拡張子の選び方

具体的な選び方は下記の通り

STEP
ロゴやアイコンはSVG

サイトロゴやアイコンはSVGが最適
WebPが普及してもベクター形式のSVGは使われるはず

STEP
WebPに対応する環境が整っているならWebP

ブラウザに応じた表示変更が可能な場合はWebP

STEP
写真や繊細なグラデーションを使用しているならJPEG

写真やグラデーションなど色の境界線がハッキリとしていないものはJPG

STEP
その他の画像はPNG

写真以外の画像データはPNG8

WebPが導入可能であればWebPを積極的に使っていくべきだが、最新ブラウザを使っている人しか画像が見れなくなってしまうのでWebPが完全に普及するまでは下記の拡張子の用意も必要になる。

拡張子の使い分けは「写真はJPG」「その他の画像はPNG8」「ロゴはSVG」といった感じに使い分ければOK

写真が混ざった画像はJPGとPNGどちらがいいか迷うかもしれません。そんなときは両方の形式で保存して比較してみてください。

黒猫のアイコン画像黒猫

慣れてくれば保存する前に「この画像はこの形式がいいだろうな」と判断できるようになりますよ!

大すきのアイコン画像大すき

これからは画像を保存する際は拡張子を意識してみてくださいね

よかったらシェアしてね!

コメント

コメントする

目次
閉じる