[コラム]ウェブサイトで使う画像ファイルの種類と特徴

ウェブサイトでは、いろいろな形式の画像ファイルが使われています。

それぞれの形式と特徴についてご紹介いたします。

JPEG（ジェイペグ）

「Joint Photographic Experts Group」の略。

拡張子は、.jpg、.jpegが使われます。

画像ファイルでは最も多く使われている形式ではないでしょうか。

GIF形式のように色数制限がないため、写真やCGなど色数の多い画像に向いています。
また、圧縮率を変えることでファイル容量を調整することができます。

JPEGは非可逆圧縮を使用して容量を小さくします。

そのデメリットとして、圧縮の際に元の画像にノイズが入り画質が劣化してしまいます。

低い圧縮率であれば、それほど目立つノイズは入りませんが、圧縮率を高くするにつれ、かなり目立ったノイズが多く入るようになります。

GIF（ジフまたはギフ）

「Graphics Interchange Format」の略。

拡張子は、.gifが使われます。

GIFにはいくつかの規格が存在しますが、現在は「GIF87」「GIF87a」「GIF89a」の3種類が使われています。

GIFには、使用できる色数が256色までという制限があります。

そのため、写真などのフルカラー画像には適していません。

逆に色数の少ないイラストや図版では、JPEGよりも容量を抑えることが可能です。

また、GIFでは背景を透過できるのため、イラストを切り抜いたように表示することもできます。

GIFは「LZW」可逆圧縮を用いて高速・高圧縮を実現しています。

一時期GIFには「LZW」の特許問題が浮上して、使用できなくなるのではないかと言われていました。

しかし、2004年に特許が失効したため、現在では問題なく利用できるようになりました。

アニメーションGIF

「GIF89a」では１つのファイルに複数の画像を格納できます。

それによって、パラパラアニメのような効果を作ることが可能です。

手軽にアニメーションを実現する手段として、現在でも広く利用されています。

PNG（ピンまたはピング）

「Portable Network Graphics」の略。

拡張子は、.pngが使われます。

比較的新しい形式で、古いブラウザではサポートされていないものもありました。

現在の一般的なブラウザでは問題なく利用可能です。

PNGは、GIFに特許問題があり使用できなくなる恐れが出たため、誰でも自由に使える画像フォーマットを作ろうと集まった「PNG Group」によって開発されました。

色数に制限もなく、背景透過もでき、圧縮による画質劣化もありません。

写真やイラストどちらでも利用可能で、ほぼ万能な形式です。

アニメーションに関しては、アニメーションPNGがありますが、こちらはブラウザの対応が進んおらず現在はまだ利用することが難しい状況です。

PNGは「Deflate」可逆圧縮を用いているため画質の劣化がありません。

「Deflate」には特許問題もないため、PNGは誰でも自由に使える形式となっています。

ただし、JPEGのように圧縮率を変えて容量を調整するということはできません。

SVG（エスブイジー）

「Scalable Vector Graphics」の略。

拡張子は、.svgが使われます。

規格自体は古くから存在していましたが、ブラウザの対応が進まず使われてきませんでした。

近年SVGが多く使われるようになった背景には、ブラウザの対応が進んだことはもちろんですが、レスポンシブデザインの広がりがあります。

SVGは、JPEGやGIF,PNGとは異なり、ベクター形式の画像フォーマットです。

ベクター形式は、拡大縮小しても劣化することがありません。

そのため、レスポンシブデザインで可変するような画像として使うのに適しています。

また、SVGファイルはXMLで記述されているため、テキストエディタで編集することができます。

逆にテキストデータであるが故、あまり複雑なイラストや画像の場合、ファイル容量が肥大するという欠点があります。

SVGはいろいろなことができます。

アニメーション、クリッピング、フィルター加工、マスキング、他。

だたし、それらを使うときには、ブラウザの対応状況を確認することが必要です。

ブラウザによっては、対応していないものもあり、意図したように表示されない場合があります。

とくにIEで使用するときには、不具合が多いので注意して使いましょう。

2019.10.25