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

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more