出力形式

画像を変換する出力形式です。

有効なオプションは avif、gif、jp2、jpg、json、jxr、pjpg、mp4、png、png8、png32、webm、webp、および blurhash です。

画像形式

avif

AVIF ファイル形式は無損形式をサポートしていません。透過性をサポートしています。

AVIF 画像形式は、任意の画像コーデックをサポートする画像形式です。AVIF 画像形式は、JPEG、PNG、WebP 形式と比較してファイルサイズを大幅に削減します。AVIF の利点は、圧縮アルゴリズムが元々画像形式のビデオ向けに開発されていることです。これにより、AVIF 画像ファイルは JPEG ファイルよりも最大 50%、WebP ファイルよりも最大 30% 軽量になります。

AVIF をサポートするブラウザの一覧については、caniuse.com の AVIF セクション (opens in a new tab) を参照してください。auto=format が設定されており、ブラウザが AVIF 形式をサポートしていない場合は、まず WebP 形式にフォールバックします。WebP もサポートされていない場合、imgix はソース画像タイプまたは fm パラメーターで指定された任意の形式にフォールバックします。

現時点では、Firefox ではアニメーション付き AVIF はサポートされていません。Firefox ブラウザに返されるアニメーション付き AVIF は静的な AVIF としてレンダリングされます。

gif

GIF は損失形式です。透過性をサポートしていますが、非常に限られた能力でのみ（1ビット）。アニメーションをサポートしています。

GIF 画像形式は、シンプルなアニメーションを作成する能力で広く使われています。imgix は、アニメーション GIF と静止画 GIF の両方をサポートしています。GIF ファイルは限られたカラーパレットを使用します。

注意: auto=compress パラメーターを適用すると、GIF 形式の場合には fm パラメーターの使用が上書きされます。

Edit in Sandbox

jp2

JPEG 2000 ファイル形式は損失形式です。透過性をサポートしています。アニメーションをサポートしていません。

JPEG 2000 は、多くの場合 JPEG よりもわずかに優れた圧縮を行います（同等の品質の場合、約 10%）。また、JPEG 2000 は低ビットレートでのJPEGよりも優れた劣化を示します。ただし、JPEG 2000 はブラウザで広く採用されていません。

JPEG 2000 をサポートするブラウザの一覧については、caniuse.com の JPEG 2000 セクション (opens in a new tab) を参照してください。

jpg

JPEG は損失形式です。透過性やアニメーションをサポートしていません。

JPEG はウェブ上で最も一般的な形式の1つです。写真の表示に優れています。画像の品質を制御するには、q パラメーターを参照してください。

注意: ほとんどの場合、imgix で JPEG としてレンダリングされた画像はプログレッシブエンコードが使用されます。これは、サイズと表示速度の観点からプログレッシブ JPEG がベースライン JPEG よりも望ましいためですが、一部の場合（例: より小さい画像）ではベースラインがより良い場合もあります。アセットをレンダリングするために使用されるパラメーターに応じて、imgix は2つのオプションのうちより優れたオプションを選択します。

jxr

JPEG XR ファイル形式は損失形式ですが、無損圧縮もサポートしています。透過性をサポートしています。アニメーションをサポートしていません。

JPEG XR は、同等の品質で画像をエンコードする際のより高い圧縮比をサポートしています（JPEG と比較して）。JPEG XR ファイルを無損で配信するには、lossless=true を fm=jxr に追加します。

JPEG XR 形式をサポートするブラウザの一覧については、caniuse.com の JPEG XR セクション (opens in a new tab) を参照してください。

PDF

PDF はドキュメント形式であり、画像形式ではありません。変更できないファイルを保存し、共有および印刷に使用します。

他の fm パラメーターとは異なり、fm=pdf はアセットを PDF に変換しません。代わりに、PDF をレンダリングせずに元の PDF をそのまま配信します。

注意: パラメーター auto=format はすべての fm パラメーターを上書きし、fm をバックアップ形式として設定します。これにより、ブラウザがサポートしている場合には PDF を AVIF/WebP としてレンダリングします。この動作を防ぐには、次のいずれかを行います。

1. URL 文字列から auto=format を削除します。
2. auto=format がデフォルトパラメーターとして適用されている場合は、URL に auto=null&fm=pdf を使用します。

pjpg

プログレッシブ JPEG ファイル形式は損失形式です。透過性やアニメーションをサポートしていません。

プログレッシブ JPEG は、従来の JPEG ファイルに比べていくつかの利点があります。これには、通常のベースライン JPEG よりも小さいファイルサイズや、典型的なベースライン JPEG よりも速い知覚される読み込み時間が含まれます。

適切なクライアントサイドの表示サポートを使用すると、プログレッシブ JPEG は画像データの一部のみを使用して画像の初期バージョンをロードすることができます。画像は一時的に画素化され、残りのデータがロードされるとフォーカスがシャープになります。

pjpg を使用することで、プログレッシブまたはベースラインのエンコーディングを適用するタイミングを imgix に任せる代わりに、JPEG のプログレッシブレンダリングが保証されます。

png

PNG ファイル形式は無損形式です。透過性をサポートしています。アニメーションをサポートしていません。

PNG ファイル形式は一般的なグラフィック形式であり、アプリケーションのアセットによく使用されます。

入力ファイルが PNG の場合、fm=png を設定すると fm=png8 または fm=png32 にエイリアスとして機能し、出力形式は入力形式と一致します。

png8

8ビット透過とパレットベースのカラーを持つ PNG フォーマットの変種です。一部のシナリオでは色の精度を損なうことなく、一様なコンピューター生成グラフィックスに使用できます。アイコンなどの小さな画像や、完全な透過サポートが必要なウェブページでうまく機能します。

png32

24ビットカラーと8ビットアルファチャンネルを持つ最も一般的な PNG 変種です。おそらく、fm=png8 の代わりにこの出力形式を使用したいでしょう。

webp

WebP ファイル形式は損失形式ですが、無損圧縮もサポートしています。透過性をサポートしています。アニメーションをサポートしています。

WebP は、損失または無損のいずれかの画像ファイル形式です。WebP の無損画像は PNG よりも26% 小さいです。WebP の損失画像は、JPEG よりも25-34% 小さいです。

WebP は、PNG に比べてファイルサイズが大幅に削減される透過性と無損圧縮をサポートしています。WebP ファイルを無損で配信するには、lossless=true を設定します。

アニメーション GIF を WebP に変換すると、WebP アニメーションが生成されます。サポートされているブラウザで auto=format を使用すると、変換が自動的に行われます。

WebP をサポートするブラウザの一覧については、caniuse.com の WebP セクション (opens in a new tab) を参照してください。auto=format が設定されていて、ブラウザが WebP 形式をサポートしていない場合、imgix はソース画像タイプまたは fm パラメーターで指定された任意の形式にフォールバックします。

メタデータ形式

blurhash

これは、小さなぼやけたプレースホルダー画像をレンダリングするために使用できるテキスト文字列を返します。

https://assets.imgix.net/examples/vista_900w.png?fm=blurhash&w=50

が

e*EC|aS*ROj=WAt:f-n#WXe-N4bJtRj]j[M{oNkXj[ozRjj^a$ayfl

を返します

返された文字列を使用して、ぼやけた画像を表示できます。詳細については、https://blurha.sh/ (opens in a new tab) を参照してください。

fm=blurhash は、アップロードされた画像に基づいて文字列を生成します。元の画像が変更され、同じ URL が保持されている場合、新しい blurhash 文字列を生成するには、アセットをクリアする必要がある場合があります。

注意: fm=blurhash の応答時間は、リクエストされる画像のサイズが大きくなるにつれて増加します。小さなぼやけたプレースホルダーは非常にうまくスケーリングされるため、画像幅を20から50ピクセルの範囲で使用することをお勧めします。単に w=32 値とともに fm=blurhash を渡します。

json

これは、指定された画像のマスターバージョンのデータ表現です。ソース画像の DPI、高さ、幅、カラープロファイル、カラーモデル、ビット深度などに関連するキーと値が含まれます。出力データは、入力ファイルタイプに応じて異なります。以下は JPEG 画像の例です。

{
  "DPIHeight": 72,
  "Depth": 8,
  "ColorModel": "RGB",
  "DPIWidth": 72,
  "PixelHeight": 800,
  "PixelWidth": 532,
  "JFIF": {
    "DensityUnit": 1,
    "YDensity": 72,
    "JFIFVersion": [1, 1],
    "XDensity": 72
  },
  "ProfileName": "sRGB IEC61966-2.1"
}

ビデオ形式

imgix では、アニメーション GIF をビデオに変換するために MP4 および WebM 形式を提供しています。両方の形式は、高速な読み込みアニメーションを提供するための <video> オブジェクトを作成する必要があります。WebM から MP4 へ、さらには静止画像へのフォールバックソースチェーンを設定することで、ブラウザに最適なオプションを選択させることができます。

静止画像は、<video> タグの poster 属性の値として設定され、両方のビデオオプションが失敗した場合の最終的なフォールバックになります。その後、ブラウザがそれらを試す順序で複数の <source> リクエストを追加できます。この例では、WebM オプションが最初で、次に MP4 があります。

<video
  id="sampleMovie"
  width="620"
  height="349"
  poster="https://gif.imgix.net/imgix-logo-ani.gif?fm=jpg&w=620&h=349&fit=crop&frame=3"
  controls
  loop
>
  <source
    src="https://gif.imgix.net/imgix-logo-ani.gif?fm=webm&w=620&h=349&fit=crop"
    type="video/webm"
  />
  <source
    src="https://gif.imgix.net/imgix-logo-ani.gif?fm=mp4&w=620&h=349&fit=crop"
    type="video/mp4"
  />
</video>

注意: <video> オブジェクトには、これらの形式を使用する際に考慮する必要がある独自の属性とコントロールがあります。こちら (opens in a new tab) に素早いガイドがあります。

mp4

MP4 は、imgix が提供する 2 つのビデオ形式のうち、より幅広い サポート (opens in a new tab) を持ち、一般的に WebM よりも高品質です。アニメーションコンテンツに対する GIF または WebP よりも小さなファイルサイズを提供しますが、上記の注意点に注意して <video> オブジェクトとコントロールを使用する必要があります。

webm

WebM は MP4 よりも ブラウザのサポートが少ない (opens in a new tab) ですが、Chrome およびその他のサポートされているブラウザ向けに、アニメーションコンテンツの圧縮に最適です。これも <video> オブジェクトとコントロールが必要です。