Cloudinary Blog

Cloudinary Supports JPEG XL

Cloudinary Supports JPEG XL

Since its founding, Cloudinary's mission has been to help companies unleash the full potential of their media to create the most engaging visual experiences. In keeping with that quest, we support new codecs for images and videos as soon as possible.

The next-generation image codec from the JPEG Committee is JPEG XL (with the file extension .jxl), for whose design and development Cloudinary played a major role from early on. As a state-of-the-art, cutting-edge image codec, JPEG XL is specifically created for efficient compression and web delivery of high-quality images with a focus on high-fidelity compression and progressive rendering. In particular, JPEG XL is—

  • Royalty free
  • Legacy friendly, delivering lossless transcoding of JPEG images
  • Responsive by design, specifically for responsive images
  • Assuring of high fidelity
  • Foolproof in default quality
  • Universal, effectively superseding JPEG, PNG, WebP, GIF, and TIFF
  • Relatively low in computational complexity, encoding and decoding fast

Now in the late stages of standardization pending a finalization of the bitstream, the JPEG XL Reference Software Project just released a “format-release candidate” version 0.1, which is the version that is integrated into Cloudinary. If all goes well, files encoded with version 0.1 will remain decodable. Feel free to try out this new codec but do not adopt it on a large scale yet.

Consistent with the Cloudinary convention, to convert an image format to JPEG XL, simply change the file extension in the URL to .jxl. Alternatively, add the f_jxl parameter to the URL to set the image format.

In addition, you can continue to have Cloudinary select the quality level through automation with q_auto. Another option is to set the quality level with q_[number], which, unlike other codecs, is also a perceptual target for JPEG XL. For mathematically lossless compression, add q_100.

Ruby:
Copy to clipboard
cl_image_tag("https://res.cloudinary.com/demo/sample.jxl", :format=>"png", :type=>"fetch")
PHP:
Copy to clipboard
cl_image_tag("https://res.cloudinary.com/demo/sample.jxl", array("format"=>"png", "type"=>"fetch"))
Python:
Copy to clipboard
CloudinaryImage("https://res.cloudinary.com/demo/sample.jxl").image(format="png", type="fetch")
Node.js:
Copy to clipboard
cloudinary.image("https://res.cloudinary.com/demo/sample.jxl", {format: "png", type: "fetch"})
Java:
Copy to clipboard
cloudinary.url().format("png").type("fetch").imageTag("https://res.cloudinary.com/demo/sample.jxl");
JS:
Copy to clipboard
cloudinary.imageTag('https://res.cloudinary.com/demo/sample.jxl', {format: "png", type: "fetch"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("https://res.cloudinary.com/demo/sample.jxl", {format: "png", type: "fetch"})
React:
Copy to clipboard
<Image publicId="https://res.cloudinary.com/demo/sample.jxl" format="png" type="fetch">

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="https://res.cloudinary.com/demo/sample.jxl" format="png" type="fetch">

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="https://res.cloudinary.com/demo/sample.jxl" format="png" type="fetch">

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Format("png").Type("fetch").BuildImageTag("https://res.cloudinary.com/demo/sample.jxl")
Android:
Copy to clipboard
MediaManager.get().url().format("png").type("fetch").generate("https://res.cloudinary.com/demo/sample.jxl");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setFormat("png").setType( "fetch").generate("https://res.cloudinary.com/demo/sample.jxl")!, cloudinary: cloudinary)
.jpxl

For now, by default, f_auto does not produce .jxl results because no browsers support JPEG XL yet. In the works is support from Chrome and Android. Let us know if you'd like to test out this new codec yourself.

Recent Blog Posts

Global Study Strengthens Case for Brands to Support UGC

However, along with the benefits of user-generated content (UGC), comes myriad technical challenges. Content must be moderated to avoid compromising your brand. You need to provide a user-friendly process to efficiently manage content uploads. You need to transform images and videos to ensure brand consistency and web performance. You also need to ensure they look presentable across all devices and browser environments. To help brands address these issues and more, we recently ran a three-part blog series on UGC.

Read more
WingTai Asia Fashions Efficient Media Management Workflow

WingTai Asia, a subsidiary of Wing Tai Holdings Limited, is an investment holding company that focuses on property investment and development, lifestyle retail, and hospitality management in key Asian markets. The company is a licensed distributor or sole license distributor for many brands, including Adidas, Cath Kidson, TopShop and UNIQLO, and operates brick and mortar shops to sell these goods throughout Singapore and Malaysia.

Read more