画像タイプを理解する: 開発者ガイド

現在使用されているすべての種類の画像ファイルに対応するのが難しい場合があることは承知しています。状況を簡素化するために、一般的な画像形式をそれぞれ詳しく説明したガイドを作成しました。私たちは、Web 開発者が使用する画像の種類に特に焦点を当てています。世の中には他にも多くのファイル形式がありますが、これらは Web 上で最もよく使われているものです。

最も人気のある次世代画像形式である AVIF について詳しく知りたい場合は、この記事を参照してください。

この記事を読み終えるまでに、ここで説明するすべての画像ファイル形式をいつ、どのように使用するかがわかり、自信を持って正しい形式を選択できるようになります。ファイル サイズを低く抑えながら画質を最大化し、Web サイトやアプリケーションのパフォーマンスを向上させる方法を学びます。

画像を自動的に最適化し、その場で画像形式を変換する方法については、 imgix.com にアクセスしてください。

この記事で説明する画像ファイルの種類のリストは次のとおりです。

• GIF
• PNG
• TIFF
• JPEG/JPEG
• JPEG2000
• JPEG XR
• BMP
• SVG
• HEIC/HEIF
• WEBP
• AVIF/AV1

なぜこれほど多くの画像形式があるのでしょうか?

多種多様な画像形式の最も簡単な説明は、それぞれが異なる目的を果たすということです。画像形式が異なれば、使用する圧縮方法も異なります。これは、ファイルの情報をエンコードしてファイルの合計サイズを削減し、Web ページへのダウンロードを高速化するプロセスです。

圧縮アルゴリズムの違いにより、一部の画像形式では同じ画質でもファイル サイズが小さくなりますが、画像の透明度などの機能が犠牲になります。

一部の形式には、特定の種類の画像にのみ役立つプロパティがあります。たとえば、SVG 形式はベクター形式であり、アイコンには最適ですが、写真はラスターと呼ばれる別の画像形式を使用して保存されるため、写真には適していません。

画像形式について言えば、画像の種類について説明する前に、これらの用語とその他の一般的な用語を明確にする必要があります。ラスター イメージ形式とベクター イメージ形式の違い、および可逆圧縮と非可逆圧縮について簡単に説明します。

ラスターとベクター

内部では、ベクトル形式はフィールド内の各ピクセルの色に関する情報を保存するのではなく、画像を一連の形状として定義します。

この特性により、SVG などのベクター画像がアイコン、ロゴ、チャート、その他のデジタルファーストグラフィックスに最適になり、各画像の使用帯域幅が非常に少なくなります。

対照的に、ラスター形式は個々のピクセルで構成され、効率的な圧縮アルゴリズムにより Web で広く使用されています。

ラスター形式とベクター形式の主な違いの 1 つは、ラスター形式はピクセル化またはぼやけて見えることなく元の解像度からスケールアップできないことです。

以下の図は、画像を拡大するとピクセル化がどのように発生するかを示しています。

出典:ウィキメディア・コモンズ

可逆圧縮と非可逆圧縮

画像を表示するには膨大な量のデータが必要です。インターネット経由であれ、ハードディスクに保存されているかにかかわらず、すべてのデータを生の形式で転送するのは非常に非効率です。画像をより効率的にするために、その基礎となるデータに「圧縮」を適用します。

圧縮では、数学とパターン マッチングのアプローチを使用して、画像の転送に必要なデータを削減します。

「大声で笑う」という意味で「LOL」などの頭字語を使用したことがある場合は、非常に単純な形式の圧縮を実行したことになります。

圧縮が機能するためには、送信者と受信者の両方が、圧縮が適用されていることと、どのような圧縮アルゴリズムが使用されているかを知っている必要があります。

送信者は画像データを圧縮する方法を知っている必要があり、受信者は圧縮を逆に行う方法、つまり「解凍」して画像データを表示可能な形式に戻す方法を知っている必要があります。

データを圧縮するにはさまざまな方法がありますが、それらはすべて、可逆圧縮または非可逆圧縮の 2 つのカテゴリのいずれかに分類されます。 「ロスレス」とみなされる圧縮アルゴリズムは、データを圧縮前とまったく同じように保存します。

ロスレス アルゴリズムは効率的ですが、圧縮しやすい方法で画像データを事前に調整できれば、さらに効率が高まります。

たとえば、画像内に目に見えないほどオフホワイトのピクセルが多数ある場合、それらを完全な白に変更すると、画像の圧縮が容易になる可能性があります。画像を見たエンドユーザーは違いに気づくことはありません。

ただし、データが変更されるため、圧縮効果を高めるために、元の詳細の一部が「失われます」。これは「非可逆」圧縮と呼ばれます。

つまり、可逆圧縮とは、品質に影響を与えることなく画像のファイル サイズを削減できることを意味します。逆に、非可逆圧縮では、ファイル内の復元できない特定の情報 (通常は冗長) が削除されます。

これらの用語については説明しました (各画像タイプを説明するときに出てきます)。次に、Web で使用される最も一般的な画像タイプについて詳しく説明します。

GIF (グラフィック交換フォーマット)

説明: Graphics Interchange Format (GIF) は、1987 年に作成されたラスター イメージ形式で、現在でも頻繁に使用されている最も古いファイル形式です。 GIF 画像は、LZW エンコーディングとして知られる圧縮アルゴリズムを使用して、簡単に保存し、より高い圧縮画像品質を実現します。

GIF は技術的にはより多くの色のバリエーションをサポートできますが、GIF はほとんどの場合、画像に 256 色の制限を課す方法で構築されています。

現在、GIF はアニメーション画像の形式として最も有名です。アニメーション画像は複数の画像 (またはフレーム) を 1 つのファイルに結合し、フレームは連続して再生されます。 GIF がアニメーションで人気がある理由の 1 つは、GIF が画像を装っていることです。

ビデオ プレーヤーを必要とせずに、アニメーション GIF をページにアップロードできます。 GIF はアニメーションによく使用されますが、解像度が低く、フレームが圧縮されるため (ファイル サイズが大きくなる)、理想的なオプションではありません。

最適な用途:グラフィックやロゴなど、単純な透明度が必要な単純な画像。

パフォーマンス:パフォーマンスは GIF のフレーム数によって異なります。フレームが多すぎると、GIF のファイル サイズが大きくなるため、Web ページへの読み込みが遅くなります。 GIF 画像を作成する場合、各フレームの解像度と 1 秒あたりに表示されるフレーム数を調整できます。

当然のことながら、1 秒あたりのフレーム数 (FPS) の値が高く、各フレームの解像度が高いほど、GIF ファイルのサイズも大きくなります。さまざまな FPS 値とさまざまな解像度を使用して、ユースケースに最適な組み合わせを見つけてください。

一般に、GIF は圧縮が非常に困難です。これは、各アニメーション シーケンスが一連の独立した画像をつなぎ合わせたものであるためです。 GIF 内のフレーム間で画像の一部が同じであっても、圧縮アルゴリズムがそれらの部分を識別することは困難です。

この制限は、GIF 画像のファイル サイズが通常、MP4 ビデオの同じフレーム シーケンスよりも大きくなる理由の 1 つです。

品質: GIF では可逆圧縮アルゴリズムが使用されていますが、フルカラーの 24 ビット画像をパレット化された 8 ビット GIF に変換する際の事前フィルタリング (ディザリング、クランプ、カラー量子化を含む) が原因で画質が低下することがよくあります。

ブラウザの互換性: Chrome、Edge、Firefox、Internet Explorer、Opera、Safari のすべてのバージョン。

PNG (ポータブル ネットワーク グラフィックス)

説明:ポータブル ネットワーク グラフィックス (PNG) は、可逆圧縮を使用するファイル形式です。急激な変化や単色の大きな領域を含む画像 (グラフィックスやテキストを含む画像など) は、JPG 形式よりも PNG 形式の方が圧縮率が高くなります。

その結果、スクリーンショットやイラストとして PNG 画像が頻繁に見つかります。

PNG 画像は画像の透明性を提供するため、Web の標準となっています。透明な PNG 画像を別の画像の上に配置して、奥行きや複数のレイヤーの効果を作成できます。

PNG はフル アルファもサポートしており、画像を半透明にすることができます。半透明効果を使用すると、たとえば、PNG 画像に透明な影を付けることができます。

最適な用途:グラフィック、イラスト、バナー、ロゴ。

パフォーマンス: PNG ファイルは JPEG や SVG よりもファイル サイズが大きくなる傾向があるため、ファイル サイズが小さい高解像度の画像が必要な場合、Web にはあまり適していません。

品質: PNG 画像は可逆圧縮を使用しており、ピクセルパーフェクトな表現はハイコントラストのグラフィックに最適です。一部の PNG ファイルは、24 ビットの色深度により 1,600 万色もの色を保持します。

ブラウザの互換性: Chrome、Edge、Firefox、Internet Explorer、Opera、Safari のすべてのバージョン。

TIFF (タグ付き画像ファイル形式)

説明:タグ付きイメージ ファイル形式 (TIFF) は、スキャンされた写真を保存するために最初に作成された画像形式です。この形式は、主に歴史的な理由から、写真家、画像編集者、出版社の間で最も人気があります。

最適な用途:ファイル サイズが問題にならない高解像度のグラフィックスおよびグラフィック アート。

パフォーマンス: TIFF ファイルは圧縮または非圧縮が可能です。この形式は複数の圧縮オプションをサポートしています。通常、TIFF 画像は Web ブラウザではサポートされていないため、Web 上で画像を表示するために TIFF 画像を使用することはできません。

品質: TIFF ファイルは非常に高品質です。通常、完全に圧縮されていないか、可逆圧縮が使用されているため、写真やスキャンした画像に最適です。

ブラウザの互換性:現在、TIFF をサポートしているブラウザはありません。ダウンロード形式としてのみ使用されます。

JPG/JPEG (共同写真専門家グループ)

説明: Joint Photographic Expert Group (JPEG/JPG) ファイルは、非可逆圧縮画像に最も一般的に使用される形式です。 JPG と JPEG ファイルの違いは何なのか疑問に思う人も多いですが、違いはありません。2 つの略語は完全に互換性があります。

ユニークな機能: JPG 形式の貴重な機能は、プログレッシブ モードです。ほとんどの JPG 画像はベースライン モードで作成されます。 2 つのモードの違いを理解するには、1 ページのテキストを 1 行ずつ読むことを想像してください。上から始めて下に向かって 1 行ずつ進みます。

ページを読むのに 1 分かかる場合、ページの半分を読むのに 30 秒かかります。

ベースラインモード

JPG 画像をベースライン モードで使用すると、Web 上で JPG ファイルを上から下に 1 行ずつピクセルをロードする方法になります。ファイル サイズが大きいか接続が遅いために画像の読み込みが遅い場合、Web サイトの訪問者には、完全に読み込まれるまで画像の一部しか表示されません。

プログレッシブモード

ただし、プログレッシブ モードでは、画像の低解像度バージョンをロードすることから始めて、次に高解像度バージョンのロードに進みます。

Web サイトの訪問者には、たとえ品質が低くても完全な画像がすぐに表示され、画像が読み込まれるにつれてページ上の品質が向上します。

プログレッシブ JPG 画像は、最初のページのペイント時間を最小限に抑えるため、高速な Web サイトに最適です。

最適な用途:静止画と写真、スクリーンショット。

パフォーマンス:ファイル サイズが小さいため、高いパフォーマンスが得られます。ダウンロードとアップロードが簡単です。

品質: JPEG は非可逆形式です。つまり、画像のサイズが変更されるたびに品質が失われます。 JPEG 画像は鮮明度がかなり失われる傾向があるため、正しく表示するために高レベルの鮮明度が必要なチャートやその他のグラフィックスではうまく機能しません。

ただし、JPEG は、色彩豊かな写真や画像に使用する場合に優れています。 JPEG は、PNG に比べてファイル サイズが小さいため、スクリーンショットにも適しています。

ブラウザの互換性: Chrome、Edge、Firefox、Internet Explorer、Opera、Safari のすべてのバージョン。

「JPEGminiとMozJPEGの違いは何ですか？」 JPEGmini と MozJPEG の目的は両方とも、エンド ユーザーに目に見える影響を与えずに JPG 画像サイズを削減することです。

JPEGmini は手動で調整されたアルゴリズムを使用しており、人間が気付かない可能性が高い場所で画像の品質を低下させます。この独自のアルゴリズムにより、プログラムは JPEG 画像のサイズを大幅に (場合によっては最大 80%) 削減できます。

MozJPEG は、Mozilla によって開発された JPG エンコーダで、多くの自動調整を使用して、画質を維持しながら JPG ファイル サイズの大幅な削減を実現します。

JPEG2000

説明: Joint Photographic Expert Group 2000 (JPEG2000) は、JPEG の代わりに使用されることがある標準です。 JPEG2000 は高度な符号化方式を使用します。通常の JPEG ファイルと比較して、画質を大幅に損なうことなく、優れた圧縮パフォーマンスを実現します。

最適な用途:静止画および写真。

パフォーマンス:ファイル サイズが小さいため、高いパフォーマンスが得られます。ダウンロードとアップロードが簡単です。

品質:圧縮方法がより効果的であるため、品質は通常の JPEG ファイルよりも高くなっています。

ブラウザの互換性:この形式には下位互換性がなく、Chrome、Firefox、Internet Explorer、Microsoft Edge などの主要なブラウザはサポートされていません。この形式は、バージョン 5-13.1 以降の Safari ブラウザでのみサポートされています。

JPEG XR

説明: HD フォトとも呼ばれる JPEG XR (拡張範囲) は、Microsoft によって開発されたファイル形式です。この形式は主に Windows システムで使用されており、他のプラットフォームでは通常サポートされていません。

JPEG XR は、JPEG と比較して、可逆圧縮、フルアルファサポート (半透明のオプション)、より高い色精度などの機能を追加しています。

ユニークな機能: JPEG XR のユニークな機能は、タイル構造のサポートです。画像はタイル (個別にデコードできる独立した領域) に分割されており、画像の残りの部分をデコードしなくても各領域を表示できます。

最適な用途: Internet Explorer (バージョン 9 ～ 11) および Microsoft Edge (バージョン 18 まで) ユーザーに表示される写真。

パフォーマンス:より効果的な圧縮アルゴリズムによる高いパフォーマンス。タイルのサポートにより、ブラウザーでのレンダリングが高速化されます。

品質: JPEG XR は非可逆圧縮と可逆圧縮の両方を使用できるため、画像の品質は選択した圧縮オプションによって異なります。一般に、ファイル サイズは、非可逆圧縮を使用すると JPG 画像より小さくなり、可逆圧縮を使用すると PNG より小さくなります。

ブラウザーの互換性: IE 9 ～ 11 およびバージョン 18 までの Microsoft Edge でのみサポートされます。Edge の新しいバージョンでは、JPEG XR 画像のサポートが削除されました。

BMP (ビットマップ)

説明:ビットマップ (BMP) ファイル形式は、Windows システムで最も一般的なラスター イメージ形式です。

最適な用途:何らかの理由で圧縮できない場合、Windows マシンのスクリーンショットに主に使用されます。

パフォーマンス:ビットマップ イメージは、特に多くの色が含まれている場合に、かなりの量のストレージを占有します。その結果、Web サイトで使用すると読み込みが遅くなる可能性があります。これが、Web 上で BMP ファイルを使用することをお勧めしない理由の 1 つです。

品質:ビットマップ画像は、ロスレスでピクセル完璧な品質を提供します (PNG と同様)。

ブラウザの互換性: Chrome、Edge、Firefox、Internet Explorer、Opera、Safari のすべてのバージョン。

SVG (スケーラブル ベクター グラフィックス)

説明:スケーラブル ベクター グラフィックス (SVG) ファイルは、Web で一般的に使用される XML ベースのベクター画像形式です。

ベクター形式は、GIF、PNG、JPG、BMP などのラスター形式よりもはるかに多用途で使いやすいです。さらに重要なのは、品質を損なうことなくスムーズに拡張できることです。

最適な用途:アイコン、バナー、グラフなど、拡大縮小時に一貫した品質が必要なグラフィック。

パフォーマンス: SVG 画像は、PNG、BMP、TIFF などのラスター形式よりもファイル サイズがはるかに小さい傾向にあるため、Web ページのパフォーマンスにプラスの影響を与えます。

品質: SVG 画像は、大きくても小さくても、どのように変換されても品質を維持します。このプロパティは、Web サイトのファビコンとヘッダー画像の両方として使用される会社ロゴなどのグラフィックに不可欠です。

ブラウザの互換性: IE 6 ～ 8 (2009 年 3 月以前にリリース) および Android ブラウザ 2.1 ～ 2.3 (2010 年 12 月以前にリリース) を除く、ほぼすべてのブラウザが SVG 形式をサポートしています。

HEIC / HEIF (高効率画像ファイル形式)

説明: High-Efficiency Image File Format (HEIC / HEIF) は、Moving Picture Experts Group によって開発された画像フォーマットです。これは、Apple が iPhone および iPad の写真保存形式として最近導入した、かなり新しい画像形式です。

Apple がモバイル デバイスにこの形式を選択した理由の 1 つは、一連の画像 (Live Photo や写真バーストなど) を 1 つのファイルとして保存できることです。

このような状況では、HEIC ファイルには画像全体を保存するのではなく、画像間の差分が保存されるため、ファイル サイズが大幅に小さくなります。

最適な用途:写真、アニメーション画像。

パフォーマンス: HEIC 形式では可逆圧縮が使用されるため、HEIC ファイルのファイル サイズは JPEG ファイルよりも大きくなります。ただし、HEIC 画像のファイル サイズは、同等のロスレス形式である PNG よりも小さくなります。

品質:非常に高い - HEIC 画像は、JPEG 画像の 2 倍以上の詳細を保存できます。

ブラウザの互換性:最新のブラウザでは HEIC 形式をサポートしていません。

「HEIC は JPEG よりも優れていますか?」 HEIC は、ファイル サイズを低く抑えながら JPEG 画像の 2 倍以上の詳細を保存できるため、JPEG 形式よりもはるかにパフォーマンスが高く、高品質になります。

HEIC のファイル サイズが小さいため、Web 上で提供するときに HEIC ファイルを他の形式に変換できれば、クラウド ストレージのコストを削減するのに特に役立ちます。 HEIC 形式は現在、ブラウザーのサポートが不足しているため、Web では広く使用されていません。

ただし、一部の画像 CDN ソリューションは、HEIC ファイルをブラウザーがサポートする形式に自動的に変換します。

「HEIC 画像を JPEG 形式に変換するにはどうすればよいですか?」これを行うには、 HEIC to JPGなどのオンライン ツールを使用します。

「HEIC を使用するにはライセンスが必要ですか?」 HEIC 形式を非商業的に使用する場合、ライセンスは必要ありません。

WEBP（ウェブピクチャフォーマット）

説明: Web Picture Format (WebP) は、Google によって開発された画像形式です。非可逆圧縮または可逆圧縮のいずれかを使用できるため、ファイル サイズを小さくするか、高品質にするかを選択できます。

WebP は、より小さくて見栄えの良い画像を作成することを目的としていますが、一般に Web ページの読み込み時間が長くなります。 WebP は、GIF と同様に、アニメーションとループもサポートしています。この形式の人気とサポートは増加しています。

最適な用途:写真、バナー、アニメーション画像。

パフォーマンス:圧縮を使用すると良好です。

品質:一般に、特に可逆圧縮を使用する場合は良好です。

ブラウザの互換性: 2018 年の時点で、WebP は IE を除くすべての主要な Web ブラウザで幅広くサポートされており、Apple は Safari の次期バージョンで WebP をサポートすることを発表しました。 WebP 画像を Web サイトに追加する場合は、JPEG または PNG フォールバックを使用することをお勧めします。

「Google Chrome が画像を WebP として保存しないようにするにはどうすればよいですか?」デフォルトでは、Google Chrome は Web 画像を WebP 形式で保存します。 Mac を使用している場合は、システムのデフォルトのプレビュー アプリを使用して、WebP 画像を JPG にエクスポートできます。

Windows では、 Save Image as PNGなどの拡張機能をダウンロードできます。もう 1 つのオプションは、imgix を使用して、クライアントが Chrome または Firefox を使用している場合は Web サイト上の画像が WebP 形式で提供され、他のブラウザの場合は PJPG (プログレッシブ JPG) 形式で提供されるようにすることです。

AVIF（AV1画像ファイル形式）

説明: AVIF 形式は、AV1 ビデオ エンコード形式に基づく画像形式です。 AV1 は、Mozilla、Google、Cisco、Netflix、Amazon などの企業によって形成されたコンソーシアムであるAlliance for Open Mediaによって作成および開発されています。

AVIF の背後にある主なアイデアは、もともとビデオ用に開発された圧縮アルゴリズムを画像形式で利用することです。

Netflix は、AVIF が画像サイズを低く保ちながら優れた品質を提供するため、AVIF には自社のアプリケーション全体で画像を使用できる可能性があると考えています。

最適な用途:映画ポスターのグラデーション、テキスト、グラフィックスなど、保存する必要がある特定の詳細を含む画像。

パフォーマンス:圧縮を使用する場合に優れています。

品質:圧縮を使用する場合に最適です。

ブラウザの互換性: AVIF 形式は、バージョン 85 以降の Google Chrome でサポートされています。Firefox はバージョン 77 から AVIF をサポートしていますが、AVIF 機能はデフォルトで無効になっているため、設定で有効にする必要があります。他のブラウザは現在 AVIF 形式をサポートしていません。

どの画像形式を選択すればよいですか?

このセクションでは、特定の使用例に基づいた画像形式の推奨事項を示します。

写真: Web サイト上の写真には、ファイル サイズが小さい JPG をお勧めします。他の形式では透明度などの追加機能が提供されますが、これらは写真には必要ありません。

さらに良いオプションは、ユーザーが実行しているブラウザに応じて静的画像を最適な形式に変換するスマート サービスを使用することです。

たとえば、imgix は、Chrome と Firefox を使用している場合は WebP 形式で画像を提供し、Internet Explorer、Safari、および Microsoft Edge を使用している場合は PJPG 形式で画像を提供します。

ライン アートと漫画:漫画やアートワークの場合も、同じ理由で JPG 形式を使用することをお勧めします。JPG 画像の方がファイル サイズが小さく、通常、アートワークには透明度が必要ありません。

グラフィック デザイン要素:グラフィック デザイン要素に関する推奨事項は 2 つあります。

• SVG はファイル サイズが小さく、品質を損なうことなく簡単にサイズ変更できるため、可能な限り SVG を使用してください。

• それ以外の場合は、可逆圧縮がシャープなトランジションや単色の広い領域のある画像に適しているため、PNG を使用してください。

アイコン:アイコンには SVG 形式をお勧めします。この形式では小さなファイルが生成され、品質を損なうことなく画像を拡大縮小することができます。

PNG または GIF 画像を SVG などのベクター形式に変換することは後から実行できない可能性があるため、最初からアイコンを SVG 形式で作成することをお勧めします。

ウェブサイトのロゴ:ウェブサイトのロゴに関しては、やはり SVG が勝ちます。この形式は他の形式よりも占有する帯域幅が少なく、サイズを簡単に変更できます。アイコンと同様に、ロゴを SVG として作成してみてください。

アニメーション画像:アニメーション画像の推奨形式は MP4 形式です。画像形式ではなくビデオ形式であり、GIF と比較すると、MP4 アニメーションのサイズは約 10 分の 1 です。

<video>タグを使用し、自動再生とループのオプションを設定し、 muted属性を設定して、MP4 ファイルで GIF の動作を複製します。 imgix を使用すると、GIF ファイルが自動的に MP4 に変換されます (注: アニメーション GIF のサポートは imgix のプレミアム機能です)。

imgix で提供できる画像フォーマットはどれですか?

ファイル タイプは、入力形式または出力形式として imgix と対話できます。

入力フォーマットは、 imgix のパラメータで受け入れられるファイルです。 imgix の API (たとえば、 w=600 ) を使用して、入力フォーマットで受け入れられる画像を変換できます。

出力形式は、 imgix が任意の入力形式を変換できるファイル タイプです。たとえば、fm=png を使用して jpg を png に変換できます。

サポートされていない入力形式は、変換なしで提供されます。

* 以下のファイル固有の注意事項を参照してください

imgix を使用したサポートされていないアセットの提供

imgix は画像を提供するために最適化されていますが、JavaScript や CSS ファイルなどの他の静的アセットをソースからパススルーすることもできます。これにより、グローバルに分散された CDN を通じて他の資産を提供できるという利点が得られます。

ただし、そのようなアセットの動作は保証されません。レンダリング パラメーター (特にデフォルト パラメーター) が出力に影響を与える可能性があり、誤ってレンダリング エラーが出力される可能性があります。

サポートされていないファイル タイプを提供する場合は、URL にパラメータを適用しないことが重要です。通常、サポートされていない入力タイプでパラメータを使用しても問題はありませんが、まれに、特定のファイル タイプでパラメータが予期しない動作を引き起こす可能性がある場合があります。

サポートされていない入力アセットに関する問題の原因となっているデフォルト パラメーターでソースが構成されている場合は、次のいずれかの方法でこの問題を回避できます。

• imgix や

• これらのアセットを提供するには別のソースを使用する

ファイル固有の注意事項

APNG

アニメーション PNG は静的 APNG としてレンダリングされます。アニメーションの場合は、代わりにアニメーション GIF (プレミアム機能) を使用してください。

EPS

入力タイプとしてではなく、パススルーとしてのみサポートされます。

HEIC

HEIC は、元のイメージがiOS デバイスから作成された場合にのみ機能します

SVG

[email protected]に連絡することで、SVG を入力パラメータとして有効にすることができます。これらがアカウントに対してまだ有効になっていない場合は、ファイルの先頭に正しい XML 宣言がある限り、それらを渡すことができます。

SVG にはセキュリティ上の脆弱性があり、Web ブラウザを通じて提供されるときにインライン JavaScript の実行が可能になることに注意してください。

入力パラメータとして SVG を有効にすると、imgix がファイルをラスタライズして提供できるようになり、このコードの実行を防ぐことができます。これを行うには、ソース設定で auto=compress などのデフォルト パラメータを適用します。

SVG に関連する脆弱性を防ぐもう 1 つの方法は、ユーザーがアップロードした SVG を防止することです。これにより、不正な SVG がソースから提供されるのを防ぐことができます。

SVG ファイル内で Base64 エンコードを使用することはお勧めできません。 Base64 チャンクはレンダリング スタックによって処理されず、出力レンダリングに表示されません。

WEBP

アニメーション WebP は入力形式としてまだサポートされていません。

WEBM

GIF を WEBM に変換すると、透明度が失われます。代わりに、GIF を APNG に変換して透明度をサポートすることもできます。

よくある質問 (FAQ)

「Web サイト上の画像の適切な画像サイズと解像度はどれくらいですか?」答えは、Web サイト訪問者が使用しているデバイスと、各画像の使用方法によって異なります。

帯域幅の消費を最小限に抑えながら画像の品質を維持できるように、各デバイスの画面サイズに最適化された画像サイズを使用することをお勧めします。

たとえば、iPhone 11 Pro Max の画面解像度は 1242x2688 ピクセルです。デバイス ピクセル比 (DPR) を考慮する場合、画像がブラウザ ウィンドウで Web サイトの全幅を占める場合は、画像のサイズをこれらの寸法の 3 倍にすることを考慮する必要があります。

画像を大きくしすぎると、不必要に余分な帯域幅を消費することになりますが、ファイル サイズを小さくすると、画像がピクセル化し、ページ上の品質が低下します。同じ原則が、ウィンドウ幅全体に満たない単一または複数の画像に比例して適用されます。

ブラウザでは、 <img>要素のsrcset属性を使用すると、画面サイズに基づいて異なる画像サイズを表示する便利な方法です。これが役立つ理由とその仕組みの詳細については、 srcsetを使用したレスポンシブ イメージ」ガイドを参照してください。

まとめ

この記事では、パフォーマンスやブラウザーの互換性など、多くの主流の画像形式について説明しました。ウェブ上のすべての画像に適した単一の形式はないことに注意してください。

最適な画像形式を選択するには、各画像をどのように使用するか、異なる形式でユーザーに表示する必要があるかどうか、およびサポートする予定のブラウザを検討してください。最適なパフォーマンスを得るために画像形式を自動的に変換するには、 今すぐ imgix で無料アカウントを作成してください。