サイト製作記

「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

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

関連記事

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

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

ドメイン&レンタルサーバーはココを選べ!

いよいよネットビジネスの準備に取り掛かる。が、私はまったくの初心者。正直何から始めればいいのかわからない。途方に暮れながら色々なサイトを見ていると、「ドメイン取得」「レンタルサーバー契約」が、初めの一 …

WordPressで記事を書く

Contents1 投稿の方法は非常に簡単2 画像のアップはどうするか?3 画像サイズの変更方法 投稿の方法は非常に簡単 WordPressをインストールし、テーマを決めたらいよいよ記事を作成する。 …

投稿に目次を付けたい!

知識ゼロからWEBサイトを作り始めて1か月にも満たないが、自分が疑問に思ったことを調べ、知識になっていく充実感を味わっている。私が実際に記事を書き始めて、一番最初に抱いた疑問というか欲求は「他の人たち …

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

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