画像形式の使い分け( 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/07/09更新）

	夏季休業のお知らせ (8/13〜15休業) 2025/8/13(水)〜8/15(金)は夏季休業とさせていただきます。
	JANOG56ミーティング（7/30〜8/1開催）にRubyスポンサーとして協賛・ブース出展 JANOG56ミーティング（7/30〜8/1開催）にRubyスポンサーとして協賛、ブースを出展します。
	Redmine Japan Vol.4（7/25開催）に弊社代表の前田が招待講演として登壇オープンソースのプロジェクト管理ソフトウェア Redmine のイベント「Redmine Japan Vol.4」に弊社代表でRedmineコミッターの前田剛が招待公演に登壇します。
	RedMica 3.2 バージョンアップのお知らせ My Redmineで提供しているソフトウェアをRedMica（ファーエンドテクノロジー版Redmine） 3.1 から 3.2 へバージョンアップいたします。
	Redmineの最新情報をメールでお知らせする「Redmine News」配信中新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け