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

How to Apply Riveting Image Effects in Nuxt Applications With Cloudinary

Nowadays, no way can we build modern apps for the web without considering visuals, which are one of the most efficient ways of communicating online. However, improvements in image quality over the years have exacted a price in larger files, slowing down page loads, especially in low-bandwidth regions or on mobile devices. To resolve that conundrum, turn to Cloudinary, a platform that offers the infrastructure for managing images in web apps. Additionally, Cloudinary’s reliable APIs serve visuals through multiple, fast content delivery networks (CDNs).

Read more
The Pros and Cons of AVIF for Websites

AVIF is a 2019 spinoff from the AV1 video format developed by the Alliance for Open Media (AOM), whose members include Amazon, Apple, ARM, Facebook, Google, Huawei, Mozilla, Microsoft, Netflix, and Intel. As an open-source and royalty-free video codec, AVIF delivers much higher compression rates than the older image codecs like JPEG and WebP, and is on par with the brand-new JPEG-XL format, which does not work on any browser yet.

Read more
Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more