画像形式の使い分け( PNG / JPEG / GIF )

2016.08.17

夏バテになってしまった石原です。みなさま体にはお気をつけください。

さて、私の仕事の一つにWebサイト更新があります。この会社サイトや各サービスごとのWebサイトなどのニュース記事作成などです。Webページを作成する上で画像を扱うことが頻繁にありますが、これまで画像の種類(形式)について無知でした。今回、ブログを書くことを機に画像形式について自分なりに調べて簡単にまとめてみました。画像形式の中でよく見かける PNG、JPEG、GIF の3つに絞って話をします。

はじめにクイズです。

1. スクリーンショットは PNG / JPEG / GIF どの形式が適していますか？

2. 風景写真は PNG / JPEG / GIF どの形式が適していますか？

3. 動きのある画像は PNG / JPEG / GIF どの形式が適していますか？

4. 背景を透明にするには PNG / JPEG / GIF どの形式が適していますか？

長所と短所

それぞれの特徴についてまとめました。

PNG（ぴんぐ）


長所	色が多い(1670万色)、ロゴなど塗りつぶしが多い画像ではファイルサイズが小さい、透明・半透明の画像OK、何度保存しても劣化しないので画質を落とすことがない(可逆圧縮)
短所	写真など連続した色変化が多い画像ではファイルサイズが大きい
適した画像	ロゴ、スクリーンショット、文字や図形が含む画像

JPEG（じぇいぺぐ）


長所	色が多い(1670万色)、写真などファイルサイズが小さい
短所	再保存するたびに画質が悪くなって一度圧縮してしまうと元には復元できない(非可逆圧縮)、背景を透明にできない、輪郭のはっきりしているものには向いていない
適した画像	写真やグラデーションがあるもの

GIF（ぎふ / じふ）


長所	アニメーションgifが作成できる
短所	色が少ない(256色)
適した画像	ロゴ、ボタン、アイコン、イラスト

したがって、正解は次の通りです。

1.PNG　2.JPEG　3.GIF　4.PNG

ほかにも様々な画像形式がありますが、特にJPEGとPNGを扱うので2つの特徴を理解して上手に使い分けしていきたいです。

最後に、画像形式の違いをまとめた記事は数多く公開されていますが、こちらの記事が初心者にとってわかりやすいと感じたので紹介します。

レク.ログ | 人生に、自由と"振る舞い"を。自分だけのフィールドをデザインするノウハウ発信ログ。

ファーエンドテクノロジーからのお知らせ（2025/04/23更新）

	社員研修に伴うサポート体制変更・休業のお知らせ（5/20〜23）社員研修に伴い、5月20日〜23日はサポート体制の変更および休業とさせていただきます。
	オープンソースカンファレンス2025 Nagoyaに弊社代表の前田が登壇（ブース出展あり）オープンソースカンファレンス（OSC）2025 Nagoyaに弊社代表の前田が登壇。『Redmineの意外と知らない便利な機能（Redmine 6.0 対応版）』をテーマに発表します。
	エンタープライズプラン向け「優先サポート」を開始 My Redmineでは、エンタープライズプランをご契約のお客様向けにサポート対応を優先的に行う「優先サポート（プライオリティサポート）」を開始いたしました。
	プロジェクト管理ツール「RedMica」バージョン 3.1.0をリリース Redmine互換のオープンソースソフトウェアファーエンドテクノロジー株式会社は、2024年11月19日(日本時間)、Redmine互換のプロジェクト管理ソフトウェア「RedMica 3.1.0」をリリースしました。
	Redmineの最新情報をメールでお知らせする「Redmine News」配信中新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け