高解像度のウェブサイト画像の形式

「百聞は一見にしかず」ということわざは誰でも知っていますが、伝えようとしている内容すべてを価値あるものにするには、どうすればよいのでしょうか。画像の価値をいっそう高める方法はあるのでしょうか。特定のネットワーク接続条件とブラウザーを通して、あるデバイスに表示される画像に最適なフォーマットを選ぶことで、画像が持つインパクトを最大化できる場合があります。

今日のウェブサイトで最も広く使用されている画像フォーマット GIF、JPEG、PNG について、機能、特性および互換性を見てみましょう。また、最近使用されるようになった(そして特定ブラウザー向けの)フォーマットである WebP、JPEG 2000 および JPEG XR についても、同様の情報を見てみます。最後に、JPEG に代わるものとしてデザインされた新しい画像フォーマットである BPG(Better Portable Graphics)について議論します。

GIF

Graphics Interchange Format(GIF)は、ビットマップの画像フォーマットで、幅広い対応機能とポータビリティにより、Web で広く使用されるようになりました。

このフォーマットでは、各画像でピクセルあたり 8 ビットまで対応しており、1 つの画像で 256 色までの異なる色を参照することができます。また、アニメーション(各フレームで 256 色までのパレットを別途使用可能)と 1 ビット透過にも対応しています。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
対応
対応
対応    
対応
対応
対応

JPEG

Joint Photographic Experts Group(JPEG)は、非可逆性のグラフィックファイルです。JPEG 画像には jpg、jpe、jif、jfif、jfi など複数のファイル拡張子があります。JPEG ファイルには JPG/Exif(デジタルカメラおよび写真撮影機材)と JPG/JFIF(Web)という 2 つのサブフォーマットがあります。

JPEG は、1680 万色までの異なる色に対応します。JPEG ではアニメーションと透過はサポートされません。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
対応
対応
対応    
対応
対応
対応

PNG

Portable Network Graphics(PNG)ファイルは、可逆性、すなわち圧縮しても画像の質に影響がないフォーマットです。PNG は、Graphics Interchange Format(GIF)をオープンソースで発展的に置き換えるものとして考案され、インターネット上で最もよく使用される可逆性の画像圧縮フォーマットです。

PNG-8 は 256 色と 1 ビット透過に対応していて、PNG-24 は 24 ビット、1680 万色に対応しています。PNG はアルファチャネルでスケーラブルな透過(非透過から完全な透明まで)に対応しています。

アニメーションには、Animated Portable Network Graphics(APNG)拡張機能で対応しています。これにより、GIF では 24 ビット画像と 8 ビット透過に非対応なのに対し、アニメーション GIF と同様に動作するアニメーション PNG ファイルが作成可能です。また、非アニメーション PNG ファイルとの後方互換性も維持されています。現時点では、APNG は広く受け入れられてはおらず、したがって、ほとんどの有力ブラウザーが対応していません。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
基本 対応
対応
対応    
対応
>= 7
対応
アニメーション 非対応
対応
対応    
対応
非対応
非対応

WebP

WebP は Google が開発した最新の画像フォーマットで、非可逆性と可逆性両方の圧縮が採用されています。このオープンなフォーマットは、2010 年に広く利用可能となり、ウェブグラフィックスに対する新たな非可逆性圧縮の基準になりました。JPEG 同様、同じ画像品質を維持しながら、より小さなパッケージサイズのトゥルーカラーグラフィックスを作成できます。

WebP は 24 ビット、1680 万色に対応しています。また、アニメーション、ICC プロファイル、XMP メタデータ、アルファチャネルによる透過にも対応しています。

さらに、簡潔で基本的なファイルフォーマットに加え、拡張フォーマットとアニメーションフォーマットにも対応しています。拡張されたコンテナには、カラープロファイル、アニメーション制御、EXIF および XMP などの高度なメタデータを埋め込むことができます。アニメーション画像フォーマットには、ANIM(グローバルなアニメーションパラメーター)および ANIMF(単一フレーム情報)とともに、複数のフレームが含まれています。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
基本 >= 9
>= 29
非対応  
非対応
非対応
>= 11.5
アニメーション >= 32
非対応
非対応   
非対応
非対応
>= 20
拡張 >= 23
>= 29
非対応   
非対応
非対応
>= 12.1

JPEG 2000

JPEG 2000(JP2)は、非可逆性および可逆性の画像圧縮規格およびコーディングシステムです。JP2 は、JPEG 規格に代わるものとして、2000 年に JPEG 委員会によって策定されました。JP2 では任意の色ビット深度を使用できますが、ほとんどの場合、24 ビット色が使用されています。

JP2(ウェーブレットベース)には、JPEG(離散コサインベース)との後方互換性はありません。JP は透過性に対応していますが、アニメーションには対応していません。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
非対応
対応
非対応
>= 5
非対応
非対応

JPEG XR

JPEG XR(eXtended Range)は、連続した色調の写真画像に対する非可逆性/可逆性の圧縮規格およびファイルフォーマットで、もともとは HD Photo の名称で Microsoft によって開発され、特許登録された技術に基づいています。JPEG XR は、アルファチャネルによる透過性とともに、32 ビットまでの色深度に対応しています。JPEG XR は、アニメーションには対応していません。

Chrome
Chrome(iOS)
Firefox    
Safari
IE/Edge
Opera
非対応
非対応 非対応     非対応
>= 10
非対応

BPG

BPG(Better Portable Graphics)は新しい画像フォーマットで、品質やファイルサイズが問題となる場合に、JPEG を代替することを目的としています。高い圧縮率を誇り、同様の品質では、JPEG と比べてファイルサイズが大幅に小さくなります。BPG は可逆性および非可逆性の圧縮のほか、アルファチャネルによる透過、アニメーション、埋め込みメタデータ(色プロファイル、XMP および EXIF メタデータ)にも対応しています。BPG は 14 ビットのカラーチャネルに対応しています(JPEG ではチャネル当たり 8 ビット)。

現在のところ、BPG にもともと対応するブラウザーは存在しないため、BPG 画像の表示には 56KB(gzip 実行後)の JavaScript ライブラリが必要です。

概要

これまで述べた各画像フォーマットの機能と特性について、要約と追加の説明を次の表に示します。

GIF
JPEG PNG:基本 PNG:アニメーション
JPEG 2000
JPEG XR
WebP:基本 WebP:拡張 WebP:アニメーション
インデックス付き色
対応
非対応
対応
対応
非対応
非対応 非対応 非対応 非対応  
フルカラー
非対応
対応
対応   対応 対応 対応 対応
対応 対応  
バイナリ―透過
対応
非対応
対応   対応 非対応
非対応 非対応 非対応 非対応  
完全透過
非対応 
非対応 
対応   対応
非対応
非対応 対応
非対応
非対応  
クロマサブサンプリング
非対応
対応
非対応   非対応  対応 
対応 4:2:0 4:2:0 4:2:0  
プログレッシブロード
対応
対応
対応   対応
対応
対応 非対応
非対応
非対応  
アニメーション 対応
非対応
非対応  
対応
非対応 非対応 非対応
非対応
対応  
非可逆性圧縮
対応
対応
対応   対応
対応
対応 対応
対応
対応  
可逆性圧縮
非対応
非対応
対応   対応
対応
対応 非対応
対応 対応  
バイト数低減
不十分

不十分  

十分
十分 十分
十分
十分  

最も広く使用されているオンライン画像フォーマットの、Akamai Image Manager を使用した管理の詳細をご確認ください。