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 v1:
Copy to clipboard
cl_image_tag("https://res.cloudinary.com/demo/sample.jxl", array("format"=>"png", "type"=>"fetch"))
PHP v2:
Copy to clipboard
(new ImageTag('https://res.cloudinary.com/demo/sample.jxl'))
  ->delivery(Delivery::format(Format::png()))
  ->deliveryType('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").Action("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

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more