Output Format

The output format to convert the image to.

Valid options are avif, bmp, gif, heic, ico, jp2, jpg, json, jxr, pjpg, mp4, png, png8, png32, tiff, tiff8, webm, webp, blurhash and thumbhash.

Image Formats

avif

The AVIF file format does not support lossless formats. It does support transparency.

The AVIF image format is an image format which supports any image codec. The AVIF image format provides greater reduction in file size when compared with JPEG, PNG and WebP formats. The advantage of AVIF is that the compression algorithms were originally developed for video in an image format. This allows AVIF image files to be up to 50% lighter than JPEG files and up to 30% lighter than WebP files.

For a list of browsers that support AVIF, please see the AVIF section on caniuse.com. If auto=format is set and the browser does not support the AVIF format, we’ll first fallback to WebP if it is supported. If WebP is not supported, Imgix will fall back to the source image type or to any format specified by the fm parameter.

Firefox supports animated AVIF from version 113. Earlier Firefox versions render an animated AVIF as a still image.

For guidance on serving AVIF in your application — including <picture> fallback patterns and accepting AVIF uploads — see A Developer’s Guide to Understanding Image Types.

bmp

An uncompressed 24-bit bitmap. BMP has no transparency, so a transparent source is flattened onto bg, or white when bg is unset.

BMP output is capped at 4096 px per side. A larger request is scaled down to fit rather than rejected, so w=5000 on a 3:2 photograph returns 4096x2731.

Because the format is uncompressed, files are large: a 4096 px wide photograph is roughly 33 MB. BMP is almost always the wrong choice for the web — it exists for legacy desktop and Windows tooling that cannot read anything else.

BMP is always written in sRGB, even with cs or gamut set. It cannot carry a C2PA manifest, so a request with provenance=c2pa returns an unsigned file rather than failing.

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

gif

GIF is a lossy format. It supports transparency, but only in a very limited capacity (1-bit). It does support animation.

The GIF image format is a file format popularized for its ability to create simple animations. Imgix supports both animated GIFs and static GIFs. GIF files make use of limited color palettes.

Note: Applying the auto=compress parameter overrides using the fm parameter for GIF format.

Edit in Sandbox

heic

The HEIF container with HEVC-encoded image data, as used by Apple devices. It compresses considerably better than JPEG at the same visible quality and supports transparency.

Browser support is limited, so HEIC is best suited to delivering back to Apple platforms rather than to the open web. For the web, avif gives similar compression with far broader support.

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

ico

A Windows icon file, served as image/x-icon. This is the format for a favicon.ico, and it is the one output format that can hold several sizes in a single file — see ico-sizes.

ICO output is capped at 256 px per side, which is the format’s own limit. A larger request is scaled down, so w=512 on a wide logo returns a 256 px wide icon.

ICO is always written in sRGB, and like BMP it cannot carry a C2PA manifest, so provenance=c2pa returns an unsigned file.

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

jp2

The JPEG 2000 file format is a lossy format. It does support transparency. It does not support animation.

JPEG 2000 compresses slightly better than JPEG in many cases (roughly 10% for equivalent quality). It also degrades more gracefully than JPEG at lower bitrates. However, JPEG 2000 has been less widely adopted among browsers.

For a list of browsers that support JPEG 2000, please see the JPEG 2000 section on caniuse.com.

jpg

JPEG is a lossy format. It does not support transparency or animation.

JPEG is one of the most common formats on the web. It excels at displaying photographs. See the q parameter for controlling the quality of the image.

Note: In most cases, images rendered in Imgix as JPEGs will use progressive encoding. This is because progressive JPEGs are preferable to baseline JPEGs in terms of size and display speed, though in some cases (such as smaller images), baseline will be better. Depending on the parameters used to render the asset, Imgix will choose the better of the two options.

jxr

The JPEG XR file format is a lossy format, but also supports lossless compression. It supports transparency. It does not support animation.

JPEG XR supports higher compression ratios for encoding an image with equivalent quality (compared to JPEG). To deliver a JPEG XR file lossless, set lossless=true in addition to fm=jxr.

For a list of browsers that support the JPEG XR format, please see the JPEG XR section on caniuse.com.

PDF

PDF is a document format, not an image format. It saves files that cannot be modified but are used to share and print easily.

In contrast to the other fm parameters, fm=pdf does not convert an asset to a PDF. Instead, when used with PDFs, it will bypass rendering and serve the original PDF without applying any other parameters.

pjpg

The Progressive JPEG file format is a lossy format. It does not support transparency or animation.

Progressive JPEG offers advantages over traditional JPEG files, including potentially smaller file sizes and faster perceived load times than typical baseline JPEGs.

With proper client-side display support, Progressive JPEGs can load an initial version of the image with only a portion of the image data. The image will briefly appear pixelated and will sharpen focus as the rest of the data loads.

By using pjpg, you are guaranteeing progressive rendering for JPEG instead of letting Imgix decide when to apply progressive or baseline encoding.

png

The PNG file format is a lossless format. It does support transparency. It does not support animation.

The PNG file format is a common graphics format, often used for application assets.

Setting fm=png when the input file is a PNG will serve as an alias to fm=png8 or fm=png32. The output format in that case will match the input format.

png8

A variant of the PNG format with 8-bit transparency and palette-based color. It can be used for uniform computer-generated graphics in certain scenarios without compromising color accuracy. It works well with small images like icons and on webpages where full transparency support is necessary but a 32-bit PNG would be too heavy.

png32

The most common PNG variant with 24-bit color and an 8-bit alpha channel. You likely want to use this output format instead of fm=png8.

tiff

A real TIFF file, 8-bit RGB, or RGBA when the source has transparency. The alias tif is accepted.

TIFF is the archive and print format: it keeps the color profile, dpi, XMP, IPTC and any retained EXIF. Choose how it is compressed with tiff-compress, which defaults to deflate.

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

tiff8

A 256-color palette TIFF. It has no transparency, so transparent areas are flattened onto white.

tiff8 defaults to lzw compression rather than deflate. It is much smaller than full-color TIFF on flat artwork, and a poor choice for photographs.

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

webp

The WebP file format is a lossy image format, but supports lossless compression. It does support transparency. It does support animation.

WebP can be either a lossless or a lossy image file format. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images.

WebP also supports lossless compression and alpha transparency with a notable reduction in file size compared to PNG. To have a WebP file delivered as lossless, set lossless=true.

Converting animated GIFs to WebP will produce WebP Animations. The conversion will take place automatically when using auto=format on supported browsers.

For a list of browsers that support WebP, please see the WebP section on caniuse.com. If auto=format is set and the browser does not support the WebP format, Imgix will fall back to the source image type or to any format specified by the fm parameter.

Metadata Formats

blurhash

This will return a text string that can be used to render a small, blurred placeholder image.

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

returns

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

The returned string can be used to display a blurred image. See https://blurha.sh/ for more details.

fm=blurhash generates the string based on the uploaded image, not the image URL. If the image is changed at the origin and the same URL is kept, you may need to purge the asset to generate a new blurhash string.

Note: fm=blurhash response time increases as the size of the requested image increases. Because small blurred placeholders scale up extremely well, we recommend using image widths in the 20 to 50 pixel range. Simply pass in a w=32 value along with fm=blurhash.

thumbhash

This returns a ThumbHash as a Base64 string, served as Content-Type: text/plain. Like blurhash, it encodes a tiny blurred placeholder you can render instantly while the real image loads.

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

returns

3RgKDYBpWGafWIh1dFeWd5mbgIiI

Unlike BlurHash, ThumbHash keeps transparency. A transparent PNG is not flattened onto white, so a cut-out’s placeholder keeps its shape. Add bg if you want it flattened. ThumbHash also encodes the image’s aspect ratio, so the decoder knows the shape without being told.

The hash is computed after every other parameter, so cropping or resizing the image changes the hash:

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

Rendering it needs a ThumbHash decoder — libraries exist for JavaScript, Swift, Rust and others. In the browser:

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)

Animated sources are hashed from their first frame only.

Images only. Video sources do not support fm=thumbhash.

json

This is a data representation, in text, of the specified image’s master version. It includes keys and values relating to the source image DPI, height, width, color profiles, color models, bit depth, and more. The output data varies depending on the input filetype. Here is an example output from a JPEG image:

{
  "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"
}

Video Formats

Imgix offers the MP4 and WebM formats for converting animated GIFs to video. Both formats require creating a <video> object as in the example below, which gives you greater flexibility in providing fast-loading animations. By setting up a chain of fallback sources from WebM to MP4 to a still image, you can let the browser choose the best option for your users on the fly.

The still image is set as the value for the poster attribute on the <video> tag, and will be the ultimate fallback in case both video options fail. You can then add multiple <source> requests in the order you’d like the browser to try them. The example has the WebM option first, then 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>

Note: The <video> object has its own attributes and controls to consider when using these formats. Here’s a quick guide.

mp4

MP4 is the more widely supported of the two video formats Imgix offers, and generally offers higher quality than WebM. It will give you smaller file sizes than animated GIF or WebP for animated content, but requires a <video> object and controls as noted above.

webm

WebM has less browser support than MP4, but for Chrome and other supported browsers, it provides the best compression for animated content. It also requires a <video> object and controls.