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

Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more
How to Build an Enhanced Gravatar Service, Part 2

Part 1 of this post defines the capabilities of an enhanced Gravatar service, which I named Clavatar, and describes the following initial steps for building it:

This post, part 2 of the series, explains how to make Clavatar work like Gravatar and to develop Clavatar’s capabilities of enabling requests for various versions of the images related to user accounts.

Read more