画像形式の使い分け( 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/03/27更新)
2024年4月14日 オライリー本の全冊公開日のお知らせ(もくもく勉強会も同時開催)
ファーエンドテクノロジーが所蔵するオライリー本(全冊)公開日のご案内です。公開日には「もくもく勉強会」も同時開催します。
My Redmine スタンダードプランおよびAdminサポートデスクプランの料金改定のお知らせ【2024年4月ご利用分より】
2024年4月ご利用分より、My Redmine スタンダードプラン(民間企業・個人向け及び官公庁向け)とAdminサポートデスクプランの料金を改定いたします。
My Subversion 一部のプラン・料金改定のお知らせ【2024年4月ご利用分より】
2024年4月ご利用分より、My Redmine スタンダードプラン(民間企業・個人向け及び官公庁向け)とAdminサポートデスクプランの料金を改定いたします。
My Subversion ストレージ容量増量のお知らせ(一部プランを除く)
My Subversionではミディアムプラン以上の各プランのストレージ容量を増量します。
Redmineの最新情報をメールでお知らせする「Redmine News」配信中
新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け