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.
- All images on website broke: After upgrading WordPress to version 4.4, images on the website failed to load.
- Images in Media library were gone: After upgrading WordPress to version 4.4, the media library and all associated images appeared to be missing.
- Images in admin panel broke: After upgrading WordPress to version 4.4, images on the website seemed to be working, but thumbnails on the products page were not.
- Mixed content warning appeared: After installing an SSL certificate, a security warning about mixed content appeared.
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:
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:
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.)
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?
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
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
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
- 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
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.
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