Fix Broken Images in WordPress After Moving to HTTPS: Complete Step-by-Step Guide

If you need to fix broken images in WordPress after moving to HTTPS, the good news is that this problem is usually very fixable. The bad news is that it can show up in several places at once. Your posts may load but featured images disappear. Your Media Library may show broken thumbnails. Background images may vanish. Some pages may display correctly while others still look damaged.

That is why people get frustrated after an SSL migration. They assume the certificate install failed, when the real issue is often a mix of old HTTP URLs, cached files, hard-coded image paths, CDN settings, or thumbnail problems.

In this guide, you will learn exactly how to troubleshoot and fix the issue safely. We will cover the common causes, the right order to test things, and the fastest ways to restore your images without creating new problems. We will also point you to helpful resources on WP Fix It, including WordPress Mixed Content Warning FIXED, FIXED – WordPress Media Library Not Loading, and the WordPress Site Repair and Fix Service in case you want an expert to resolve it fast.

Why images break after switching WordPress to HTTPS

When you move a WordPress website from HTTP to HTTPS, the page itself starts loading securely, but some old assets may still be requested over HTTP. Those assets can include images, CSS files, JavaScript files, fonts, and background images. This is commonly called mixed content.

Sometimes the browser upgrades image requests automatically if the HTTPS version exists. But if the image URL is wrong, the file is unavailable over HTTPS, the CDN still points to HTTP, or the image path is malformed, the browser may still fail to load it. In more stubborn cases, the page source, CSS, theme options, page builder content, widgets, and custom fields all contain old absolute HTTP URLs.

That means your site can be “mostly HTTPS” but still show broken visuals.

The most common causes of broken images after HTTPS migration

Before fixing anything, it helps to know where the break usually happens. In WordPress, the causes are typically one or more of the following:

1. Old HTTP image URLs in the database

WordPress stores content in the database. If your posts, pages, widgets, builder layouts, or theme settings still reference http://yourdomain.com/..., some images may not load correctly after the move.

2. Mixed content in CSS or theme files

Your main images might be fine, but background images, icons, or theme assets may still be loaded from HTTP inside CSS files or theme settings.

3. Incorrect WordPress Address or Site Address

If the site still thinks its home URL or site URL is HTTP, WordPress can generate incorrect asset paths.

4. CDN or cache still serving old image paths

A CDN, server cache, optimization plugin, or browser cache can keep delivering outdated HTTP references even after you make the right fix.

5. Hard-coded image URLs inside themes or plugins

Some themes, child themes, snippets, or custom templates use direct URLs instead of dynamic WordPress functions.

6. Thumbnail or image size issues

The original image may exist, but thumbnail files may be missing, corrupted, or not regenerated properly after a theme or URL change.

7. File permissions, hotlink protection, or server rules

In a smaller number of cases, the problem is not HTTPS itself. It is a permissions issue, restrictive hotlink settings, or server security rules affecting image delivery.

What broken HTTPS image issues usually look like

You might be dealing with this problem if you notice any of the following:

Featured images missing on posts or archive pages
Broken thumbnails in the Media Library
Slider images not loading
CSS background images disappearing
WooCommerce product images showing blank or broken
Images loading in one browser but not another
Homepage images broken while direct image URLs still open
Images visible in the editor preview but missing on the live page

If direct image URLs open in a new tab, but the page itself still shows broken images, that strongly suggests a mixed content or URL reference problem rather than a missing file problem.

Step 1: Confirm your WordPress URLs are set to HTTPS

First, go to Settings > General in WordPress and confirm these are both using HTTPS:

WordPress Address (URL)
Site Address (URL)

Both should be your final secure version, such as:

https://yourdomain.com

If you cannot access the dashboard, you can also define them in wp-config.php:

define('WP_HOME', 'https://yourdomain.com');
define('WP_SITEURL', 'https://yourdomain.com');

This can stop WordPress from generating inconsistent asset URLs.

If your site recently entered a redirect mess after SSL or Cloudflare changes, read WordPress ERR_TOO_MANY_REDIRECTS After SSL/Cloudflare Changes before making more URL changes.

Step 2: Check the browser console for mixed content errors

Open the affected page in Chrome, right-click, choose Inspect, and look at the Console, Issues, or Security panel. Mixed content warnings will often show the exact asset URL that is still loading over HTTP.

Look for messages that mention:

mixed content
insecure image request
blocked resource
upgraded request from HTTP to HTTPS

This is one of the fastest ways to identify the exact broken image path.

If you see a URL such as:

http://yourdomain.com/wp-content/uploads/2024/09/example.jpg

then you already know the issue is not the image file itself. The issue is that the page is still referencing the old protocol.

Step 3: Test whether the image file itself still exists

Copy one of the broken image URLs and open it directly in a new tab.

Check both versions if needed:

http://yourdomain.com/...
https://yourdomain.com/...

Here is what each outcome means:

If HTTPS version loads, the file exists and the page is using the wrong path.
If HTTP works but HTTPS fails, your SSL or server/CDN configuration may not be serving media correctly.
If both fail, the file may be missing, moved, blocked, or corrupted.

This step helps you avoid wasting time on the wrong fix.

Step 4: Run a safe search-and-replace for old HTTP URLs

One of the most common ways to fix broken images in WordPress after moving to HTTPS is replacing old absolute URLs in the database.

A beginner-friendly option is to use a plugin like Better Search Replace. A more advanced option is WP-CLI.

Using Better Search Replace

Back up your site first.
Install and activate Better Search Replace.
Search for:
http://yourdomain.com
Replace with:
https://yourdomain.com
Run a dry run first.
Then run the real replacement.

This can update old image references in posts, pages, widgets, and many database tables.

WP Fix It’s WordPress Mixed Content Warning FIXED guide also recommends a database replacement step because old HTTP paths are one of the biggest reasons images remain broken after SSL is enabled.

Using WP-CLI

If you use SSH and WP-CLI, this is a clean approach:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guid

This is especially helpful on large sites or staging-to-live migrations.

Step 5: Clear every layer of cache

After updating the database, do not judge the result until you clear caches.

Purge all of the following:

browser cache
WordPress cache plugin cache
server cache
object cache
CDN cache
Cloudflare cache
image optimization plugin cache

A lot of site owners think the fix failed when they are only seeing cached HTML or cached CSS.

If you use Cloudflare or another edge cache, purge it fully. If your site behaves differently in incognito mode than in your normal browser, cache is likely part of the issue.

Step 6: Check theme settings, page builders, and custom fields

Some image URLs do not live in normal post content. They may be inside:

Elementor sections
Divi modules
WPBakery blocks
theme customization panels
widgets
custom fields
ACF fields
slider plugins
testimonial plugins
popup builders
menu image plugins

Open the areas where broken images appear and inspect the saved image URLs manually. In many cases, the site-wide search-and-replace fixes most items, but builder-generated content may still need a manual refresh or resave.

This is especially common with homepage hero backgrounds, CTA strips, and footer graphics.

Step 7: Inspect your CSS for HTTP image references

If only background images or decorative graphics are broken, the problem may be inside CSS rather than post content.

Search your theme files, child theme, or custom CSS for:

http://yourdomain.com
url(http://...)

Update those references to HTTPS or use relative URLs where practical.

Example:

.hero-banner {
  background-image: url('https://yourdomain.com/wp-content/uploads/2026/03/banner.jpg');
}

Even better, when appropriate, use root-relative paths:

.hero-banner {
  background-image: url('/wp-content/uploads/2026/03/banner.jpg');
}

That reduces future protocol headaches.

Step 8: Confirm your CDN or image optimization plugin is not rewriting URLs badly

If you use a CDN, image optimization service, lazy loading layer, or WebP delivery plugin, disable it temporarily and test again.

Why? Because some tools rewrite image URLs on the fly. After an HTTPS migration, they may still point to an old HTTP source, an old subdomain, or an invalid CDN host.

Check for issues like:

CDN domain missing SSL
image rewrite plugin using outdated source URLs
lazy loading script broken by optimization settings
mixed protocol between origin and CDN
stale transformed image cache

If disabling that layer restores the images, the problem is inside that service’s URL rewriting or cache.

Step 9: Regenerate thumbnails if originals exist but previews are broken

Sometimes the full image file exists, but WordPress thumbnail sizes are missing or broken. That often happens after theme changes, image handling conflicts, or interrupted migrations.

A plugin like Regenerate Thumbnails can recreate missing image sizes.

This helps when:

full images load but archive thumbnails do not
featured image previews are blank
Media Library previews are inconsistent
WooCommerce product image sizes look broken

WP Fix It also notes in its media troubleshooting content that testing a fresh upload is useful. If a new image uploads correctly and thumbnails are created, older media may simply need regeneration rather than a full HTTPS repair.

Step 10: Test plugin conflicts

If the issue continues, deactivate caching, security, image optimization, SEO, builder, and media-related plugins one at a time.

Pay close attention to plugins that handle:

SSL enforcement
n- image compression
CDN integration
performance optimization
hotlink protection
lazy loading
WebP conversion
media offloading

A plugin conflict can make the site appear like it has an HTTPS image issue when the real cause is script rewriting, blocked requests, or malformed markup.

If you need a structured process for that, read How to Fix WordPress Plugin Conflicts.

Step 11: Check `.htaccess`, Nginx rules, and security headers

If image URLs are correct but the browser still refuses them, server rules may be the problem.

Look for:

forced rewrites that break media paths
hotlink protection rules blocking your own domain
inconsistent reverse proxy headers
malformed HTTPS redirect rules
restrictive Content Security Policy image rules
CDN-origin mismatch

If your site runs behind a proxy, load balancer, or Cloudflare, make sure the origin and WordPress both understand the request as HTTPS.

Step 12: Use Search Console and page testing tools after the fix

Once you believe the issue is solved, verify it with a few tools:

Google Search Console HTTPS report
browser DevTools console
mobile browser check
private/incognito test
page speed or crawl tool that renders the page

Search Console can show whether Google sees your pages as HTTPS and can surface issues that prevent secure serving. This matters because broken images hurt page quality, user trust, and can also hurt search appearance and engagement.

For more display testing ideas, WP Fix It’s Test Website Display Issues – 6 FREE and Easy Ways is also worth bookmarking.

The fastest plugin-based fix path for beginners

If you want the simplest low-risk route, this is the usual order:

Back up the site.
Confirm WordPress URLs are HTTPS.
Install Really Simple Security or another SSL helper plugin.
Run Better Search Replace to replace old HTTP URLs.
Clear all caches.
Regenerate thumbnails if needed.
Manually check builders, widgets, and background images.

That process resolves a large percentage of post-HTTPS image failures.

The best advanced fix path for developers

If you are comfortable with server access, the cleaner advanced route is:

Back up files and database.
Confirm valid SSL and origin behavior.
Set home and siteurl to HTTPS.
Run wp search-replace with --skip-columns=guid.
grep for http://yourdomain.com in theme files and custom code.
purge all caches and CDN layers.
regenerate thumbnails.
inspect CSP, proxy headers, and server rules.
test in browser DevTools and Search Console.

That avoids over-relying on multiple plugins and gives you better long-term control.

How to prevent broken images the next time you move to HTTPS

A clean HTTPS migration is less about one magic fix and more about doing the steps in the right order.

Here is the prevention checklist:

Back up before changing URLs

Use a reliable backup tool such as UpdraftPlus or your host backup system before changing anything.

Update URLs consistently

Do not change only one location. Make sure WordPress settings, database references, CDN settings, and hard-coded assets all align.

Use staging when possible

Run the migration in staging first so you can catch broken media, mixed content, and redirect issues before the public sees them.

Avoid hard-coded absolute URLs

When building templates, use WordPress functions or relative paths instead of embedding full HTTP URLs.

Purge cache immediately after changes

Cached HTML is one of the biggest reasons HTTPS migrations look unfinished.

Retest uploads after migration

Upload one new image and verify that:

the file uploads successfully
thumbnails generate
the image URL is HTTPS
the image displays on the front end

Keep your maintenance process clean

A stable WordPress environment reduces these problems. If your site has too many overlapping caching, media, or optimization plugins, simplify it.

SEO impact of broken images after HTTPS migration

Broken images are not just cosmetic.

They can reduce trust, damage conversions, hurt engagement, increase bounce risk, and weaken page experience. Google also recommends serving pages securely and maintaining a strong overall page experience. In practice, if your pages lose visual content, they often become less helpful to visitors.

For blogs, service pages, portfolios, ecommerce stores, and recipe sites, missing images can remove some of the main value of the page. That makes fixing the issue quickly important for both users and search visibility.

When to stop troubleshooting and get help

DIY is reasonable when the site is small and the issue is clearly mixed content. But stop and escalate if:

the site is producing redirect loops
WooCommerce product images are disappearing at scale
the Media Library is broken
server rules are involved
CDN behavior is inconsistent
you suspect corrupted paths or damaged serialized data
you have already spent more than an hour with no clean progress

That is where professional help saves time and prevents accidental damage.

WP Fix It has been helping WordPress users since 2009, offers 24/7 support, and promotes a one-time site repair option with a no-fix-no-cost promise. If your issue is urgent, the WordPress Site Repair and Fix Service is the most direct CTA for this topic.

Final thoughts

If you are trying to fix broken images in WordPress after moving to HTTPS, start with the basics: confirm your site URLs, inspect the browser console, replace old HTTP URLs in the database, and clear every cache layer. Then move into builders, CSS, CDN behavior, and thumbnail regeneration.

Most of the time, the images are not truly gone. They are simply being requested from the wrong place, using the wrong protocol, or being blocked by stale cache or rewrite logic.

Work through the checks in order and you will usually find the culprit quickly.

And if you want the fastest path to a stable fix, keep these WP Fix It resources handy:

Get the URLs right, clear the caches, rebuild thumbnails if needed, and your HTTPS migration should finally look the way it should: secure, clean, and fully visual.