ホームページ用の画像に適したファイル形式とその違いについて

2020.12.11　Posted by Design team

Webデザイン

みなさんは、「拡張子」という言葉をご存知でしょうか。
拡張子とは、テキストファイルなら「.txt」、PDFファイルなら「.pdf」など、ファイル名のドット（.）以降に付いているアルファベットのことを指します。
拡張子が付いていることによって、ファイルの形式を判別することができます。

では、画像ファイルの拡張子を見てみましょう。
「.jpg」という拡張子もあれば、「.png」や「.gif」といったものもありませんか？画像のファイル形式は1つではなく、それぞれ、画像の内容や用途に合った形式で保存することができます。
今回は、ホームページ上で使用される画像ファイルの種類（拡張子）と、その違いについてご紹介します。

拡張子の表示方法

前書きにて拡張子を見てみましょうと言いましたが、
パソコンによっては拡張子が表示されていない場合がありますので、先に表示方法をご紹介します。

①エクスプローラーを開く（何かのフォルダを開くだけでもOKです。）
②メニューバーの「表示」を選択
③リボン（タブの中身）から「ファイル名拡張子」にチェックを入れる

これで、ファイル名の末尾に拡張子が表示されます。

ホームページ上で使用される画像ファイルの種類

ホームページ上で使用される画像ファイルの形式は、主にJPG、PNG、GIFの3種類です。順番に見ていきましょう。

JPG形式

読み方は「ジェイペグ」
拡張子は「.jpg」と「.jpeg」がありますが、拡張子が違うだけでどちらも同じJPGになります。
※昔のOSの仕様でファイル拡張子は3文字までという制約があったため、省略型の「.jpg」が生まれたという経緯があります。現在は4文字も利用できるため、「.jpeg」も問題なく使用できます。
フルカラー1,677色で表現することができます。

メリット

写真や色数の多いイラストなどに適しています。
色数を保ったまま、画像を圧縮（軽く）することができます。

デメリット

圧縮率を上げると画像が劣化してしまいます。
また、劣化した画像を保存すると、元の画質に戻すことはできません。
保存を繰り返すと、どんどん画像が劣化します（非可逆圧縮）。
透明色は全て不透明の状態になって保存されます。
色数が少ない画像の場合、容量がPNGより重くなる場合があります。

PNG形式

読み方は「ピング」
拡張子は「.png」
フルカラー1,677色で表現することができます。

メリット

透明色を使用することができます。
色数の少ないイラストや、透明部分のあるアイコンやロゴの作成に適しています。
何度保存しても画像は劣化しません（可逆圧縮）

デメリット

色数が増えるとJPGよりファイルサイズが重くなることがあります。
写真や色数の多いイラストの容量をJPGとPNGで比較すると、PNGのほうがかなり重くなってしまいます。

GIF形式

読み方は「ジフ」
拡張子は「.gif」
256色で表現することができます。

メリット

複数枚用意することで、アニメーションを作成することができます。
透過処理が可能（半透明は不可）
色数が少ないため、少ない容量で作成が可能です。

デメリット

256色しか使用することができないので、写真などには向きません。
色数の少ないアイコンや、アニメーションを作成する時以外はJPGもしくはPNGで保存するようにしましょう。

不適切なファイル形式でホームページに載せた時に生じる問題

ファイルが重すぎる

色数の多い写真をPNGで保存して、容量が500KBだった場合を想像してみてください。なかなか画像が表示されず、ページを開ききるのが遅くなってしまいます。
表示が遅くなると、ホームページを訪れたユーザーはコンテンツを見ることなく離脱してしまう可能性が高くなります。
また、スマホで訪れた場合はデータ容量を大きく削ってしまうことになり、嫌われる原因ともなってしまうでしょう。

劣化しすぎている

重すぎるのが良くないからといって、JPGファイルの圧縮率を極端に上げたり、写真にGIFを使用するとノイズが入ってボンヤリしてしまったり、色数が減ってしまいます。
商品画像など「見せたい写真」が低クオリティの画像だった場合、本来より悪い状態のように見えてしまい、ユーザーの購買意欲が下がってしまうかもしれません。

いずれも、