「JPG」「GIF」「PNG」いろいろな画像形式とその特徴！
インターネットやパソコン上で扱う「画像」には、一口に「画像」と言っても、様々な形式があるのをご存知でしょうか？ 画像の形式は「拡張子」と呼ばれる記号で見分けることができますが、例えば、「.jpg」という記号を見たことはありますでしょうか？「.jpg」も拡張子のひとつで、「JPEG（ジェイペグ）」という種類の画像形式を表しています。
今回は、インターネットでよく使われる画像の形式と、それぞれの特徴をご紹介したいと思います！ ホームページを作成する際に、どの画像を使えばいいの？と迷ってしまったときの参考にしていただければ幸いです。
拡張子とは？
まずは、画像の形式を表す「拡張子」について、簡単にご紹介したいと思います。拡張子とはスバリ、ファイル名の後ろにいつも付いているアレ。「.（ピリオド）」と「英文字」のことです。
この「英文字」の部分が、ファイル形式によって異なっているおかげで、パソコンが「これは何のファイルかな？」ということを判別できるようになっています。
有名な拡張子の例を挙げると・・・
- 「.jpg」画像ファイルの拡張子
- 「.gif」画像ファイルの拡張子
- 「.png」画像ファイルの拡張子
- 「.mp3」音楽ファイルの拡張子
- 「.html」WEBページの拡張子
など。すべて挙げると数百種類もの拡張子が存在しています。
今回は、皆様がホームページを作るにあたってよく見かけるであろう、「.jpg(.jpeg)」「.gif」「.png」の三種類の画像形式をご紹介いたします。
「.jpg」の「p」はPhotographic（写真）の「P」
「JPG」(ジェイペグ)は（Joint Photographic Experts Group）の略称で、 名前の中にPhotographic（写真）という言葉が入っている通り、写真にとても適した画像形式です。パソコンや、ソフトによっては「.jpg」とも「.jpeg」とも表記されますが、その二つには違いがなく、どちらも内容は全く同じです。
「JPG」のメリット・デメリット
| 「JPG」のメリット | 「JPG」のデメリット |
|---|---|
| 人間の肉眼では見えない情報などを大幅にカットした形式なので、ファイルサイズが小さいのに、写真が綺麗に映し出されます。 また、フルカラー1670万色まで扱うことができるので、写真やグラデーションも綺麗に表現することができます。 |
「JPG」は非可逆圧縮という、画像の処理の仕方をしています。 簡単に説明すると、この非可逆圧縮という方式の画像は、ファイルを開いて上書き保存をする度、画像が少しずつ汚くなってしまいます。 数回の保存で、写真の劣化が目立つことはありませんが、10回上書きを保存するとなると目立ってきてしまうので、画像の編集や加工には注意が必要です。 また、「JPG」は背景を透明にすることができません。 そのことから「JPG」は、何度も加工や編集を行う画像や、背景を透けさせたいロゴやイラストなどには向いていないと言えるでしょう。 |
| 「JPG」のメリット |
|---|
| 人間の肉眼では見えない情報などを大幅にカットした形式なので、ファイルサイズが小さいのに、写真が綺麗に映し出されます。 また、フルカラー1670万色まで扱うことができるので、写真やグラデーションも綺麗に表現することができます。 |
| 「JPG」のデメリット |
| 「JPG」は非可逆圧縮という、画像の処理の仕方をしています。 簡単に説明すると、この非可逆圧縮という方式の画像は、ファイルを開いて上書き保存をする度、画像が少しずつ汚くなってしまいます。 数回の保存で、写真の劣化が目立つことはありませんが、10回上書きを保存するとなると目立ってきてしまうので、画像の編集や加工には注意が必要です。 また、「JPG」は背景を透明にすることができません。 そのことから「JPG」は、何度も加工や編集を行う画像や、背景を透けさせたいロゴやイラストなどには向いていないと言えるでしょう。 |
- 写真や多彩な色づかいのイラストに最適
- 高画質なのにファイルサイズが小さい
- 1670万色まで扱えるので、グラデーションが綺麗
- 何度も上書き保存をすると画像が劣化する
- 背景を透明にすることができない
GIFは簡単なイラスト、ロゴに向いている！
「GIF」（ジフ）は（Graphics Interchange Format）の略称で、ファイルサイズが小さく、軽いのが特徴です。
「GIF」のメリット・デメリット
| 「GIF」のメリット | 「GIF」のデメリット |
|---|---|
| データ容量がとても小さく、背景を透明にすることも可能なので、ロゴやイラストに向いています。 また、アニメーションにも対応していて、パラパラ漫画のような動画をGIFで作ることもできます。 ちょっとしたアイコンに動きをつけたりするのに便利です。 |
GIFは256色しか表現できないので、風景写真など、多くの色が使われている画像をGIFで表示しようとすると細かい色使いまで再現できません。 |
| 「GIF」のメリット |
|---|
| データ容量がとても小さく、背景を透明にすることも可能なので、ロゴやイラストに向いています。 また、アニメーションにも対応していて、パラパラ漫画のような動画をGIFで作ることもできます。 ちょっとしたアイコンに動きをつけたりするのに便利です。 |
| 「GIF」のデメリット |
| GIFは256色しか表現できないので、風景写真など、多くの色が使われている画像をGIFで表示しようとすると細かい色使いまで再現できません。 |
「GIF」のまとめ
- 写真には向いていないが、ロゴや色数が少ないシンプルなイラストにはとても向いている
- 背景を透明にすることができる
PNGはWEBのために開発された拡張子！
「PNG」（ピング）は（Portable Network Graphics）の略称で、インターネット上で使われるために作られた画像形式です。というのも、「PNG」が誕生したのは、過去、それまで自由に使用できていたGIFが特許問題によって 自由に利用できなくなったため、「GIF」に替わる新しい拡張子が必要になり、インターネットやグラフィックの専門家が集まったことがきっかけになります。（今では自由にどなたでもGIFを使用できるようになりましたのでご安心を。） そのためか、「PNG」という拡張子には「PNG is Not GIF」という裏の意味も込められているそうです。 1996年に登場した比較的新しい拡張子なので、便利な機能を多く持っています。
「PNG」のメリット・デメリット
| 「PNG」のメリット | 「PNG」のデメリット |
|---|---|
| 「GIF」の替わりに誕生した拡張子というだけあって、「GIF」の問題点であった256色という色数の制限を解消し、とても綺麗な画像を表現することができます。 透過にも対応しているので、写真を丸く切り抜いて背景を透明にしたり、グラデーションを付けたい場合にも、とても適しています。 また、「JPG」のように画質の劣化の心配もなく、加工などしても綺麗な画質を保つことができます。 |
とにかく「JPG」と「GIF」の良いところを合わせ持ったような高性能な画像ファイルなのですが、「JPG」のように人間の肉眼では見ることができない情報をカットしているわけではないので、
「JPG」と比べてファイルサイズが少し大きくなってしまうことがあります。 また、「GIF」では可能だった、アニメーションが作れない拡張子でもあります。 |
| 「PNG」のメリット |
|---|
| 「GIF」の替わりに誕生した拡張子というだけあって、「GIF」の問題点であった256色という色数の制限を解消し、とても綺麗な画像を表現することができます。 透過にも対応しているので、写真を丸く切り抜いて背景を透明にしたり、グラデーションを付けたい場合にも、とても適しています。 また、「JPG」のように画質の劣化の心配もなく、加工などしても綺麗な画質を保つことができます。 |
| 「PNG」のデメリット |
| とにかく「JPG」と「GIF」の良いところを合わせ持ったような高性能な画像ファイルなのですが、「JPG」のように人間の肉眼では見ることができない情報をカットしているわけではないので、「JPG」と比べてファイルサイズが少し大きくなってしまうことがあります。 また、「GIF」では可能だった、アニメーションが作れない拡張子でもあります。 |
「PNG」のまとめ
- 写真や、ロゴ、イラストなどで、透過を活かした画像を使用したい場合にとても有効
- 劣化が起こらない拡張子なので、写真の劣化が起こってほしくない場面に向いている
全体のまとめ
よく見られる画像形式をご紹介させていただきましたが、それぞれの特徴について、お分かりいただけましたでしょうか？
簡単にまとめると
- 普通の写真や、多彩な色を使用したイラストなどを載せる場合は「JPG」がとても軽く有効
- 色の少ないロゴや単調なイラスト、アニメーションならば「GIF」が有効
- 画質をきれいに保ちながら背景を透過させたい場合は「PNG」が有効
これらの特徴をよく理解し、最適な使い方をしていくことで、ホームページに載せている画像の見栄えがさらによくなるのはもちろん、不必要に大きなデータを使わないことで、ホームページの読み込みスピードをアップさせることにもつながります。 ぜひ、このマメ知識を利用し、より快適なホームページを作り上げていきましょう！
初心者でも大丈夫、本当にカンタンな無料ホームページ作成講座
「自分でできる！ホームページ作成講座」は、初心者の方や、パソコンやITに苦手意識がある方でも カンタンに使えるツールを使って、ホームページの作り方をさっと学べる90分間の無料講座です。 オンライン会議ツールZoomを使用しますので、ご自宅や職場からお気軽にご参加いただけます。 難しい専門スキルやセンスは一切不要です。まずは90分の無料講座を体験してみてください。
※本講座は、「とりあえずHP」の紹介を含みます。
気軽につくれる、素敵なホームページ「とりあえずHP」
とりあえずHPは、素敵なホームページを気軽につくることができるホームページ作成サービスです。
「メールを送る」程度のパソコンスキルがあれば、驚くほど簡単にホームページを作成することができます。
業種ごとに作り込まれたテンプレートデザインや文章のサンプルもあるので、ホームページづくりにあまり時間が割けない人にもおすすめ。大切な時間をホームページ作成に費やすのではなく、本業に集中させることができます。
＼ 1日99円で利用できる！本格ホームページ作成ソフト ／