Category: Retina screens

One of the newest features (and one of the coolest) to be introduced to WordPress core lately has been “responsive image support”. What does this really mean? To be specific, WP implemented the HTML5 <img> srcset (“source set”) attribute.

When it works properly, this attribute solves a couple common problems in web development. By providing the browser with a list of pre-scaled image resolutions it can choose from, a device can intelligently request the best image for the current screen resolution. If you’re using one of the currently supported browsers on a high-resolution screen, it should automatically opt to use one of the larger images specified in srcset. I’ve been doing a lot of testing on my Nexus 6P, which is nearly 520 PPI. You can really tell the difference on screens like that.

Here’s the problem. If you’re using HTTPS with WordPress, but it isn’t in your SITEURL or HOME variables, you will likely end up with plain old HTTP srcset paths. Visiting the site on unencrypted HTTP will work just fine, but the problems show when you try HTTPS. Suddenly, and only on devices that support and choose to use the srcset, most of your images will fail to load. This is called “Mixed Content” – loading insecure resources from a secure page. It’s a pretty bad thing to do, and because of the security hazards, almost all browsers will completely block requests like this to unencrypted HTTP from an HTTPS session.

So, yeah, great – browsers block your responsive images. You could go all-HTTPS, or go all-HTTP, but their is an option for your particular instance.

What do you do?

Solution A: filter wp_image_calculate_srcset and do an easy-peasy str_replace( ‘http://’, ‘https://’ ) making *all* your srcset images SSL. Use this for CloudFlare support.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $filtered_sources = array();
 foreach($sources as $source_key=>$source) {
  $source['url'] = str_replace('http://','https://', $source['url']);
  $filtered_sources[$source_key] = $source;
 }
 return $filtered_sources;
});

Solution B: filter wp_image_calculate_srcset and attempt to detect the protocol the page was requested with, then only rewrite to https if the page was loaded securely as well. This is nice if it works in your configuration since you don’t incur any HTTPS overhead loading images on an unencrypted page. However, it will not work with CloudFlare. If you’re using CloudFlare, you should make sure HTTPS is on and use Solution A.

add_filter( 'wp_get_attachment_url', 'set_url_scheme' );
add_filter( 'wp_calculate_image_srcset', function($sources) {
 $page_protocol = ( !empty( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443 ) ? "https" : "http";
 foreach ( $sources as $size => $source ) {
  if ( stripos( $source['url'], $page_protocol ) !== 0 ) {
   // we can't find the current page protocol at the beginning of the srcset...
   $new_url = str_replace( $source_protocol . '://', $page_protocol . '://', $url );
   $sources[$size]['url'] = $new_url;
  }
 }
 return $sources;
});

Solution C: update siteurl and home to start with https://. This will make your whole site SSL. Please make sure your certs and redirects are all okay before doing this, or there’s a good chance you’ll lock yourself out of your install.