Cloudinary Blog

Cloudinary Supports JPEG XL

By
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.

URLRubyPHP v1PHP v2PythonNode.jsJavaJSjQueryReactVue.jsAngular.NETAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/fetch/f_png/https://res.cloudinary.com/demo/sample.jxl
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

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more

Compelling Visual Experiences Are Imperative for DTC E-Commerce

By Pradip Lal
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more

Automatically Translating Videos for International Outreach

By
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more

Minted Delivers High-quality Art at Scale with Cloudinary

By
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more

ImageCon 2021 by the Numbers: Fun Facts and Event Highlights

By
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more