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 (opens in a new tab). 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.
Premium Feature
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.
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 (opens in a new tab).
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 (opens in a new tab).
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:
- Remove
auto=format
from the URL string - If
auto=format
is applied as a default parameter, useauto=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 (opens in a new tab). 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.
Safari WebP Rendering Warning
A small percentage of WebP images may not render in IOS 14 & Safari >= 14 due
to a systems framework issue under
WebKit (opens in a new tab). Please consider using
auto=format
to return a WebP in
supported browsers.
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/ (opens in a new tab) 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:
{
"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 (opens in a new tab).
mp4
MP4 is the more widely supported (opens in a new tab) 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 (opens in a new tab) 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.
Premium Feature
Video Format 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 (opens in a new tab).