Output Format fm

The output format to convert the image to.

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

Image Formats

gif

Animated GIF functionality is currently available to all Premium imgix customers. If you’re interested in using imgix to optimize your animated GIFs, please contact our sales team.

Note: There are additional parameters that can be used to control the playback and quality of animated GIFs. See the Animation section for more information. See the Video Formats section for information about converting GIFs to video.

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.

w=300&h=200&fit=crop
Imgix logo ani
fit=crop&sat=-50&reverse=true&rot=-45
Imgix logo ani

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. If auto=format is set and the browser does not support the JPEG 2000 format, imgix will fall back to any format specified by the fm parameter, and finally the source image type.

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.

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. If auto=format is set and the browser does not support the JPEG XR format, imgix will fall back to any format specified by the fm parameter, and finally the source image type.

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.

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 any format specified by the fm parameter, and finally the source image type.

Metadata Formats

json

This is a data representation in text of the specified image. 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.