How to reference CDN images in a stylesheet which may use HTTPS?

Question

I have all my site images setup to serve from Amazon's Cloudfront CDN. If my pages will sometimes be served as both HTTP and HTTPS, then should I make all image paths HTTPS to the CDN?

Is this a poor practice?

Any other ideas?

Answer 1

Making all image paths to the CDN be over HTTPS is definitely a bad idea. There is a significant overhead with each HTTPS request, so you might not want to do that.

However, turns out there is a simple solution to specifying absolute, cross-domain URLs without the protocol. Simply use, in your css, something like

url: (//d604721fxaaqy9.cloudfront.net/image.jpg) ...

and make sure that your stylesheet is being served over the same protocol, either by using the same trick, or preferably by specifying a path without the protocol, i.e., something like

<link href="/styles.css" ...

or

<link href="styles.css" ...

and you're good to go!