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

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

さて、私の仕事の一つに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/06/11更新)
RedMica 3.2 バージョンアップのお知らせ
My Redmineで提供しているソフトウェアをRedMica(ファーエンドテクノロジー版Redmine) 3.1 から 3.2 へバージョンアップいたします。
プロジェクト管理ツール「RedMica」バージョン 3.2.0をリリース Redmine互換のオープンソースソフトウェア
今日使える明日のRedmine「RedMica」の最新バージョン3.2.0をリリースしました。
2025年6月12日 オライリー本の全冊公開日のお知らせ(もくもく勉強会も同時開催)
ファーエンドテクノロジーが所蔵するオライリー本(全冊)公開日のご案内です。公開日には「もくもく勉強会」も同時開催します。
エンタープライズプラン向け「優先サポート」を開始
My Redmineでは、エンタープライズプランをご契約のお客様向けにサポート対応を優先的に行う「優先サポート(プライオリティサポート)」を開始いたしました。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け