How to Fix Images Not Loading in WordPress 4.4 While Using SSL

If you notice images don’t load after upgrading to WordPress 4.4 and you use SSL on the frontend, you’re not alone. In a thread on the WordPress.org support forum, Brokkr explains the crux of the problem:

I recently switched my WordPress site to https after getting certificates from Let’s Encrypt. Using 4.3.1 all content was https.

After upgrading to 4.4 images no longer load and the browser complains about mixed content. Instead of an image,I get a filename printed out. Inspecting the filename-element in Chrome or Firefox gets me this

<img width="984" height="615" src="https://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="22100041369_591b31367d_b_enigma1" srcset="http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-300x188.jpg 300w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1.jpg 1024w, http://brokkr.net/wp-content/uploads/2015/11/22100041369_591b31367d_b_enigma1-984x615.jpg 984w" sizes="(max-width: 984px) 100vw, 984px">

As you can see, the image’s src is correctly set to https, whereas the srcset attribute is un-encrypted.

Chris Cree who experienced the same problem discovered that the WP_SITEURL and WP_HOME constants in the wp-config.php file were configured to structure URLs with http instead of https. Cree suggests users check their settings to see which URL type is configured. If both the WordPress address and Site URLs don’t show https, it’s likely causing issues with responsive images in WordPress 4.4.

URL Settings in WordPress
URL Settings in WordPress

Joe McGill, who helped lead the effort to get responsive images into WordPress, also responded in the forum thread and confirms Cree’s suggestion is correct, “If you’re running HTTPS on the front end, you should change the URLS for your home and site URL in Settings > General so they use the HTTPS scheme,” he said.

McGill confirms that the issue is related to a bug in the way WordPress builds URLs. Even though the solution in the trac ticket is one line of code, McGill says it will break a lot of site configurations. If changing the settings doesn’t work or you don’t have access to the settings page, you can add this snippet of code to the functions.php file or add it as a separate plugin.

/*
 * Force URLs in srcset attributes into HTTPS scheme.
 * This is particularly useful when you're running a Flexible SSL frontend like Cloudflare
 */
function ssl_srcset( $sources ) {
  foreach ( $sources as &$source ) {
    $source['url'] = set_url_scheme( $source['url'], 'https' );
  }

  return $sources;
}
add_filter( 'wp_calculate_image_srcset', 'ssl_srcset' );

The solutions described above should work for most people serving content over SSL unless you’re using  CloudFlare. If you still encounter problems with images not loading after applying the fix, I encourage you to create your own thread in the WordPress support forum.

16

16 responses to “How to Fix Images Not Loading in WordPress 4.4 While Using SSL”

  1. The Problem I am having with 4.4 and WP Engine is:

    One the setting are copied over to the staging server and the staging server doesn’t have the certificate so it give you a warning. Which you can override and then you hit another error in a redirect loop which results in an error.

    So this had rendered my staging server for my online store inoperable.

    (Yes WP Engine I am contacting support)

    But oh my this is a bit of problem for those who like to test stuff before they update.

    • You can resolve this issue by modifying the ssl_srcset() function so it only makes the changes under an SSL connection.

      Wrap the foreach() block in this conditional: if (is_ssl()) { }

      • Spot on! With the conditional my srcset matches the page protocol, nice green padlock.

        Really that is a bug. The CMS should always match protocol when constructing links. It’s not like the user has been daft enough to use hard coded links.

        Thanks room34.

    • WPEngine can enable HTTPS for your staging server so it’s more similar to your live site.

  2. Thanks for posting this. Upgraded to 4.4 last night and published a large article only to see all my images broken.

    Implemented the function in functions.php and everything seems to be working again!

  3. Pulling my hair out trying to figure out why I was having the “broken link” on some of my images! Implemented the function in functions.php in my child folder and everything is working! Thank you!

  4. Thanks so much! This solved my problem. I was pulling my hair out to figure out what was wrong.

  5. Lol, in my case it was lazy load which was causing the trouble after enabling ssl on my website

    • Thank you, i had the same problem and deactivating lazy load on my images and iframes solved the problem.

  6. I have the same issue on my client website. It’s not working. I even tried disabling SSL on the website. Still, Images are missing. Any solution?
    Website URL is : www [dot] thinkethlabs [dot] com/management/

  7. I was lucky enough to find your post really quickly and literally saved my day as I managed to fix my problem instantly as soon as I uploaded this code snipet in my functions.php file. Thanks, you’re a star :)

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: