Cloudinary Blog

Why Isn't Everyone Delivering Online Content With HTTPS?

How to Deliver Images Through an HTTPS-Based CDN

A standard invented in the 1990s by Netscape, secure HTTP (HTTPS) safeguards and encrypts web content by combining two protocols: HTTP (for communications) and Transport Layer Security (TLS) (for encryption). Since then, that standard has been widely adopted for e-commerce and banking sites. According to HTTP Archive, despite its cost, complexity, and slower performance, HTTPS has been gaining popularity since 2015, with the number of related sites rising by over 70 percent that year—an increase from 14 to 24 percent of all sites.

HTTPS usage graph

Three major factors accounted for the impressive momentum of HTTPS:

  • In 2014, Google initiated a big push by announcing a higher page rank for HTTPS-enabled sites.
  • Many commercial content delivery networks (CDNs) and free initiatives, such as Let's Encrypt, are offering free Secure Sockets Layer (SSL) programs that much more effectively facilitate the setup of HTTPS servers.
  • HTTP/2, the HTTP standard that offers performance enhancements for resource-filled pages, practically requires delivery over HTTPS.

Consumers and web developers alike are now much more aware of the value of that lock icon in the browser’s address field. The benefits extend beyond viewer security to SEO boosts and exclusive advanced capabilities, such as HTTP/2 and WebRTC.

A challenge of running sites over HTTPS is that you must deliver all the resource links, including those for images and videos, in the same manner. Fortunately, Cloudinary has your back here with potent options, including shared domains and custom SSL certificates for running HTTPS on your own domain.

This post describes the pros and cons of HTTPS and the options from Cloudinary.


How to Optimize for Page Load Speed


Benefits and Challenges of HTTPS

HTTPS offers two major benefits for Internet communications:

  • Channel encryption, which prevents third parties from eavesdropping or which at least makes it very hard and impractical to do that at scale.
  • Server identification, whereby the server presents a certificate authority-issued credential that vouches that the server owner is indeed the owner of the domain being accessed, thwarting people from impersonating a trusted server and presenting misleading information to clients (imagine getting wrong stock quotes from a site posing as bloomberg.com), or tricking clients into disclosing sensitive information.

A page is considered secure only if all of the assets it loaded are from secure (HTTPS) sources. Depending on the browser, unsecured resources might be blocked from loading, or the browser would display a gray lock icon or a warning in the form of a message or dialog box. So, if you deliver site content through a secure CDN or service like Cloudinary, ensure that you present the resources with HTTPS. To have the Cloudinary client library (SDK) handle that for you automatically, set this configuration.

Delivery over HTTPS has two downsides:

  • Opening an HTTPS connection takes longer than opening an HTTP one because of the round trips required for authenticating the server certificate and performing the encryption handshake. On high-latency connections (3G, distant clients, and such), those round trips can add seconds to the connection handshake. To address some of those latencies, deliver images through a CDN and consolidate connections with HTTP/2.
  • The HTTPS delivery mechanisms of certain CDNs contain fewer HTTPS-enabled nodes than HTTP-enabled ones, resulting in a slower performance.

HTTPS Vis-a-Vis Cloudinary

With Cloudinary, you can deliver resources in four modes: three of them over HTTPS and one over disabled HTTPS for a wider range of CDN nodes.

Default HTTPS

For its free and paid plans alike, Cloudinary optimizes images and delivers them over HTTPS with the standard res.cloudinary.com domain. That’s also the default behavior of the Cloudinary SDKs, which detect the connection type and generate URLs with the https prefix. The connection is triggered by Cloudinary's server certificate, which resides on our CDN layer.

See this example image:

Ruby:
Copy to clipboard
cl_image_tag("meowing_kitten.jpg", :width=>400, :crop=>"scale")
PHP v1:
Copy to clipboard
cl_image_tag("meowing_kitten.jpg", array("width"=>400, "crop"=>"scale"))
PHP v2:
Copy to clipboard
(new ImageTag('meowing_kitten.jpg'))
  ->resize(Resize::scale()->width(400));
Python:
Copy to clipboard
CloudinaryImage("meowing_kitten.jpg").image(width=400, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("meowing_kitten.jpg", {width: 400, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(400).crop("scale")).imageTag("meowing_kitten.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('meowing_kitten.jpg', {width: 400, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("meowing_kitten.jpg", {width: 400, crop: "scale"})
React:
Copy to clipboard
<Image publicId="meowing_kitten.jpg" >
  <Transformation width="400" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="meowing_kitten.jpg" >
  <cld-transformation width="400" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="meowing_kitten.jpg" >
  <cl-transformation width="400" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Crop("scale")).BuildImageTag("meowing_kitten.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(400).crop("scale")).generate("meowing_kitten.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setCrop("scale")).generate("meowing_kitten.jpg")!, cloudinary: cloudinary)
Default HTTP example

Custom Host Name on the Cloudinary Domain

Cloudinary’s Advanced and higher plans offer the "private CDN" feature, which enables you to use <cloudname>-res.cloudinary.com as a host name for image delivery. Furthermore, with such a custom host name, you can leverage CDN-based features like SEO suffixes, which are required if you put your own CDN in front of Cloudinary or manage HTTP traffic with your own domain. See the next section for details.

For example, this image is under a custom host:

Ruby:
Copy to clipboard
cl_image_tag("fat_cat.jpg", :width=>500, :crop=>"scale", :use_root_path=>true)
PHP v1:
Copy to clipboard
cl_image_tag("fat_cat.jpg", array("width"=>500, "crop"=>"scale", "use_root_path"=>true))
PHP v2:
Copy to clipboard
(new ImageTag('fat_cat.jpg'))
  ->resize(Resize::scale()->width(500))
  ->useRootPath(true);
Python:
Copy to clipboard
CloudinaryImage("fat_cat.jpg").image(width=500, crop="scale", use_root_path=True)
Node.js:
Copy to clipboard
cloudinary.image("fat_cat.jpg", {width: 500, crop: "scale", use_root_path: true})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(500).crop("scale")).useRootPath(true).imageTag("fat_cat.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('fat_cat.jpg', {width: 500, crop: "scale", useRootPath: true}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("fat_cat.jpg", {width: 500, crop: "scale", use_root_path: true})
React:
Copy to clipboard
<Image publicId="fat_cat.jpg" useRootPath="true">
  <Transformation width="500" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="fat_cat.jpg" useRootPath="true">
  <cld-transformation width="500" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="fat_cat.jpg" use-root-path="true">
  <cl-transformation width="500" crop="scale">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Crop("scale")).UseRootPath(true).BuildImageTag("fat_cat.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(500).crop("scale")).useRootPath(true).generate("fat_cat.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).setTransformation(CLDTransformation().setWidth(500).setCrop("scale")).generate("fat_cat.jpg")!, cloudinary: cloudinary)
Custom host-name example

HTTPS on Your Own Domain

Serving images on your own domain is often for good reason:

  • SEO. A common belief is that, if other sites directly link to your images, serving images from your own domain leads to a higher SEO ranking.
  • Prevention of lock-in. With your own domain, you can switch CDN or image-processing providers (but really, why would you?) with no URL changes.
  • Preservation of URLs. Migrating to Cloudinary necessitates no changes to your current URLs.

To securely identify itself in your domain, Cloudinary generates a server certificate, signed by a third party. Instead of hosting server certificates on the CDN, which is costly, Cloudinary serves its customers’ HTTPS domains with Subject Alternate Name (SAN) certificates.

Once you’ve enabled SAN, Cloudinary adds your host name to a certificate on the CDN, to be shared among you, other customers, and Cloudinary. That approach incurs a significantly lower cost than installing your own server certificate on the CDN.

As an example, you can securely deliver the kitten image from your domain with the URL https://images.yourdomain.com/my_cat.jpg.

Complete Disablement of HTTPS

As Cloudinary customers, you can serve images on your or Cloudinary’s domain without adopting SSL-enabled CDN nodes. Such an approach is slated for sites that require no encryption and whose audiences are in remote locations with less HTTPS CDN coverage. For example, because Iceland’s HTTPS-enabled edge is overloaded or nonexistent, Cloudinary often directs customers in Iceland to Amsterdam CDN nodes for HTTPS traffic.

With the above setup, Cloudinary customers on the Advanced or higher plans can retain their own domain. Separately, to leverage the non-HTTPS network, all Cloudinary customers can take up the subdomain cdn.cloudinary.com instead of res.cloudinary.com.

For example:

Note
Because this blog post is served over HTTPS, the above HTTP image is not displayed. However, you can compare the image’s loading time with that of delivering the same image over HTTPS on res.cloudinary.com to see if a difference exists in your area.

Testing from a remote location can reveal a significant difference in load time:

Copy to clipboard
remote-server:~ ran$ time curl -s \
    http://cdn.cloudinary.com/demo/w_400/hungry_cat.jpg  > /dev/null

real    0m0.030s
...
remote-server:~ ran$ time curl -s \
    http://res.cloudinary.com/demo/w_400/hungry_cat.jpg  > /dev/null

real    0m0.258s
...

Summary

In most cases, HTTPS is the safest, most secure—not to mention simple and economical—way to deliver websites both for you and your audience. Ready for a try? Pick an option from those described in this post that fits you best.

To enable SSL modes beyond the default HTTPS standard for your account, contact us for assistance.

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more