JPG、GIF、PNGのどれを使う？違いや選び方を画像付きで解説

画像の形式を適切に選ばないと、必要以上にファイルが重くなったり、文字の輪郭がにじんだり、透明な背景が白くなったりします。

この記事では、JPG・GIF・PNGの特徴を実際の比較画像とファイルサイズで確認しながら、現在のWeb制作で使われるWebP・AVIFも含めて選び方を解説します。

横にスクロールできます

拡張子とは？

拡張子とは、ファイル名の最後に付く「.jpg」「.png」「.pdf」などの文字列です。OSやアプリがファイルの種類を判断し、どのソフトで開くかを決める手がかりになります。

拡張子を名前だけ変えたらどうなる？

元記事では、Excelファイル「test-book.xlsx」の拡張子を変えて、開き方がどう変化するかを試しました。

① Excelファイルを作成

1. 1ExcelでA1セルに「TEST」と入力します。
2. 2「test-book」という名前で保存すると、「test-book.xlsx」になります。
3. 3通常はExcelのアイコンが表示され、Excelで開けます。

② 拡張子を「jpg」に変更

1. 1ファイル名を「test-book.xlsx」から「test-book.jpg」に変更します。
2. 2画像のようなアイコンに変わっても、内部データはExcel形式のままです。
3. 3画像アプリで開こうとするため、対応していない形式としてエラーになります。

③ 拡張子を「txt」に変更

1. 1さらに「test-book.txt」へ変更します。
2. 2テキストエディターで開こうとしますが、中身は文章ではありません。
3. 3制御情報などが文字として解釈され、読めない内容が表示されます。

画像形式を変えたい場合は、画像編集ソフトの「書き出し」や「別名で保存」、または変換ツールを使いましょう。

拡張子を確認・表示する方法

拡張子が見えないと、同じ名前のJPGとPNGを区別しにくくなります。常に表示しておくと、誤った形式で入稿・共有するミスを防げます。

Windows

Windows 11では、エクスプローラー上部の「表示」から「表示」を開き、「ファイル名拡張子」をオンにします。Windows 10では「表示」タブの「ファイル名拡張子」にチェックを入れます。

Mac

Finderの「設定」または旧バージョンの「環境設定」を開き、「詳細」で「すべてのファイル名拡張子を表示」をオンにします。

JPG・GIF・PNGの特徴

JPG・GIF・PNGは、いずれもピクセルの集まりで表現するラスター画像です。ただし、使える色数、透明表現、圧縮方法が異なります。

JPG（JPEG）：写真を軽く保存しやすい

JPGは「Joint Photographic Experts Group」に由来し、一般に「ジェイペグ」と読みます。細かな色の変化が多い写真やグラデーションを、比較的小さなファイルサイズで保存しやすい形式です。

• 向いている：写真、グラデーション、背景が透明でなくてよい画像
• 長所：フルカラーを扱え、品質を調整して容量を減らしやすい
• 短所：透明にできない。非可逆圧縮のため、低品質での再保存を繰り返すと劣化しやすい

編集途中の元データは編集ソフトの形式などで保持し、配布用・掲載用として最後にJPGを書き出すと劣化を抑えられます。

GIF：色数の少ないアニメーション向け

GIFは「Graphics Interchange Format」に由来し、日本では「ジフ」と呼ばれることが多い形式です。最大256色のため写真には不向きですが、複数の画像を連続表示するアニメーションに対応します。

• 向いている：短いアニメーション、色数の少ない小さな図
• 長所：可逆圧縮で、1色を完全な透明として扱える
• 短所：256色まで。半透明を表現できず、写真やグラデーションでは色の段差が出やすい

GIFがJPGやPNGより必ず軽いわけではありません。画像の内容やアニメーションの長さによっては、WebPや動画形式の方が小さくなることがあります。

PNG：文字・ロゴ・透明背景をきれいに保持

PNGは「Portable Network Graphics」に由来し、「ピング」と読みます。可逆圧縮により輪郭や色を保ちやすく、完全な透明だけでなく半透明も扱えます。

• 向いている：ロゴ、文字、図表、スクリーンショット、背景を透過した画像
• 長所：保存による劣化がなく、アルファチャンネルで滑らかな半透明を表現できる
• 短所：写真ではJPGよりファイルサイズが大きくなりやすい

PNGがJPGより常に高画質という意味ではありません。用途と保存条件が違うため、写真はJPG、輪郭や透明度を保ちたい素材はPNGと考えると選びやすくなります。

WebP・AVIF：Web配信で使われる新しい選択肢

現在の主要ブラウザでは、WebPとAVIFも広く利用できます。どちらも非可逆・可逆圧縮や透明表現に対応し、従来形式より小さな容量で同程度の見た目を得られる場合があります。

横にスクロールできます

• WebPやAVIFが常に最小・最高画質になるわけではありません。同じ表示サイズと近い見た目で書き出し、実ファイルを比較して選びます。
• 印刷会社、SNS、社内システムなどへ渡す場合は、相手が受け付ける形式を先に確認してください。

HEIC・HEIF：iPhone写真でよく使われる形式

iPhoneでは、設定によってHEIF形式の写真が「.heic」という拡張子で保存されます。高効率ですが、送信先や編集環境によってはJPGへの変換が必要です。

JPG・GIF・PNGの画質とファイルサイズを比較

ここからは、同じ素材をJPG・GIF・PNGで保存した比較です。文字3種類、イラスト2種類、写真2種類の合計7パターンを並べています。

テキスト画像

「NOVEBLO」という文字を、モノクロ・カラフル・グラデーションの3パターンで比較します。

モノクロ

単純な白黒の文字では、3形式とも容量差は小さめです。背景が不要ならPNG、白背景でよければJPGが選びやすいでしょう。

カラフル

このサンプルではJPGとPNGの容量はほぼ同じです。文字の輪郭と透明背景を保つならPNGが適しています。

グラデーション

色数が増えるとGIFには段階的な色の変化が見えます。透明背景が不要なら、このサンプルではJPGが最も小さく自然です。

イラスト

モノクロ

単純なモノクロ素材では、どの形式も比較的小さくなりました。輪郭の品質と透明背景を優先する場合はPNGが無難です。

カラフル

GIFは容量を抑えられましたが、256色の制限により野菜の色や模様が変化しています。白背景ならJPG、透明背景と見た目の保持を両立するならPNGが適しています。

写真

グレースケール

白黒写真にも多くの階調があります。PNGは見た目を保持できますが、この例ではJPGの約3倍です。通常の写真用途ならJPGが扱いやすいでしょう。

カラフル

この例では、PNGはJPGの約9倍、GIFもJPGより大きくなりました。写真ではJPGが容量と見た目のバランスを取りやすいことがわかります。

用途別に画像形式を選ぶ

上の図は3形式だけを対象にした目安です。現在はWebP・AVIFもあるため、実際には次の順番で考えると選びやすくなります。

1. 1提出先の指定を確認：印刷会社、SNS、CMSなどに指定があれば従います。
2. 2動きが必要：短いアニメーションならGIF。Web用途ではWebPや動画形式も比較します。
3. 3透明背景が必要：互換性重視ならPNG、Web配信の軽量化まで考えるならWebP・AVIFも候補です。
4. 4写真：幅広い互換性ならJPG、Web配信ではWebP・AVIFと容量を比べます。
5. 5文字・ロゴ・図：PNGが基本です。拡大しても輪郭を保ちたいロゴやアイコンはSVGも検討します。

JPG・GIF・PNGの使い方まとめ

• JPG：写真やグラデーションを軽く保存したいとき
• GIF：256色以内の短いアニメーションを幅広い環境で見せたいとき
• PNG：文字・ロゴ・図表・スクリーンショット・透明背景をきれいに保ちたいとき
• WebP／AVIF：Webページの表示速度を意識し、従来形式より軽くできるか比較したいとき

迷った場合は、まず用途に合う形式で書き出し、同じ表示サイズで見た目と容量を比較しましょう。拡張子の名前だけを変えるのではなく、変換・書き出し機能を使うことも大切です。

参考資料

• MDN：Image file type and format guide
• web.dev：Image performance