サイト製作記

「JPG」「GIF」「PNG」の使い分け

投稿日:

前回、私は「スクリーンショットの画像は拡張子がpngだが、すべてjpgに変更して使っている」と書いた。その理由は……私は元雑誌編集長、画像データ=jpgというのがもっとも定番であり馴染みやすいだけ。

では、「PNG」や「GIF」はどう使い分けるのか? 正直なところまったくわからない。なので、それぞれの拡張子について調べてみた。

ちなみに拡張子とはファイル名の末尾の「.」(ピリオド)の後に付く文字の部分で、そのファイルが何の種類かを表している。

※「圧縮」:「非可逆」の場合は、保存を繰り返す毎に劣化する。
※「透過」:画像を透過処理して保存することの可否

「JPG」

これは誰もが知っている拡張子だと思う。デジカメなどで撮影し、パソコンに落とすとほとんどが「JPG」である。「ジェイペグ」と読む。画像サイズの単位「ピクセル」(px)という言葉を聞いたことがあると思う。この1ピクセル内にどれだけの色数があるか? 「JPG」「GIF」「PNG」では大きく異なるのだ。

「JPG」の場合、1ピクセルになんと1670万色。つまり、それだけ表現力が高く、美しい画像ということになる。反面、他の拡張子に比べ背景の透過処理をすることはできない。また、他の拡張子とは違い、保存を繰り返す毎に画質が劣化するという性質を持つ。

意外だったのは、輪郭がハッキリとしている文字や図形が含まれる画像には向いていないということだ。「えっそうなの?」と思った人も多いと思うが……そうらしい。

とはいえ、デジカメやスマホで撮影した画像を掲載する際は、圧倒的な色数を誇るjpgを選んでおけば問題無い。

「GIF」

「ジフ」と読む。1ピクセルあたりの色数は256色と少ないが、アニメーションとして使われることが多い拡張子。逆に画像としての保存形式には向かず、モノクロや2色程度のイラストやアイコンなどに使えるくらい。「GIF」はアニメーション、と覚えておけばいいだろう。

「PNG」

「ピング」と読む。この「PNG」には2種類あり、「PNG-8」「PNG-24」がある。「PNG-8」は1ピクセルあたり256色。背景の透過処理が出来るので、グラデーション画像の保存にも適している。そして「GIF」と同様に、色数は少ないが線や文字や図形など、輪郭のハッキリしたものに適している。

つまり、私は今までパソコン画面のスクリーンショットをすべて「JPG」に変えていたが、本当は「PNG」のままの方が輪郭がハッキリと表示されたということかも知れない。

「PNG-24」は1ピクセルに1670万色と、「JPG」と同じ色数を誇る。そして透過処理も可能。さらに、何度保存しても画質の劣化はない。「じゃjpgではなく、png-24をつかえばいいんだ?」と思ってしまうが……実は「JPG」に比べ画像のファイルサイズがかなり大きくなってしまう短所があるのだ。

拡張子まとめ

紹介した3つの拡張子にはそれぞれの長所、短所があるので使い分けするのがベターかも知れない。が、正直私は超ビギナー。いちいち使い分けられるほど器用でもない。しかも、私の目標はあくまで「ネットビジネスで稼ぐことへの挑戦」であり「WEBの専門家になること」ではない。

なので「アニメーション=GIF」を除いては、基本「JPG」で行こうと思っている。



スポンサーリンク
スポンサーリンク

-サイト製作記

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ブログの画像を横に並べたい!

Contents1 画像を横に並べる2つの方法2 画像を横並びにするプラグイン3 「Shortcodes by Angie Makes」を使ってみる4 並べる場合の画像サイズは? 画像を横に並べる2つ …

WordPressをインストールする

レンタルサーバーに独自ドメインの紐付けが完了したら、次はWordPress(ワードプレス)をインストールする。WordPressは無料で使えるホームページ作成ソフトとして人気が高く、世界中の多くの企業 …

知識ゼロからのサイト製作記

Step.01:ドメイン&レンタルサーバーはココを選べ! Step.02:独自ドメインの取得は超簡単! Step.03:サーバー契約&ドメインを紐付ける Step.04:WordPressをインストー …

独自ドメインの取得は超簡単!

Contents1 ムームードメインでのドメイン取得方法1.1 ドメイン取得が可能か瞬時に検索1.2 ドメインの申し込み〜設定1.3 契約年数&支払い方法を決める1.4 連携サービスの提案は無視1.5 …

サーバー契約&ドメインを紐付ける

Contents1 サイト製作準備の難関に挑戦1.1 評価の高いエックスサーバーと契約1.2 ちょっと細かいが焦らず設定を サイト製作準備の難関に挑戦 評価の高いエックスサーバーと契約 すでにレンタル …