SSL Causing Images Not to Display? Here’s How to Fix It

Posted on May 16, 2016 by in Tips & Tricks | 22 comments

SSL Causing Images Not to Display? Here’s How to Fix It

Before we dive into talking about SSL causing images not to display, let’s first provide some context. When it comes to the connection between human senses and marketing, vision appears to be the most influential. According to Brain Rules by John Medina, the following resulted when testing the power of recall:

When people were given information to listen to, they remembered about 10% of what they were told three days later. But when people were given information alongside an image, they remembered about 65% of what they were given three days later.

Research has shown that people’s willingness to read content increases by 80% when paired with colorful images. As a publisher or marketer, it’s important for you to not only have website visitors remember what they saw, but to actually take the time to read it.

Having high-quality and colorful visuals on your website is an important piece of your marketing strategy. Images make content more easily digestible (as noted above), they allow you to be more creative with your content (like with infographics), and they help draw your readers’ attention exactly where you want it to go (through calls-to-action).

So if images are so important to your overall marketing strategy, what would you do if you discovered that the images on your website were no longer working? If you recently upgraded your WordPress to version 4.4, you may have encountered this exact problem.

SSL Causing Images Not to Display

While this isn’t solely relegated to the recent WordPress upgrade, there seemed to be a slew of issues reported regarding images not displaying on websites late last year.

The common theme found among all these reported issues online? WordPress 4.4. Upon closer inspection though, the issue wasn’t that WordPress 4.4 didn’t work with images. The issue was with SSL causing images not to display.

While many people experimented with deactivating plugins, reuploading images, switching themes, and so on, none of those resolved the problem. The issue stemmed from a now-known bug that introduces “mixed content” when you combine SSL and WordPress 4.4.

The Importance of Site Security

“Security” has been a highly prominent buzz word this past year. Most recently in the news was the battle between Apple and the U.S. government regarding control over the public’s data security. While there are a lot of major news outlets covering stories like that, there are also incidences of people getting their password, email, payment information, and identity stolen—from websites, through their credit cards, and through other scams. Security of personal data is not something businesses nor customers want to or can afford to take lightly.

A lot of companies today conduct business through an online storefront. In order to process transactions involving sensitive customer information, these companies need to be able to prove to their customers that they have a way of ensuring that data stays safe. When it comes to transferring customer data online, that can be a tall order to fill. Think about it this way:

Data Transfer

But what happens in the middle? Who is securing the connection of the two other connections?

SSL: To the Rescue

The most common way to do this is by purchasing a Secure Sockets Layer (SSL) certificate. This certificate helps guide website visitors in deciding whether or not it is safe to continue onto a website. If a site is deemed unsafe due to mixed content—like in the instances above—users are then given a warning and asked whether they want to proceed into the site anyway.

And that is how SSL is meant to work. It serves as a sort of gatekeeper between your connection and your customers’ using a set of keys (a string of numbers). Customers’ browsers or devices generally tend to receive a public key. Your website will then receive a private key. The one that connects the two is known as a session key and is what encrypts and decrypts the data that is passed back and forth.

Here is what this looks like:

SSL Keys

Regardless of whether your site is verified as secure or not, just having this warning pop up isn’t good for business. People who enter regardless of it will be cautious about what actions they can safely take on your site. And people who choose not to enter… well, that’s lost business for you right there. So when you spot these mixed content warnings in the form of images breaking on your site, take that as a huge red flag telling you it’s time to fix something.

HTTPS: The Missing Link

Now with the SSL certificate in place, the other component of a secure website comes in the form of HTTPS—the “Secure” version of Hypertext Transfer Protocol. HTTPS is responsible for transporting data between two points and it does this by using SSL.

For websites not working with confidential customer information, HTTP works just fine. But for those of you who require that additional level of security, HTTPS is a must. (And if that isn’t enough of a reason, Google has been known to reward websites with higher search rankings that use HTTPS.)

What HTTPS looks like in your browser.

What HTTPS looks like in your browser.

With your website officially secured through SSL and HTTPS, you probably figure that’s it. You are now a verified and trusted third party and that customers will be flocking to your website. Then something like this happens. You find out that SSL is causing images not to display and, consequently, it’s resulted in your customers’ losing trust in your brand because your site is labeled unsafe. What do you do?

Fix the Bug

By now you probably realize there is something funky going on with your SSL and HTTPS because of a WordPress upgrade. Once developers began to dig into all of these reported issues, they were able to identify the root cause as coming from the introduction of mixed content.

What Is Mixed Content?

MixedContentWarning

There are two different types of mixed website content. One is known as mixed active content and results when HTTPS loads a script on top of HTTP (which is a big no-no). That is not what the issue is here.

The other type of mixed content is known as mixed display content—sound familiar?—and is when content using an HTTP connection is loaded to the site. While you may not have actively loaded any images to your website using HTTP, there was something inside of WordPress that caused them to be recognized as such. In the simplest of terms:

For websites running on HTTPS during the upgrade, there was a setting that existed somewhere on the website that contradicted the site-wide HTTPS. That contradiction auto-forced HTTP onto images and rendered them useless until the glitch could be found.

How to Remove Mixed Content

SSL causing images not to display on your website, but unsure of what to do about it since the issue came with your WordPress upgrade? Switching back to an older version of WordPress is not the key. There are a number of solutions you can investigate.

Remember: The solution—regardless of how you go about fixing it—is to find the mixed content links that reside within your code and update them to the correct HTTPS needed to secure your images once again.

Fix #1: Install WordPress HTTPS (SSL) plugin

WordPress HTTPS Plugin

If you don’t have it already, this plugin is the best place to start. Install it and see if that fixes the issue. CloudFlare has similar issues, but requires their own plugin and/or fix. You can get the instructions for that here.

Fix #2: Investigate admin panel URL settings

Admin Panel

The next place to go is your WordPress dashboard. Click Settings > General.

If your WordPress and site URL address fields show “http://”,you’ll want to update those to “https://”

Fix #3: Investigate code

2-Source Code

Take a peek at your site’s source code.

  • Open your website.
  • Open the source code for whatever page has a broken image.
  • Hit Ctrl + F to conduct a search through the code.
  • Paste “src=http” into the search box.
  • You should find that the broken image links on this page have an HTTP element instead of an HTTPS.
  • Go into WordPress and fix the specific instances requiring an update.

Fix #4: Investigate theme

If you are using a third-party theme on your website, they may use absolute URLs rather than relative URLs. Review your theme’s PHP files to verify the automatic setting. If you are dealing with absolute URLs, you will need to find a way around this using custom coding or plugins.

Consult our guide, How to Use SSL & HTTPS With WordPress, for more information.

Fix #5: Investigate plugin

If you are using a third-party plugin, they may also have automatic settings that override any site-wide HTTPS you have set up. Review the plugin settings to identify if there are any “force HTTPS” rules established that might mess with the coding outside of that page or instance. If so, remove the setting and try again.

Fix #6: Investigate broken links

search-regexThere are a variety of tools out there that can help you quickly and easily check the links on your website: Google Webmaster Tools, Screaming Frog SEO Spider, and Search RegEx for starters

Some will allow you to do a quick swap-out of HTTP for HTTPS while others will allow you to update relative paths so you no longer run into issues in the future. Work with the tool that makes the most sense for you.

Conclusion

When it comes down to it, images play a very important role for your website. They help better draw in the attention of your site’s visitors. They help solidify a consistent and professional look throughout your website. And they add an extra level of “wow” when used strategically across all content, from blogging to social media and beyond. In order to maintain this essential part of your marketing identity, you have to make sure all the appropriate settings are in place—not just so you can display these visuals, but so you can display them securely.

You’ve spent a lot of time setting up your website, getting your SSL certification in place, and keeping your WordPress up-to-date. Your visitors deserve a safe as well as entertaining experience, so make sure you’re able to offer them that by monitoring and managing your website diligently.

Article thumbnail image by rizvan3d / shutterstock.com

22 Comments

    • Some of WordPress’ database tables use serialized data so you can’t do a simple find and replace with a text editor. I’d definitely use a plugin unless you want to break things.

  1. HI there,

    Really nice article to help people secure their sites better and help explain to clients too.

    SSL now free with CLoudflare and Sucuri. And both give your website http/2 – and this is really awesome.

    I have spent probably the last two months inbetween other projects upgrading sites to SSL. And I found this plugin to work better than the older plugin mentioned in the article: https://wordpress.org/plugins/ssl-insecure-content-fixer/

    I have used the plugin mentioned in the article before…it works mostly, but it’s 2 years without and update. I don’t know if that’s relevant.

    For anyone using free SSL from Sucuri or Cloudflare, then I also recommend this: https://wordpress.org/plugins/cloudflare-flexible-ssl/

    It’s pretty cool seeing SSL become so accessible and available to everyone now.

    Thanks for a great article 🙂

    Cheers
    Paul

    • Thanks for the plug-in link; insecure-content-fixer.
      I will definitely give it a try.

      thanks,
      ernie

  2. Thanks for this info.

    I went crazy on a client’s site. The order page showed the partial padlock, some content not secure. Some of his clients were refusing to use the order form because they said it wasn’t secure.

    I used a plugin called wp-force-https which helped but didn’t solve the issue.

    I couldn’t figure out the issue. I found a website “whynopadlock.com” which showed me the files that were causing the issue: the client logo was placing as an http file. Awesome little tool.

    From here I could start fixing images and reassure my client the site was safe.

    Again, thanks,

    ernie

    • I love the no padlock website – so useful!

  3. Hi!
    I have this issue with images not showing my last WP update.

    I installed the SSL insecure content fixer plugin but nothing happened. Then I changed the http to https in general settings and I got logged out and now I can’t log back in…it keeps loading and Im not getting to the WP log in site. What can I do to fix this??

    Appreciate any help.

    • Looks like you are in a infinite loop there. Looks like this anyway.
      Where is your SSL from?
      And to get back as you were, do you know how to change those options back as they were (http) in PHPMyAdmin?

      Send me an email if you like, would be happy to take a look (no charge). I just went through some similar problems the first few times I was working with Cloudflare and Sucuri SSL.

    • Hi Anette
      Had the same issue. Caused by Yoast SEO plugin.
      I changed the plugin name from FTP access and then was able the enter the dashboard again. rename back the plugin and activate again. Every works afterwards.
      Just not clear what plugin causes the issue in your case.
      Best,
      Frank

    • Anette, if you’re not comfortable fiddling with the database in phpmyadmin where you could replace the site URL’s manually, then you can try the instructions found here to change your site URL.
      http://codex.wordpress.org/Changing_The_Site_URL

      Hopefully this helps in you getting access to your site again.

  4. Hmmm, stay away from SSL until everyone sorts out the issues. Stick to premium themes too – like Divi

  5. Using relative links instead of absolute is one way that we usually bypass this issue entirely – HOWEVER, if you are submitting articles to Facebook Instant articles, there is an issue with the lack of absolute link and it will create errors in upload notes when pushing new content into FBIA.

  6. Thank you so much

  7. Careful with “Fix #2: Investigate admin panel URL settings”:
    It causes Yoast SEO to block me from admin panel with an Ajax error message.
    I had to rename the plugin via FTP access and activate it again. That fixed the problem and everything is fine now.
    Thanks for the article. It really helps.

  8. We dealt with this issue and ended up solving it by storing all of our media/uploads on a CDN bucket so all the images are always linking to the CDN bucket which always has https enabled. We ended up releasing this functionality in a free plugin https://wordpress.org/plugins/wp-stateless/

    You would have to go back and fix the mixed content nonetheless, but as you upload additional media it’ll always be served using SSL.

  9. I recommend using the “Really Simple SSL” plugin. It automatically changes the http links to https.

    • Andrej: thanks for the suggestion, this helped me with a troublesome “insecure form” that I couldn’t find myself. The plugin “Really Simple SSL” solved it! 🙂
      Cheers

    • Thanks Andrej! I was nervous about installing a plugin that hasn’t been updated in the past 3 years. I read people were having issues with the old plugin. I suspect that Suzanne article is at least 3 years old.

  10. Great info, Thanks

  11. This was recently killing us on one of our sites. It’s amazing that the switch to ssl can be so bumpy. Thanks for the info.

  12. Working on this isssue for 3 days thinking it was the ssl causing it. It may apply to some of you or to all of you but check this out:
    Go to dashboard.
    Click Jetpack. Turn off Photon.
    Problem Solved.

    Thank me later. or contact me if you need web marketing services.
    PPC(Google,Bing) and Facebook.
    SkypeID: nikolin.ndoka3

401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest