The output format to convert the image to.
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.
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.
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
For a list of browsers that support the JPEG XR format, please see the JPEG XR section on caniuse.com.
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.
pjpg, you are guaranteeing progressive rendering for JPEG instead of letting imgix decide when to apply progressive or baseline encoding.
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.
fm=png when the input file is a PNG will serve as an alias to
fm=png32. The output format in that case will match the input format.
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.
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
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
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
auto=formatto return a WebP in supported browsers.
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.
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:
This will return a text string that can be used to render a small, blurred placeholder image.
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.
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
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> object has its own attributes and controls to consider when using these formats. Here's a quick guide.
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 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.
See the API specification for more information about this parameter's value ranges and format.