Output Format fm

The output format to convert the image to.

Valid options are avif, gif, jp2, jpg, json, jxr, pjpg, mp4, png, png8, png32, webm, webp, and blurhash.

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.

At this time, animated AVIFs are currently not supported in Firefox and any animated AVIF returned to a Firefox browser will render as a static AVIF.

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

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.

Note: The parameter auto=format overrides all fm parameters and sets fm as the backup format. This causes PDFs to render as AVIF/WebP whenever supported by the browser. To prevent this behavior, you can either:

1. Remove auto=format from the URL string
2. If auto=format is applied as a default parameter, use auto=null&fm=pdf in the URL

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.

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.

http://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.

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:

{
  "Exif": {
    "PixelXDimension": 3000,
    "PixelYDimension": 1687,
    "ColorSpace": 65535
  },
  "Orientation": 1,
  "Content-Type": "image/jpeg",
  "Output": {},
  "Content-Length": "2447972",
  "IPTC": { "RecordVersion": "0" },
  "PixelHeight": 1575,
  "TIFF": {
    "ResolutionUnit": 2,
    "DateTime": "2018:10:23 18:52:15",
    "Orientation": 1,
    "ExifTag": 164,
    "XResolution": 72,
    "Software": "Adobe Photoshop CC (Windows)",
    "YResolution": 72
  },
  "PixelWidth": 2800,
  "GPS": {},
  "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.