Turn any audio into video, stabilize any clip — all from one URL. Read the blog post →
Imgix APIsレンダリング APIフォーマット出力形式

出力形式

fm

Standard render

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

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

画像形式

avif

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

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

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

Firefox はバージョン 113 以降でアニメーション付き AVIF をサポートしています。それ以前の Firefox では、アニメーション付き AVIF は静止画像としてレンダリングされます。

アプリケーションでのAVIF配信方法（<picture> フォールバックパターンやAVIFアップロードの受け入れ方法を含む）については、開発者向け画像タイプガイドを参照してください。

bmp

非圧縮の24ビットビットマップです。BMPは透明度に対応していないため、透明なソース画像は bg で塗りつぶされ、bg が指定されていない場合は白になります。

BMPの出力は一辺あたり4096pxに制限されます。 これを超えるリクエストは拒否されるのではなく縮小されるため、3:2の写真に w=5000 を指定すると 4096x2731 が返されます。

非圧縮形式であるためファイルサイズは大きくなり、幅4096pxの写真でおよそ33MBになります。Webで使用する場面はほとんどなく、他の形式を読み込めないレガシーなデスクトップやWindows向けのツール用の形式です。

BMPは cs や gamut を指定した場合でも常にsRGBで書き出されます。C2PAのマニフェストを保持できないため、provenance=c2pa を指定したリクエストはエラーにならず、署名されていないファイルが返されます。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?w=300&fm=bmp

gif

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

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

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

w=300&h=200&fit=crop
sandbox-demo

heic

Appleのデバイスで使用されている、HEVCで符号化された画像データを格納するHEIFコンテナです。同程度の見た目の品質であればJPEGよりかなり高い圧縮率が得られ、透明度にも対応しています。

ブラウザの対応状況は限定的なため、オープンなWebよりもAppleのプラットフォームへの配信に適しています。Web向けには、同程度の圧縮率ではるかに対応範囲の広い avif が適しています。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?w=300&fm=heic

ico

image/x-icon として配信されるWindowsのアイコンファイルです。favicon.ico のための形式であり、1つのファイルに複数のサイズを格納できる唯一の出力形式です。詳しくは ico-sizes を参照してください。

ICOの出力は一辺あたり256pxに制限されます。 これは形式自体の制限です。これを超えるリクエストは縮小されるため、横長のロゴに w=512 を指定すると幅256pxのアイコンが返されます。

ICOは常にsRGBで書き出されます。またBMPと同様にC2PAのマニフェストを保持できないため、provenance=c2pa を指定すると署名されていないファイルが返されます。

https://assets.imgix.net/imgix-logo.png?fm=ico&ico-sizes=16,32,48

jp2

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

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

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

jpg

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

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

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

jxl

JPEG XLは非可逆形式ですが、可逆圧縮にも対応しています。透明度にも対応しています。

JPEG XLは、同程度の品質であればJPEGより小さいファイルサイズになります。品質の調整には q を使用するか、fm=jxl とあわせて lossless=true を指定すると可逆形式で配信できます。

静止画のJPEG XLは、jhgm ボックスに HDRゲインマップ を格納することもできますが、このボックスを読み取るブラウザやビューアはまだ存在しません。

ブラウザの対応状況は限定的なため、オープンなWeb向けの既定の形式としては適していません。対応ブラウザの一覧は caniuse.comのJPEG XLの項目 を参照してください。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?w=300&fm=jxl

jxr

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

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

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

PDF

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

他の fm パラメーターとは異なり、fm=pdf はアセットを PDF に変換しません。代わりに、PDF をレンダリングせずに元の 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 の代わりにこの出力形式を使用したいでしょう。

tiff

実際のTIFFファイルです。8ビットRGB、ソース画像に透明度がある場合はRGBAで出力されます。エイリアスとして tif も使用できます。

TIFFはアーカイブと印刷のための形式で、カラープロファイル、dpi、XMP、IPTC、および保持されたEXIFをそのまま維持します。圧縮方式は tiff-compress で指定し、デフォルトは deflate です。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?w=300&fm=tiff&tiff-compress=lzw

tiff8

256色のパレットを使用するTIFFです。透明度に対応していないため、透明な領域は白で塗りつぶされます。

tiff8 のデフォルトの圧縮方式は deflate ではなく lzw です。平坦なイラストやグラフィックではフルカラーのTIFFよりはるかに小さくなりますが、写真には適していません。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?w=300&fm=tiff8

webp

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

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

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

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

WebP をサポートするブラウザの一覧については、caniuse.com の WebP セクション を参照してください。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/ を参照してください。

ぼやけた画像

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

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

thumbhash

ThumbHash をBase64文字列として返します。Content-Type: text/plain で配信されます。blurhash と同様に、実際の画像が読み込まれるまでの間に即座に表示できる、ごく小さなぼかしプレースホルダーを符号化したものです。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?fm=thumbhash

は次の文字列を返します。

3RgKDYBpWGafWIh1dFeWd5mbgIiI

BlurHashとは異なり、ThumbHashは透明度を保持します。 透明なPNGが白で塗りつぶされることはないため、切り抜き画像のプレースホルダーもその形状を保ちます。塗りつぶしたい場合は bg を追加してください。またThumbHashは画像のアスペクト比も符号化するため、デコーダー側に別途形状を伝える必要がありません。

ハッシュは他のすべてのパラメーターの適用後に計算されます。そのため、画像をクロップしたりリサイズしたりするとハッシュも変わります。

https://assets.imgix.net/docs/rendering-api/food-plate.jpg?fm=thumbhash&w=300&h=100&fit=crop

表示するにはThumbHashのデコーダーが必要です。JavaScript、Swift、Rustなど向けのライブラリが公開されています。ブラウザでの例：

import { thumbHashToDataURL } from "thumbhash"
 
const hash = await fetch(
  "https://assets.imgix.net/docs/rendering-api/food-plate.jpg?fm=thumbhash",
).then((res) => res.text())
 
// The response is Base64; decode it to the bytes the library expects.
const bytes = Uint8Array.from(atob(hash), (c) => c.charCodeAt(0))
 
document.querySelector("#placeholder").src = thumbHashToDataURL(bytes)

アニメーション画像の場合、最初のフレームのみからハッシュが計算されます。

画像のみに対応しています。 動画ソースでは fm=thumbhash を使用できません。

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> オブジェクトには、これらの形式を使用する際に考慮する必要がある独自の属性とコントロールがあります。こちら に素早いガイドがあります。

mp4

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

auto=format の動作

fm=mp4 は、メディアファイルやアニメーションGIFにおいて、auto=format よりも優先されます。これらを組み合わせた場合（auto=format&fm=mp4）、出力ファイルは常にMP4形式になります。

webm

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

無損圧縮出力品質