WordPress 4.4 brought an awesome new feature to the CMS system: Responsive images. As of 4.4, WordPress automatically adds the HTML5 srcset attribute to the image tags that it auto-generates. These srcset attributes define other sizes of the image, to be downloaded on devices with other screen resolutions and orientations. Using responsive image tags allows sites to load faster on mobile, use less data, and be optimized better for the viewer’s screen.
Unfortunately, because of the way WordPress implemented the feature, these new srcset attributes can cause trouble on some sites.
If you are using Cloudflare, with Universal SSL, or if you are serving your site over both HTTP and HTTPS, you may see broken image tags in Chrome, or receive security warnings in other browsers.
The problem is pretty simple. Wordpress expects your site to be served at the address stored in the ‘siteurl’ option, including the protocol stored there. The new srcset image urls are built from that assumption, without running through the usual filters. So, HTTPS sites can end up serving HTTP images in the srcset tag, causing all kinds of trouble.
Lockily, I’ve come up with a simple fix for the problem. Just add the following code to your functions.php file, and your srcset images will all be served as protocol-independent urls:
This same approach can also be used to fix CDN urls in srcset tags, by using a different replace function.