WEBサイト（ホームページ）を作成する時に、ページに彩を添えるには画像データが必要になります。

その際に、どのファイル形式を使ったら良いか、迷ってしまうことはありませんか？

もしかしたら、あまり意識することなく使っている方もいるかもしれませんが、実は画像ファイル形式にはたくさんの種類があります。

その中でも特にWEBに特化して、ぜひ覚えておいて欲しいものもいくつかありますので、今回は画像ファイル形式についてお話ししたいと思います。

従来の画像ファイル形式について

最近はスマホやデジカメの性能が良くなって、より高画質な画像を扱う機会が増えてきたので、新しい画像ファイル形式が求められていますが、現在でもよく使われているファイル形式3種を確認していきましょう。

GIF（ジフ）形式

表示色を256色に制限することでファイルサイズを圧縮する特許技術を採用しています。

拡張子は、「.gif」です。

色数が少ないイラストなどに向いているファイル形式ですが、特に背景を透過したり、アニメーションに対応したりと特徴的な性格を持っているため、今でも使われています。

• 表示色は256色
• 拡張子は、「.gif」
• 背景を透過できる
• アニメーションにも対応

JPEG（ジェイペグ）形式

写真画像の圧縮に向いているファイル形式ですが、高圧縮率になるほど画質が劣化する特徴があります。

拡張子は、「.jpg」「.jpeg」など。

非可逆方式でファイルサイズを圧縮するため、一度変換すると元に戻すことができません。

• 非可逆方式で画像を圧縮するファイル形式
• 拡張子は、「.jpg」「.jpeg」など
• 写真の加工に向いているが、背景透過はできない
• 高圧縮率で変換すると画質が劣化する

PNG（ピング）形式

GIF形式とJPEG形式の良いところを併せ持つファイル形式です。

拡張子は、「.png」

GIF形式のように256色に制限できたり背景透過が可能で、JPEG形式のようにフルカラーで写真素材を扱うこともできます。

これにより、丸く切り取った写真のような加工も可能になったため、特に指定が無ければPNG形式で画像を扱うことが一般的になりました。

• 可逆方式で画像を圧縮することが可能
• 拡張子は、「.png」
• GIF形式のように背景透過が可能
• JPEG形式のように写真素材の圧縮が可能

新しく生まれた画像ファイル形式

上記3種のファイル形式ではWEB上で扱うことが難しくなってきた高画質で大きな画像データは、ファイルサイズも大きくなってしまいます。

さらに、GoogleのSEO対策としても、最近ではWEBページの表示速度も求められるようになっています。

そこで従来のファイル形式よりもさらに高画質で大容量の画像データも扱えるものが生まれました。

JPEG2000形式

従来のJPEG形式から、より高画質で高圧縮率を実現した規格です。

拡張子は、「.jpc」「.jp2」「.j2k」など。

従来より約50%ほどファイルサイズを圧縮でき、それでいて高画質を実現しています。

そのため、画像の加工処理に時間がかかってしまうという難点があり、現在はあまり普及していません。

• 拡張子は、「.jpc」「.jp2」「.j2k」など
• JPEGの後継規格で、より高画質・高圧縮率を実現
• 画像加工に時間がかかる
• 現在はあまり普及していない

WEBP（ウェッピー）形式

Google社が開発した、新しい画像ファイル形式です。

拡張子は、「.webp」です。

JPEGやPNGの形式よりも高圧縮率で加工ができ、背景透過も可能となっています。

これまでは、ブラウザが対応していないこともあり、なかなか普及が進んでいませんでしたが、現在ではほぼ全てのブラウザで対応しているため、今後はGIFやJPEG、PNG形式のファイルに置き換えられていくと思われます。

ただし、現在はAdobe社のPhotoshopなどで直接変換できないため、別途ツールによる変換が必要となっています。

• Googleが開発した画像ファイル形式
• 高圧縮率で画像を加工できる
• 背景透過も可能
• 別途ツールで変換が必要

SVG（エスブイジー）形式

これを新しい画像ファイル形式というには語弊があるかもしれませんが、ここで紹介している形式とは異質なものになっています。

拡張子は、「.svg」です。

ベクター画像による形式なので、拡大縮小しても画像の劣化がありません。

画像ファイルではありますが、中身はソースコードで書かれており、写真や複雑なイラストには向きません。

• 拡張子は、「.svg」
• 複雑なデザインは読み込みが遅くなる
• ベクター画像方式で拡大縮小でも劣化しない
• ファイルの実態はソースコード
• ブラウザ上でしか扱えない
• 写真や複雑なイラストには不向き

（おまけ）WEBには使えない画像ファイル形式

おまけですが、WEB上では扱うことができない画像ファイル形式について、いくつか紹介していきます。

BitMap（ビットマップ）形式

Windows専用のファイル形式です。

拡張子は、「.bmp」

非圧縮形式であるため、ファイルサイズが大きくなってしまい、WEB上で扱うことができません。

• Windows専用のファイル形式
• 拡張子は、「.bmp」
• 非圧縮形式のため、WEB上で扱えない

TIFF形式

古くから存在するファイル形式ですが、解像度や色数などの情報をファイル内に収録しているため、アプリケーションに依存しないという特徴があります。

拡張子は、「.tif」「.tiff」になります。

多くの編集ソフトにも対応しており、様々な圧縮方式にも対応しているのですが、あまり高圧縮を実現できないので、WEB上で扱うよりも印刷物として扱われることが多いファイル形式です。

• 古くから存在するファイル形式
• 拡張子は、「.tif」「.tiff」
• 設定情報をファイルに格納している
• 様々な圧縮方式に対応
• 印刷物としての利用が多い

RAW形式

デジカメで撮影した写真画像のプレーンなファイル形式です。

拡張子は、「.raw」

rawは、「生」「未加工」などの意味で、非圧縮形式で保存されるため、画質を劣化させずに扱うことができますが、ファイルサイズが大きくなってしまい、そのままではWEB上で扱うことができません。

• デジカメで撮影したファイル形式
• 拡張子は、「.raw」
• 非圧縮形式で画質を劣化させない
• ホワイトバランスやコントラストなどの撮影情報を保持している

HEIC/HEIF（ヒーフ）形式

iOS11以降のiPhoneで撮影した際に使用されるファイル形式です。

拡張子は、「.heic」

高画質を維持したまま、高圧縮を実現した画像ファイル形式ですが、windowsでは表示できない場合があるため、そのままではWEBで扱うことができません。

• iPhoneで撮影した写真のファイル形式
• 拡張子は、「.heic」
• 高画質・高圧縮率を実現している
• windowsでは扱えない場合がある

まとめ

色々な画像ファイル形式をご紹介してきましたが、WEB上で扱うことができるファイル形式は、限られたものになっています。

WEBサイト（ホームページ）上では、画像データの読み込み速度に影響するため、高圧縮・高解像度が求められるため、ファイルサイズが大きくなってしまうファイル形式はWEBには向いていません。

従来のGIF、JPEG、PNG形式よりも高圧縮率・高解像度のファイル形式が誕生しているので、今後はそちらにシフトしていくことになると思います。

現在では、ほとんどのブラウザで対応が完了しているので、特に指示が無ければ「WEBP形式」を使うようにしましょう！！