画像形式の使い分け( 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つの特徴を理解して上手に使い分けしていきたいです。

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

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

ファーエンドテクノロジーからのお知らせ(2024/05/09更新)
2024年5月11日 オライリー本の全冊公開日のお知らせ(もくもく勉強会も同時開催)
ファーエンドテクノロジーが所蔵するオライリー本(全冊)公開日のご案内です。公開日には「もくもく勉強会」も同時開催します。
入門Redmine 第6版 出版記念企画セミナー「Redmineのアクセス制御」【2024/5/30開催】
入門Redmine 第6版(2024年3月23日発売)の書籍から「Redmineのアクセス制御」について解説します。
My Redmine 初回ご契約で「入門Redmine 第6版」プレゼントのお知らせ
Redmineのクラウドサービス「My Redmine」を初めてご契約いただいたお客様にRedmine解説書「入門Redmine 第6版」を進呈いたします。
2024年度ブランドパートナーに島根県在住のモデル ユイさんを継続起用
ユイさん(モデルスタジオミューズ所属)をファーエンドテクノロジーの2024年度ブランドパートナーとして継続して起用します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け