Mixed Content and Responsive Images

I ran into a weird issue. Images weren’t loading for some reason on this project I was working on. And yet, on the old site, they loaded just fine. What was different?

After some digging, I noticed that the images that weren’t loading were those defined using the <picture> element. Surely that’s not expected behaviour, is it? Turns out, it is.

There’s a Mixed Content spec. This spec defines the rules in which content should be blocked when they’re served from an unencrypted context within an encrypted one. (That is, an https page trying to load images and other assets over http.)

Images are considered passive content. As a result, browsers will serve them up even though they’re unencrypted. Scripts, on the other hand, are considered active content and, by default, get blocked.

Interestingly, within the spec is this very line: “Return allowed if one or more of the following conditions are met: [...] when request’s type is "image", and initiator is not "imageset".”

The picture element being an imageset, that means that unencrypted images defined in a <picture> or srcset will get blocked.

Solution?

From what I can tell, you have two options: serve the images over https or don’t use responsive images. (I recommend the former.)