Cloudinary Blog

Cloudinary now delivers images and videos over HTTP/2

Cloudinary now delivers images and videos over HTTP/2

Even though websites have changed dramatically over the years – from simple text-based pages to advanced in-browser apps full of images and videos – the underlying HTTP protocol really hasn’t changed - until recently, with the approval of the HTTP/2 protocol by the IETF. Today Cloudinary is proud to announce, as part of a CDN infrastructure upgrade, general availability of HTTP/2 support in our image and video management solution. This will help you optimize the user experience on your app or website even more.

The benefits of delivering your site images and videos over HTTP/2 are: improving website performance; reducing the amount of bandwidth required by supporting header compression; improving latency and making it easier for developers to use optimized connections, by eliminating the need for domain sharding and other subtle performance tricks.

As more and more sites begin to adopt the technology, HTTP/2 is generating a lot of buzz in the industry. Most browsers already support HTTP/2 (though some only do so through over HTTPS) and it is designed to be backwards compatible with older versions.

While the adoption of HTTP/2 was slow initially, since January 2016 more sites have announced plans to move to HTTP/2 or are offering true support of the protocol. For example, at the beginning of May 2016 both Wikipedia and Blogspot announced that their sites were now supporting HTTP/2.

HTTP/2 adoption over time
Source: http://isthewebhttp2yet.com/measurements/adoption.html

The highest gains in performance for those moving to HTTP/2 will be those with image heavy pages. And the more images on a single page, the more improvement that will be seen. The reason: With HTTP/2, instead of requesting images sequentially or creating many parallel connections, the browser makes a single connection to the server and optimizes the requests to all images over a single connection. A great (although extreme) example of the performance differences between HTTP/2 and its predecessor HTTP/1.1 can be found in this demo on the Akamai website.

HTTP2 vs HTTP1
Source: https://kinsta.com/learn/what-is-http2/

We began beta testing HTTP/2 about six months ago, and the results are impressive. Based on our measurements, the average improvement in page load time is close to 10%.

Ok, I want it - how do I get it?

For current Cloudinary users, there’s nothing you need to do to benefit from our HTTP/2 enhancements. As of today, we've upgraded our CDN integrations, so that every url delivered from Cloudinary's standard CDN layer (using hostnames res.cloudinary.com or cloudname-res.cloudinary.com), in the HTTPS protocol, offers HTTP/2 as a default connection method to the browser that calls it.

Even if your website's HTML itself is not delivered via HTTP/2, you will still gain a performance boost, as all the images on your site that are delivered via Cloudinary will be now pipelined through a single optimized connection.

To check whether your images are delivered via HTTP/2 install this Chrome extension, which indicates the newest protocols.

If you have a specialized or private CDN setup, contact your account manager or support@cloudinary.com to discuss your options.

Obsolete optimizations

There are two optimizations that Cloudinary supports that HTTP/2 makes obsolete: domain sharding and sprites.

If your site is delivered via HTTPS and you are using one of our client libraries, consider turning off CDN subdomains in your Cloudinary configuration (stop setting secure_cdn_subdomain to true).

If you use sprites for performance reasons, you may see a benefit in using separate images, as multiple images will re-use the connection to load faster (but not as fast) as a sprite, but caching can improve as replacing a single image doesn't require generating a new sprite.

To sum it up

Content delivery is an important part of Cloudinary's end-to-end image and video management solution. We constantly upgrade and monitor the CDN-based delivery of assets, and HTTP/2 is the latest feature we've added. Keep watching this blog for further announcements regarding the CDN layer in the future.

Recent Blog Posts

Techniques for Image Enhancement With Cloudinary

Indisputably, visual presentations of events, places, people, and even intangible things make deeper impressions and linger in our minds for longer than words or any other communication medium, hence the meteoric rise through the ages of transmitting ideas and promoting brands in the business sector through images. The recent discovery of the first image of a black hole has generated calls for techniques for enhancing digital images. Specifically, the clamor is for quality-oriented tweaks that would result in optimal display and increased visibility of slightly hidden yet important content.

Read more
Video Manipulations and Delivery for Angular Video Apps

On social media, videos posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.

Read more
Green Screen Queen: Dynamic Video Transparency Fit For Royalty

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Read more
Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Read more
Use a custom function in the image delivery pipeline

Cloudinary offers a wide array of image manipulations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.

Read more