画像ファイルの種類と形式ガイド
このガイドでは、ウェブブラウザーが一般的に対応している画像ファイルの種類を取り上げ、サイトの画像に使用するための最も適切な形式を選択するのに役立つ観点を提供します。
一般的な画像ファイルの種類
ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。
略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 概要 |
---|---|---|---|---|
APNG | Animated Portable Network Graphics | image/apng |
.apng |
劣化のない一連のアニメーションに最適です(GIF は性能が低い)。 AVIF や WebP はより性能が高いものですが、ブラウザーの対応が狭いのが現状です。 対応: Chrome, Edge, Firefox, Opera, Safari |
AVIF | AV1 Image File Format | image/avif |
.avif |
高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適しています。 PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含める(つまり、 |
GIF | Graphics Interchange Format | image/gif |
.gif |
単純な画像やアニメーションに適しています。 PNG の方が劣化なしかつインデックスカラーの静止画に適しており、アニメーションシーケンスには WebP, AVIF, APNG を検討してください。 対応: Chrome, Edge, Firefox, IE, Opera, Safari |
JPEG | Joint Photographic Expert Group image | image/jpeg |
.jpg , .jpeg , .jfif , .pjpeg , .pjp |
静止画の非可逆圧縮に適しています(現在最も普及しています)。 PNG の方がより正確な画像の再現が必要な場合に適しており、 WebP/AVIF の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。 |
PNG | Portable Network Graphics | image/png |
.png |
PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 WebP/AVIF はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。 |
SVG | Scalable Vector Graphics | image/svg+xml |
.svg |
ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。 対応: Chrome, Edge, Firefox, IE, Opera, Safari |
WebP | Web Picture format | image/webp |
.webp |
画像とアニメーションの両方に最適です。 WebP は PNG や JPEG よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 AVIF のほうが圧縮機能はわずかに優れていますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。 対応: Chrome, Edge, Firefox, Opera, Safari |
メモ: PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている(つまり、市場シェアがゼロに近づいてきている)ため、人気が高まってきています。
以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります (一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです)。
略称 | ファイル形式 | MIME タイプ | ファイル拡張子 | 説明 |
---|---|---|---|---|
BMP | ビットマップファイル | image/bmp |
.bmp |
Chrome, Edge, Firefox, IE, Opera, Safari |
ICO | Microsoft Icon | image/x-icon |
.ico , .cur |
Chrome, Edge, Firefox, IE, Opera, Safari |
TIFF | Tagged Image File Format | image/tiff |
.tif , .tiff |
Safari |
注: 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。
メモ: Safari 11.1では、アニメーション GIF の代替として、動画形式を使用する機能が追加されました。 他のブラウザは対応していません。 詳しくは、 Chromium のバグ、Firefox のバグを参照してください。
画像ファイルの種類の詳細
以下の節では、ウェブブラウザーで対応している画像ファイルの種類について簡単に説明します。
以下の表において、成分あたりのビット数とは、各色成分を表現するために使用されるビット数を意味します。 例えば、 RGB の色深度が 8 であれば、赤、緑、青の各成分は 8 ビットの値で表現されることになります。 一方、ビット深度とは、メモリー上で各画素を表現するために使用されるビット数の合計です。
APNG (Animated Portable Network Graphics)
APNG は Mozilla によって最初に導入されたファイル形式で、 PNG 規格を拡張してアニメーション画像の対応を追加したものです。概念的には何十年も使われているアニメーション GIF 形式に似ていますが、アニメーション GIF が 8 ビットの色深度しか対応していないのに対し、 APNG の方が様々なインデックスカラーに対応しているという点で優れています。
APNG は、進捗インジケーターやアクティビティスロバーなど、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適です。例えば、 APNG は Apple の iMessage アプリ (および iOS のメッセージアプリ) のアニメーションステッカーを作成する際に対応している形式の 1 つです。また、ウェブブラウザーのユーザーインターフェイスのアニメーション部分にもよく使用されています。
MIME タイプ | image/apng |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイル拡張子 | .apng |
||||||||||||||||||
仕様書 | wiki.mozilla.org/APNG_Specification | ||||||||||||||||||
ブラウザーの互換性 | Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8 | ||||||||||||||||||
最大の大きさ | 2,147,483,647×2,147,483,647 画素 | ||||||||||||||||||
対応している色モデル |
|
||||||||||||||||||
圧縮 | 可逆 | ||||||||||||||||||
ライセンス | Creative Commons Attribution-ShareAlike license (CC-BY-SA) version 3.0 以降の下にフリーかつオープンです。 |
AVIF 画像
AVIF (AV1 Image File Format) は、 AV1ビットストリームを HEIF (High Efficiency Image File Format) コンテナーにエンコードした、強力でオープンソース、ロイヤリティフリーのファイル形式です。
メモ: AVIF は、ウェブコンテンツで画像を共有するための「次の大きな流れ」となる可能性を秘めています。 AVIF は、複雑なライセンスや特許使用料に煩わされることなく、最先端の機能と性能を提供し、他の類似製品を抑えています。
AV1 は、もともとインターネットでの映像伝送用に設計された符号化方式です。 この形式は、近年の動画エンコーディングの著しい進歩の恩恵を受けており、関連するハードウェアレンダリングの対応の恩恵を受ける可能性があります。 しかし、動画と画像のエンコーディングには異なる要件があるため、場合によっては不利になることもあります。
この形式は、次のものを提供します。
- 視覚的に同程度の圧縮レベルであれば、 JPG や PNG と比べて優れた非可逆圧縮が可能です(例: 非可逆 AVIF 画像は JPEG 画像より約 50% 小さい)。
- 一般的に、 AVIF は WebP よりも圧縮率が高く、同じ JPG セットで中央値 50% 対 30% の圧縮率です(出典: AVIF WebP 比較)。 AVIF WebP 比較 (CTRL Blog)).
- 可逆圧縮圧縮。
- アニメーション/複数画像の格納(アニメーション GIF に似ていますが、圧縮率がはるかに優れています)。
- アルファチャンネル(つまり、透明度)の対応。
- ハイダイナミックレンジ (HDR): 画像の最も明るい部分と最も暗い部分の間のより大きなコントラストを表現できる画像の保存に対応しています。
- 広い色域: 画像がより広い範囲の色を含むことに対応しています。
AVIF はプログレッシブレンダリングに対応していないので、ファイルを表示する前に完全にダウンロードする必要があります。 AVIF ファイルは同等の JPEG や PNG ファイルよりもはるかに小さいため、ダウンロードと表示が迅速に行われ、実際のユーザー操作への影響が極めて小さくなります。 ファイルサイズが大きい場合は影響が大きくなるため、プログレッシブレンダリングを対応している形式の使用を検討する必要があります。
AVIF は、デスクトップでは Chrome、Opera、Firefox で対応しています(Firefox は静止画に対応していますが、アニメーションには対応していません)。
対応はまだ包括的ではなく(歴史もあまりありません)、WebP, JPEG, PNG 形式などで、 <picture>
要素 (またはその他の方法) を使用して代替形式を提供する必要があります。
MIME タイプ | image/avif |
---|---|
ファイルの拡張子 | .avif |
仕様書 | |
ブラウザーの互換性 | Chrome 85, Opera 71, Firefox 93
|
最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 |
対応しているカラーモード |
カラーモードの対応情報は AV1 Bitstream & Decoding Process Specification の 6.4.2 : Color config semantics にあります。 主なものとしては、以下のものがあります。
|
圧縮 | 可逆および非可逆 |
ライセンス | ロイヤリティフリーです。ライセンス情報は http://aomedia.org/license/ にあります。 |
BMP (ビットマップファイル)
BMP (Bitmap 画像) ファイル形式は、 Windows コンピューターで最も普及しており、ウェブアプリやコンテンツではふつう、特殊な場合にのみ使用されます。
警告: ウェブサイトのコンテンツに BMP ファイルを使用することは、一般的に避けてください。 一般的な BMP ファイルは、データを非圧縮のラスター画像として表現するため、 png や jpg の画像形式と比較してファイルサイズが大きくなります。 より効率的な BMP 形式もありますが、あまり普及しておらず、ウェブブラウザーが対応していることもほとんどありません。
BMP は理論的には様々な内部データ表現に対応しています。
最も単純でよく使われる形式の BMP ファイルは、非圧縮のラスター画像で、各画素が 3 バイトでその赤、緑、青の成分を表し、各行は 4 バイトの倍数の幅になるよう 0x00
バイトでパディングされています。
その他のデータ表現も仕様で定義されていますが、広く使われているわけではなく、完全に未実装であることが多いものです。 これらの機能には、異なるビット深度、インデックス付きカラー、アルファチャンネル、異なる画素オーダー(既定では、 BMP は左上隅から右と下に向かってではなく、左下隅から右と上に向かって書き込まれます)の対応が含まれます。
理論的には複数の圧縮アルゴリズムに対応しており、 BMP ファイル内に JPEG や PNG という形式で画像データを格納することも可能です。
MIME タイプ | image/bmp |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .bmp |
||||||||||||||||||
仕様書 | 仕様書はありません。ただし、 Microsoft は docs.microsoft.com/ja/windows/desktop/gdi/bitmap-storage で形式についての一般的なドキュメントを提供しています。 | ||||||||||||||||||
ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべての版 | ||||||||||||||||||
最大の画像の大きさ | 形式のバージョンによって 32,767×32,767 または 2,147,483,647×2,147,483,647 画素のどちらかです。 | ||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||
圧縮 | 非可逆圧縮や可逆圧縮など、複数の圧縮方式に対応しています。 | ||||||||||||||||||
ライセンス |
Microsoft Open Specification Promise で扱っています。
マイクロソフトは BMP に対して特許を保有していますが、特定の条件を満たす限り、特許権を主張しないという約束を発表しています。
ただし、これはライセンスとは異なります。 BMP は、 Windows Metafile Format (.wmf ) に含まれます。
|
GIF (Graphics Interchange Format)
1987 年、オンラインサービスプロバイダーである CompuServe は、サービスの全会員が使用できる圧縮グラフィック形式を提供するため、 GIF (Graphics Interchange Format) 画像ファイル形式を導入しました。 GIF は Lempel-Ziv-Welch (LZW) アルゴリズムを使用して、 8 ビットのインデックスカラーグラフィックを可逆圧縮します。 GIF は XBM とともに、 HTML で対応された最初の 2 つのグラフィック形式のうちのひとつでした。
GIF の各画素は 8 ビットの値で表され、 24 ビット(赤、緑、青それぞれ 8 ビット)のカラーパレットへのインデックスとなります。カラーテーブルの長さは常に 2 のべき乗です(つまり、パレットは 2、4、8、16、32、64、256 の項目があります)。 255 または 256 色以上を示すには、ふつうディザリングが使用されます。 カラーパレットを持つ複数の画像ブロックをタイル状に並べてトゥルーカラー画像を作成することは技術的には可能ですが、実際にはほとんど行われません。
画素は不透明です。ただし、特定のカラーインデックスが透明と指定されている場合は、その値で着色された画素は完全に透明になります。
GIF は簡単なアニメーションに対応しています。最初の完全なフレームに続いて、フレームごとに変化する部分を反映した一連の画像を提供します。
GIF は、そのシンプルさと互換性から、何十年にもわたって非常に人気がありました。 アニメーションに対応したことで、ソーシャルメディア時代に人気が再燃し、短い「動画」やミームなどの簡単なアニメーションにアニメーション GIF が広く使われるようになりました。
GIF のもう一つの人気のある機能はインターレースの対応で、画素列を順番通りに保存しないため、部分的に受信したファイルを低画質で表示することができるものです。 これは、ネットワーク接続が遅い場合に特に有効です。
GIF は単純な画像やアニメーションに適していますが、フルカラー画像を GIF に変換すると満足のいくディザリングが得られないことがあります。 通常、新しいコンテンツは可逆圧縮やインデックスカラーの静止画には PNGを、可逆圧縮のアニメーションには APNG を使用することを検討してください。
MIME タイプ | image/gif |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .gif |
||||||||||||||||||
仕様書 | GIF87a specification GIF89a specification |
||||||||||||||||||
ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン | ||||||||||||||||||
最大の画像の大きさ | 65,536×65,536 画素 | ||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||
圧縮 | 可逆圧縮 (LZW) | ||||||||||||||||||
ライセンス | GIF 形式自体はオープンですが、 LZW 圧縮アルゴリズムは 2000 年代初頭まで特許で保護されていました。 2004 年 7 月 7 日現在、関連する特許はすべて失効しており、 GIF 形式は自由に使用することができます。 |
ICO (Microsoft Windows icon)
ICO (Microsoft Windows icon) ファイル形式は、 Windows システムのデスクトップアイコン用に Microsoft が設計しました。
しかし、 Internet Explorer の初期バージョンでは、ウェブサイトのルートディレクトリーに favicon.ico
という ICO ファイルを用意して、ファビコン - お気に入りメニューやサイトのアイコン表現が役立つその他の場所に表示するアイコンを指定することができます。
ICO ファイルには、複数のアイコンを含むことができ、それぞれの詳細が記載されたディレクトリーから始まります。 ディレクトリーの後に、アイコンのデータが続きます。 各アイコンのデータは、ファイルヘッダーを含まない BMP 画像か、ファイルヘッダーを含む完全な PNG 画像のどちらかを使用することができます。 ICO ファイル内で PNG を使用する方法は Windows Vista までは対応しておらず、対応が十分でない可能性があるため、 ICO ファイルを使用する場合は、 BMP 形式を使用することをお勧めします。
警告: ICO ファイルは、ウェブコンテンツに使用すべきではありません。
また、ファビコンでの利用は 異なる利用場面のアイコンの提供 で述べたように、 PNG ファイルと <link>
要素を使用することで抑制されています。
MIME タイプ |
image/vnd.microsoft.icon (公式),
image/x-icon (Microsoft が使用)
|
||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .ico |
||||||||||||||||||||||||||||||||||||
仕様書 | |||||||||||||||||||||||||||||||||||||
ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン | ||||||||||||||||||||||||||||||||||||
最大の画像の大きさ | 256×256 画素 | ||||||||||||||||||||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||||||||||||||||||||
圧縮 | BMP 形式のアイコンは、ほぼ常に可逆圧縮が使用されますが、非可逆圧縮の方法も利用できます。 PNG 形式のアイコンは常に可逆圧縮されます。 | ||||||||||||||||||||||||||||||||||||
ライセンス | — |
JPEG (Joint Photographic Experts Group image)
JPEG (ふつう "ジェイペグ" と発音します)画像形式は、現在もっとも広く使用されている静止画向けの非可逆圧縮形式です。 特に写真に有効です。図や表など鮮明さが必要なコンテンツに非可逆圧縮を適用すると、満足の行く結果が得られないことがあります。
JPEG はファイル形式というより、写真を圧縮するためのデータ形式です。 JFIF (JPEG File Interchange Format) 仕様書が、私たちが "JPEG" 画像と考えているファイル形式を記述しています。
MIME タイプ | image/jpeg |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 |
.jpg , .jpeg , .jpe ,
.jif , .jfif
|
||||||||||||||||||
仕様書 | jpeg.org/jpeg/ | ||||||||||||||||||
ブラウザーの互換性 | Chrome, Edge, Firefox, Internet Explorer, Opera, Safari のすべてのバージョン | ||||||||||||||||||
最大の画像の大きさ | 65,535×65,535 画素 | ||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||
圧縮 | 非可逆圧縮です。離散コサイン変換に基づいています。 | ||||||||||||||||||
ライセンス | 2006 年 10 月 27 日現在、米国における特許はすべて失効しています。 |
PNG (Portable Network Graphics)
PNG ("ピング"と読みます)画像形式は、 より効率的な圧縮を行うために可逆圧縮または非可逆圧縮を使用し、GIFより高い色深度を対応し、アルファ透過も完全に対応します。
PNG は広く対応されており、すべての主要なブラウザーがその機能を完全に対応しています。 Internet Explorer はバージョン 4〜5 で PNG 対応を導入しましたが、 IE9 まで完全には対応せず、長年にわたって、かつて存在した Internet Explorer 6 を含め、数多くの悪名高いバグがありました。 そのため PNG の普及は遅れましたが、現在では特に元画像の正確な再現が必要な場合によく使われるようになっています。
MIME タイプ | image/png |
||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .png |
||||||||||||||||||||||||||||||||||||||||||
仕様書 | w3.org/TR/PNG | ||||||||||||||||||||||||||||||||||||||||||
ブラウザーの互換性 |
|
||||||||||||||||||||||||||||||||||||||||||
最大の画像の大きさ | 2,147,483,647×2,147,483,647 画素 | ||||||||||||||||||||||||||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||||||||||||||||||||||||||
圧縮 | 可逆圧縮で、任意で GIF のようなインデックスカラーがあります。 | ||||||||||||||||||||||||||||||||||||||||||
ライセンス | ©2003 W3C (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. No known royalty-bearing patents. |
SVG (Scalable Vector Graphics)
SVG は XML ベースのベクターグラフィック形式で、画像の内容を、図形や線の作成、色やフィルターの適用などの描画コマンド群として指定するものです。 SVG ファイルは、図やアイコンなど、任意の大きさで正確に描画できる画像に適しています。 そのため、最近のウェブデザインでは、ユーザーインターフェイスの素材としてよく使われています。
SVG ファイルはテキストファイルで、解釈されると希望する画像が描画されるソースコードを含んでいます。 例えば、この例では、初期サイズ 100 × 100 の描画領域を定義し、その中に斜めに引いた線が含まれています。
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>
SVG はウェブコンテンツで 2 通りの使い方ができます。
<svg>
要素を HTML に直接書き、その中に SVG 要素を入れて画像を描く。- 他のいずれかの画像種別で使用することができるあらゆる場所で表示する。
<img>
や<picture>
要素、 CSS のbackground-image
プロパティなどです。
SVG は、一連の描画コマンドで表現できる画像に最適です。特に、画像が描画されるサイズが不明であったり、変動する可能性がある場合、 SVG は希望するサイズに滑らかに拡大縮小するので、最適な選択と言えます。 ビットマップ画像や写真画像には適していませんが、 SVG の中にビットマップ画像を含めることは可能です。
MIME タイプ | image/svg+xml |
|||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .svg |
|||||||||||||||||||||
仕様書 | w3.org/TR/SVG2 | |||||||||||||||||||||
ブラウザーの互換性 |
|
|||||||||||||||||||||
最大の画像の大きさ | 無制限 | |||||||||||||||||||||
カラーモードの対応 | SVG 内の色は、 CSS 色構文を使用して指定されます。 | |||||||||||||||||||||
圧縮 | SVG ソースは転送中に HTTP 圧縮技術を使用したり、ディスク上で .svgz ファイルを使用したりすることで圧縮できます。 |
|||||||||||||||||||||
ライセンス | ©2018 W3C (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. No known royalty-bearing patents. |
TIFF (Tagged Image File Format)
TIFF はスキャンした写真を格納するために作成されたラスターファイル形式ですが、あらゆる種類の画像に使用することができます。 これらはある意味で「重い」形式であり、 TIFF のファイルは他の画像形式よりも大きくなる傾向があります。 これは、多くの場合メタデータが含まれていることと、ほとんどの TIFF 画像が非圧縮か、圧縮後のファイルがかなり大きくなってしまう圧縮アルゴリズムを使用しているためです。
TIFF は様々な圧縮方式に対応していますが、最も一般的に使用されているのは、 FAX ソフトウェアで使用されている CCITT グループ 4 (古い FAX システムではグループ 3)の圧縮方式と、 LZW および非可逆 JPEG の圧縮方式です。
TIFF ファイルのそれぞれの値は、タグ(画像の幅など情報の種類を示す)と型(データの格納形式を示す)で指定し、そのタグに割り当てる値の配列の長さを続けます(単一の値でも、すべてのプロパティは配列で格納されます)。
これにより、同じプロパティに異なるデータ型を使用することができます。
たとえば、画像の幅である ImageWidth
は、タグ 0x0100
を用いて格納され、 1 項目の配列となります。
タイプ 3 (SHORT
) を指定すると、 ImageWidth
の値は 16 ビットで格納されます。
タグ | 型 | サイズ | 値 |
---|---|---|---|
0x0100 (ImageWidth ) |
0x0003 (SHORT ) |
0x00000001 (1 項目) |
0x0280 (640 画素) |
タイプ 4 (LONG
) では、幅を 32 ビット値で格納します。
タグ | 型 | サイズ | 値 |
---|---|---|---|
0x0100 (ImageWidth ) |
0x0004 (LONG ) |
0x00000001 (1 項目) |
0x00000280 (640 画素) |
1 つの TIFF ファイルに複数の画像を含めることができます。これは、例えば複数ページの文書(複数ページのスキャン文書や受信した FAX など)を表現するために使用される場合があります。 ただし、 TIFF ファイルを読み込むソフトウェアは、最初の画像にのみ対応する必要があります。
TIFF は、 RGB だけでなく、さまざまな色空間に対応しています。 CMYK や YCbCr などがあり、印刷物や映画、テレビなどのメディア向けの画像を保存するのに適しています。
一昔前までは、ウェブコンテンツの中で TIFF 画像に対応しているブラウザーもありましたが、現在では特別なライブラリーやブラウザーのアドオンを使用する必要があります。 しかし、精密な編集や印刷を目的とした写真やアートワークを配布する場合、ダウンロード可能な TIFF ファイルを提供することが一般的です。
MIME タイプ | image/tiff |
|||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .tif , .tiff |
|||||||||||||||||||||
仕様書 | adobe.io/open/standards/TIFF.html | |||||||||||||||||||||
ブラウザーの互換性 | TIFF の対応はどのブラウザーにも組み込まれておらず、ダウンロード形式としての価値しかありません。 | |||||||||||||||||||||
最大の画像の大きさ | 4,294,967,295×4,294,967,295 画素 (理論値) | |||||||||||||||||||||
カラーモードの対応 |
|
|||||||||||||||||||||
圧縮 | ほとんどの TIFF ファイルは非圧縮ですが、可逆圧縮の PackBits と LZW 圧縮、非可逆圧縮の JPEG 圧縮に対応しています。 | |||||||||||||||||||||
ライセンス | ライセンスは不要(ただし、使用するライブラリーに関連するものは除く)。既知の特許はすべて失効しています。 |
WebP 画像
WebP は、VP8 動画コーデックに基づく予測符号化による非可逆圧縮と、反復データの置換を使用した可逆圧縮に対応しています。 非可逆圧縮の WebP 画像は、視覚的に同程度の圧縮レベルの JPEG 画像よりも平均 25 ~ 35% 縮小されます。 可逆圧縮の WebP 画像は、 PNG 形式の同じ画像と比較して、通常 26% 縮小されます。
WebP はアニメーションにも対応しています。非可逆圧縮の WebP ファイルでは、画像データは VP8 ビットストリームで表現され、複数のフレームを含むことができます。
可逆圧縮の WebP はアニメーションを記述した ANIM
チャンクと、アニメーションシーケンスのフレームを表す ANMF
チャンクを保持します。
ループはサポートされています。
WebP は現在、主要なウェブブラウザーの最新バージョンが幅広く対応していますが、歴史的に深く対応してはいません。
JPEG または PNG 形式の代替画像を、 <picture>
要素などで提供してください。
MIME タイプ | image/webp |
||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .webp |
||||||||||||||||||||||||||||
仕様書 |
RIFF Container Specification |
||||||||||||||||||||||||||||
ブラウザーの互換性 |
WebP は Firefox 96 および Chrome 50 以降で、画像のエクスポートに使用することもできます(対応バージョンの詳細情報は |
||||||||||||||||||||||||||||
最大の画像の大きさ | 16,383×16,383 画素 | ||||||||||||||||||||||||||||
カラーモードの対応 | 非可逆の WebP は、画像を 8 ビット Y'CbCr 4:2:0 (YUV420) 形式で格納します。 可逆の WebP は 8 ビット ARGB カラーで、それぞれの成分が 8 ビットであり、合計で画素あたり 32 ビットです。 | ||||||||||||||||||||||||||||
圧縮 | 可逆(ハフマン、LZ77、カラーキャッシュコード)または非可逆(VP8) | ||||||||||||||||||||||||||||
ライセンス | ライセンスは不要で、ソースコードも公開されています。 |
メモ: Safari 14、すなわちバージョン 14.0 は WebP の対応がアナウンスされているにもかかわらず、 .webp 画像は macOS デスクトップではネイティブで表示されません。一方、 Safari の iOS 14 版では .webp 画像が正しく表示されます。
XBM (X Window System Bitmap file)
XBM (X Bitmap) ファイルは、ウェブで最初に対応されましたが、もはや使用されておらず、その形式には潜在的なセキュリティ上の懸念があるため、避けるべきです。 最近のブラウザーは何年も前から XBM ファイルに対応していませんが、古いコンテンツを扱っていると、まだ残っているものが見つかるかもしれません。
XBM は画像の内容をバイトの配列として表現するために C 言語のコードの断片を使用します。
各画像は 2 つから 4 つの #define
ディレクティブからなり、ビットマップの幅と高さを(画像がカーソルとして設計されている場合は、オプションでホットスポットも)与え、その後に unsigned char
の配列が続き、それぞれの値は 8 個の 1 ビットモノクロ画素から構成されます。
画像は幅 8 画素の倍数でなければなりません。 例えば、次のコードは 8 画素× 8 画素の XBM 画像を、それらの画素が白黒の市松模様になるように表現しています。
#define square8_width 8
#define square8_height 8
static unsigned char square8_bits[] = {
0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55
};
MIME タイプ | image/xbm , image-xbitmap |
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ファイルの拡張子 | .xbm |
||||||||||||||||||
仕様書 | なし | ||||||||||||||||||
ブラウザーの互換性 | Firefox 1–3.5, Internet Explorer 1–5 | ||||||||||||||||||
最大の画像の大きさ | 無制限 | ||||||||||||||||||
カラーモードの対応 |
|
||||||||||||||||||
圧縮 | Lossless | ||||||||||||||||||
ライセンス | オープンソース |
画像形式の選択
画像形式は、動画形式と比較して、対応が幅広いものの選択肢が少なく、また、それぞれ特定の用途を持つ傾向があるため、ニーズに合わせて最適なものを選択することが容易と思われます。
写真
アイコン
アイコンのような小さい画像では、サイズに制約のある画像で細部が失われないように、可逆圧縮形式を使用します。 可逆圧縮の WebP はこの目的に最適ですが、対応がまだ進んでいないため、代替画像を提供しない限り、 PNG がより良い選択となります。 画像に含まれる色が256色より少ない場合は、GIFも選択肢に入りますが、PNGはインデックス圧縮オプション(PNG-8)でさらに小さく圧縮されることがよくあります。
アイコンがベクターグラフィックで表現できる場合は、 SVG を検討してください。 SVG の対応状況は良いのですが、古いブラウザーのために PNG の代替を提供する価値があるかもしれません。
第一候補 | 代替用 |
---|---|
SVG, 可逆 WebP, PNG | PNG |
スクリーンショット
品質を妥協しない限り、スクリーンショットには可逆圧縮形式を使用することをお勧めします。 これは、スクリーンショットにテキストが含まれる場合に特に重要です。テキストは非可逆圧縮ではぼやけたり不鮮明になったりしやすいからです。
PNG はおそらく最善の方法ですが、可逆圧縮の WebP の方が間違いなく圧縮率が高くなります。
第一候補 | 代替用 |
---|---|
可逆 WebP または PNG 圧縮結果が気にならない場合は JPEG |
PNG または JPEG スクリーンショットで GIF を使用すると色数が制限されます |
図、イラスト、グラフ
代替画像の提供
標準的な HTML の <img>
要素は、画像で互換性のための代替画像に対応していませんが、 <picture>
要素は対応しています。
<picture>
はいくつかの <source>
要素のラッパーとして使われ、それぞれが異なる形式や異なるメディア条件における画像のバージョンを指定し、 <img>
要素で画像を表示する場所と、代替可能な既定または「最も互換性のある」バージョンを指定します。
例えば、 SVG で表示するのが最適な図を、 PNG や GIF で代替できるように表示したい場合、次のようにします。
<picture>
<source srcset="diagram.svg" type="image/svg+xml" />
<source srcset="diagram.png" type="image/png" />
<img
src="diagram.gif"
width="620"
height="540"
alt="Diagram showing the data channels" />
</picture>
<source>
はいくつでも指定できますが、通常は 2 つか 3 つで十分です。
関連情報
- メディアの種類と形式のガイド
- ウェブメディア技術
- ウェブで使用される動画コーデックのガイド
- HTML の
<img>
および<picture>
要素 - CSS の
background-image
プロパティ HTMLImageElement.Image()
コンストラクターとHTMLImageElement
インターフェイス