拡張子の種類と特徴とは？ホームページ画像をクリアに表示する方法

ホームページに入れる画像は印象を左右する大切な要素です。
画像がホームページやサービス内容に合ったものであることはもちろん、パソコンやスマホで表示させたとき、クリアに表示されるかどうかもしっかりチェックしないといけません。

ホームページ画像がクリアに表示されるかどうかを決めるのが拡張子になります。
そこで今回は拡張子とは何か、そして画像の拡張子の種類とそれぞれの特徴について取り上げました！

ホームページ画像についている拡張子とは？

あなたがパソコンでファイルを見ているときなど、ファイル名の後ろに「xxx.png」とか「xxx.gif」とついているのを確認したことがありますか？
この「.(ピリオド)」の後ろについている３〜４文字の文字列が拡張子となります。

拡張子とは、その画像やワード・エクセルなどのファイルの種類を識別するためにあるものです。
つまりこの拡張子を見るだけでそのファイルがどの形式で保存され、どのアプリケーションやソフトに対応しているかがわかるということ。

拡張子は単なる文字列ではなく実際にそのファイルが保存されている圧縮形式になるので、ホームページにファイルを入れるときなどにかなり重要な役割を担っています。

拡張子には使う場所によって向き・不向きがある

拡張子は１つだけではありません。
画像だけでも複数の種類がありますし、文書ファイルだとワードで書いたもの・メモ帳で書いたものでも拡張子が異なります。

これだけ種類があるのには、そのファイルをしっかり開ける、または表示できるようにするためという理由があるのです。

拡張子にも使う場所、使うファイルによって向き不向きがあります。
例えばワードの文書ファイルなのにエクセルの拡張子で保存してしまうと開けなくなったり、そのファイルそのものが壊れてしまうことも！

画像ファイルも用途によって拡張子を使い分ける必要があります。
カラフルな画像向けの拡張子と、圧縮率を高くしたいときに向いている拡張子などは別です。
拡張子の特徴について理解して、それぞれ合う拡張子を使うようにしましょう。

拡張子の種類と特徴

ホームページに画像を入れたいとき、その画像ファイルの拡張子を確認しているでしょうか？
間違った拡張子を使っていると画像が綺麗に表示されず、ホームページを作る側も見る側もストレスになってしまいます。

それでは画像をクリアに表示させるために、画像ファイルによく使われる３つの拡張子の種類と特徴を解説しましょう。

アニメーションが特徴的なGIF

GIFとは「Graphic Interchange Format」の略で、拡張子は「.gif」になります。
最大256色まで使うことができる圧縮画像形式です。

256色というと多いように感じますがかなり少なく、ビット数にすると８ビットになります。
かなり色の表現が限られてしまうため、単色やベタ面の多い平坦な画像向きの拡張子です。
256色以上の色を使わないようなロゴやリンクボタン、アイコン、イラストなどにおすすめ！

また、画像に使われている色の中で１色だけを選んで透明にすることもできます。
通常Web上の画像は四角形ですが、GIF画像の背景を透明にすることで四角形以外の形で表示できるのです。

そしてGIFの最大の特徴は何よりも、アニメーションにできるということ！

SNSでもGIFアニメーションのスタンプが使えるものもありますよね。
あれは複数の画像を連続してつなぎ、パラパラマンガのように表示させる仕組みになっています。
テレビのように滑らかな動きはできませんが、アクセントとなる動きを加えたいときに良いでしょう。

フルカラーで一番綺麗に映えるJPG

JPGは「Joint Photograph Experts Group」の略でJPEGと表記されることも。
拡張子は「.jpg」と「.jpeg」の２種類ありますがどちらも同じです。

こちらはGIFに比べ、24ビットとなる1670万色まで使うことのできる拡張子。
多くの色数が必要な写真や画像に向いています。

また、色調の微妙な変化も綺麗に表示できるのでグラデーション調の画像にもおすすめです。
逆に単色で十分なアイコンやイラストをJPGにすると滲んだように汚くなってしまうので注意！

このJPGは「人の目は明るさの変化より色調の変化に鈍感」という特徴を利用して、保存するときに微妙な色調変化の部分を切り捨ててファイルを小さくする仕組みになっています。

そのため圧縮率を上げすぎてしまうと色が均一化されてしまい、モザイク状やノイズ状に見えてしまうというデメリットも。

一度捨てられた色調変化は元に戻せなくなってしまうので、元画像のバックアップを保存しておくと安心でしょう。

使う色数が多いとファイルサイズが大きくなるので、容量を小さくしたいときは色数の少ない画像を利用するのが一番クリアに見えて確実です。

Web利用に最適なPNG

PNGは「Portable Network Graphic」の略で、拡張子は「.png」になります。
実はGIFとJPGの良いとこどりをした、かなり優秀な圧縮形式なのです！

まず８ビットカラーはもちろん、1670万色のフルカラーにも対応可能。
圧縮率も高いので同じ画像内容のGIFと比べてみると、10%〜30%小さいファイルサイズになり、保存場所の容量もとりません。

そしてJPGが圧縮することで色調変化の部分を捨てていたのに対し、PNGは圧縮してもデータが捨てられることのない可逆圧縮形式になっています。

またGIFのように色を指定して透明にできるのですが、PNGの場合は１色だけでなく複数の透明色を指定可能です。

これだけたくさんのメリットがあるPNGですが、デメリットとしてはアニメーションにはできないことと、フルカラーだとJPGよりもファイルサイズが大きくなってしまうことが挙げられます。

利便性の高い拡張子ですが、使う画像の内容やサイズによってGIFやJPGとも使い分けなければいけません。

新しい画像形式でもあるため、Windows版のInternet Explorer 4.0以上、Mac版ではInternet Explorer 5.0以上のブラウザじゃないと表示できないので注意しましょう。

拡張子の使い分け方法

画像に使われる拡張子の特徴は大まかにわかったでしょうか？

使用したい画像、利用する場面に合わせて拡張子を選ばないと、画像はクリアに表示されません。
それでは拡張子の使い分け方法を簡単に解説します。

まず最も使える色数が少ないGIFは、単色のロゴやシンプルなアイコンなどに使うのが一番です。
これを欲張ってJPGにすると逆に綺麗に表示されません。

またGIF唯一の特徴でもあるアニメーションも作ってみるとおもしろいでしょう。

JPGは綺麗な写真に使える拡張子ですが、色数が多い分ファイルサイズも大きくなってしまいます。
どちらかというとWeb画像よりもパンフレットやカタログなど印刷物の写真に利用するのがおすすめ。

PNGは幅広く使うことができ、Webでの利用に一番適している拡張子です。
透明部分を指定するときやファイルサイズを小さくしたいときに使ってみましょう。

ホームページ画像をクリアに表示する拡張子の種類と特徴まとめ

拡張子の種類や特徴、違いを理解していないと、ホームページに入れる画像がクリアに表示されずにモヤモヤしてしまいます。

ユーザーの第一印象を良くしたいなら、使う画像の内容だけでなく拡張子にも気をつけたいところです。

GIF、JPG、PNGはそれぞれ特徴やメリット（強み）となる部分が違うため、どの画像をどのように表示させたいか、ファイルサイズはどうしたいかなどによって使い分けるようにしましょう！