jpg、png、svg…違いは何？？適切な画像形式・拡張子の選び方

Webサイトやブログに使う画像にJPGとかPNGとかついてるけど何が違うの？

どうやって使い分けるべき？そう思ったことがある方へ

実は私も違いについて全然わかってませんでした（笑）

表示できるから何でもいいやと思っていたのですが表示スピードや画質がとても変わってくるので

使い分けることが大変重要になってきます！

今回は画像の拡張子について簡単にわかりやすく説明していきます

画像拡張子の使い分け

• JPG：写真や色のグラデーションが複雑なもの
• PNG：PCで作成したデータや透明を使うもの
• GIF：色が単純なアニメーション
• SVG：ベクター形式で作成されたロゴ
• BMP：写真向きだがファイルサイズ大きすぎて使えない
• WebP：ブラウザ対応できればJPG,PNG,GIFの代わりに
• PSD：Photoshop編集用データ
• AI：Illustrator編集用データ

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

WEBではおもに

• JPG
• PNG
• GIF
• SVG

の4種類の拡張子を見かけることが多いです

それぞれの特徴や使い時について解説していきますね！

JPG

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

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

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

世界で一番使われている画像形式です！

JPGの特徴といいますと

1. 写真に最適
2. 非可逆圧縮
3. モアレやノイズが発生する
4. 24ビット（16,777,216色）
5. 色の境界が複雑なものに最適

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

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

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

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

PNG

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

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

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

PNGの特徴は

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

PNGはファイルサイズが軽量なのでWebでは写真はJPEG、それ以外の画像はPNGと使い分けられることが多くなっているのです

そしてPNGはJPEGとは違い「可逆圧縮」のため元の画質に戻すことも可能で「透過」も使用可能です

※Webデザインで透明画像を利用する場合には基本的にPNG一択。

PNGは大きく2つに分けられますが、一般的にPNGといえば「PNG8」です！

ちなみに大きく分けたPNGの種類です(詳しくはもっとあるのですが今回は簡単に)

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

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

GIF

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

GIFはGraphics Interchange Formatの略でジフと呼びます

GIFは30年以上前から使用されてきた画像形式で

特徴といいますと

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

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

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

SVG

SVGはベクターデータを表示できます！

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

SVGの特徴は

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

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

画像形式の選び方まとめ

今回はよく使う４つの紹介でした！(1つは廃れてきているのですが(笑))

ではおさらいします

1.ロゴやアイコンはSVG

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

3.その他の画像はPNG

拡張子の使い分けは「写真はJPG」「その他の画像はPNG」「ロゴはSVG」ですよ！

写真が混ざった画像はJPGとPNGどちらがいいか迷うと思います

そんなときは両方の形式で保存して比較してみるといいですよ！

それでは皆さんこれからは画像の拡張子にも気を付けていきましょう！