How to Fix Broken Images in WordPress: Actionable Tips

Images play a significant role in enhancing users’ experience and engagement. Seeing broken images on your WordPress site ultimately devalues your brand, which is why it’s crucial to learn how to fix broken images in WordPress.

Besides engagement, images also play an important role in website rankings, so broken images can be bad news for your overall website reputation. But, not to worry, there are many ways to detect and fix broken images

While you can always ensure that WordPress website links are in place with WordPress support, it’s important to understand the basics of fixing broken images. Today, we will explore broken images and how to easily fix them in WordPress.

TL;DR: Quick Fix Guide for Corrupt Website Images

• Scan your site with a plugin to quickly find missing or unavailable media files.
• Check file paths, names, and extensions carefully to ensure they match exactly.
• Re-upload or replace corrupted or deleted files directly from the media library.
• Avoid external image links and keep files on your server for better reliability and speed.

What is a Broken Image, and Why is it Important to Fix it?

In simple words, broken images lead to a link that is no longer available or corrupted. When users click a broken image, they either get a 404 error or a broken-image icon, indicating the image is broken/unavailable. It is one of the most common WordPress errors.

As implied in the beginning, a broken image is a critical event on your website. For example, if you have an e-commerce store or hospitality website that relies heavily on product images, users expect high-quality visuals.

If he/she finds a broken image, it can negatively impact your business and hamper the user experience. Not only users but even Google bots can scan your website for broken links and flag it as unreliable or spammy due to broken images. This also impacts your responsive WordPress web design.

Thus, having broken images or links on your website can damage its credibility and brand image. It is important for you to perform regular website maintenance, check for broken images or links, and fix them immediately.

Many site owners also run into problems with JPEG images, especially when these files become corrupted or are accidentally renamed.

How to Detect Broken Images in WordPress?

Now that you understand broken links and how they can affect your WordPress website’s reputation, it’s imperative to detect broken images.

While there are many ways to check broken links on your website, the easiest is to use the WordPress plugin Broken Link Checker.

With this plugin, you can easily check for any broken images or dead links on your website and fix broken images in WordPress. The plugin has both a free and a premium version. The free version allows you to detect issues with a manual scan, while the premium version offers more advanced features.

To start detecting the broken images and links:

• Install and activate the broken link checker plugin in WordPress

• After installing the plugin, go to the broken link checker page, select broken link scan, and click on start a new scan

• The plugin will start scanning for all of your website’s broken links. You can see the number of pages and posts in the progress bar while the scan is still ongoing

• Once the scan is complete, you’ll get a list of all broken links so you can fix broken images in WordPress.

These scans help you quickly identify missing image files that may have been moved, deleted, or incorrectly linked during updates or migrations.

Alternatively, you can use Seahawk Media’s broken link checker, which is part of our free testing tools, or hire our WordPress developers for quick results.

Related: How to Optimize Images and Improve Website Speed

How to Fix Broken Images in WordPress?

Before we dive into how to fix broken images in WordPress, let’s look at some of the reasons behind this issue.

Let’s look at the issues that can lead to broken images in WordPress:

• Incorrect file path to the image location.
• Corrupted image file.
• Mismatch in the image format (e.g., the image file is .jpg, but the code identifies it as .png).
• Changes to the image file name.
• Files are deleted or missing from the server (often occurs during site migration).

The above are a few reasons for the broken images on your website. Let’s see how we can fix these issues, fix broken images in WordPress, and reduce bounce rates.

Read: Why is Your WordPress Slow

Incorrect File Path

WordPress generates a file path to specify the location of an image when you add it to your website. Web browsers use this path in the image src attribute to locate and display the image. The images will not display, and the loading time will increase if the path is incorrect.

A simple typo in a JPEG file’s path can instantly break the image, so double-check the directory structure carefully before updating it. To fix this issue, find the post or page with the broken image icon and replace it with another image.

Here’s how:

• Log in to your WordPress dashboard.
• Navigate to the post or page with the broken image.
• Hover over the post and select “Edit.”
• In the post editor, scroll to the section with the broken image.
• Click the broken image, then select “Replace.”
• Pick a picture from your media library or upload a new image.
• Click “Update” to save your changes.

Replacing Custom HTML Images

If you add an image using custom HTML or CSS, you must ensure the path is correct. Here’s how to verify and fix it, especially if it’s in the Additional CSS block:

• Log in to your WordPress dashboard. Go to Appearance ⟶ Customize.

• Select the Additional CSS block or Custom CSS menu.

• In the code editor, locate the line of code where the photo was added and highlight the image path.

• Right-click and select “Go to path-to-file”. If the image is unavailable, you will see a 404 Not Found error.

• Re-upload the image to your website: Navigate to Media ⟶ Add New. Click “Select Files” and select the image file. Once the upload is complete, click “Copy URL to Clipboard.”

• Navigate back to the customizer page and replace the broken image link with the new URL you copied. Click “Publish” to save your changes.

Broken image files added through custom HTML or CSS are especially common, so always make sure the file exists in the correct uploads folder.

Do Not Miss: WordPress Maintenance Tasks

Cross-check the Filenames

A common cause of broken images and loading problems is mismatched filenames. You must check the spelling of the image file in your code to ensure it matches exactly the one in the media library and fix broken images in WordPress.

Let’s see how we can fix this issue:

• Log in to your WordPress dashboard.
• Go to Media ⟶ Library.
• Use the search box to find the image you want to compare.
• Hover over the image and select “View.”
• Check the address bar for the image path. The highlighted part is the image’s filename.

Now, move over to the post with the broken image:

• Open the page in your browser.
• Right-click on the broken image and select “Open image in new tab.”
• Compare the filename in the address bar with the one in the media library.

If there are still discrepancies in the filenames, the image may not display, resulting in a 404 Not Found error.

This is often the case with a JPEG file that was manually renamed without updating the file reference in WordPress.

• Edit the post with the broken image.
• Replace the incorrect filename with the correct one from the media library
• Update the post to save your changes.

If the image still does not display, upload the image again and add it to your post. Make sure to update the post to save these changes. This should resolve the issue, and the image should now be displayed correctly.

Learn: How to fix a slow WordPress backend

Incorrect File Extensions

It’s important to double-check the file extensions for your images. Even if the filename is correct, an incorrect file extension can cause problems.

Always check whether your JPEG file uses “.jpeg” or “.jpg,” because mismatched extensions can stop the browser from loading the image.

For example, you might upload an image .jpg file, but the code references it as a .png. This mismatch will prevent the image from loading.

Another common issue is with the “jpg” and “jpeg” extensions. Although these image formats are the same, using one instead of the other can lead to a broken image error.

Make sure the file extension in your code matches exactly with the one in your media library to avoid any issues.

Use a Relative File Path

Using a relative file path links to a file based on its location relative to the homepage URL. In WordPress, a relative path omits the domain name and only uses the path after the domain.

For example, in the “src” attribute, instead of using

“https://example.com/wp-content/uploads/image.png, “you can use “/wp-content/uploads/image.png.”

This shorter link will still work fine for your images.

One benefit of using a relative path is that your images will continue to work even if you change your domain name, as long as the files remain hosted on the same server. This approach provides flexibility and ensures your images remain accessible across domain changes.

Suggested Read: How to Move a WordPress Site to a New Domain

Verify if the Image Exists

Sometimes you might link to an image hosted on another website. If that site goes down or relocates to a different server, your images will no longer be available.

Additionally, linking directly to another site increases server usage on the site hosting the image. If the host website disables hotlinking, your image will not display.

• To avoid these issues, it is best to upload every image to your website before adding it to a page.

• Also, avoid using images from third-party websites unless you have permission to do so. This ensures your images are always available and reduces the risk of broken links.

While not common, transfer issues can occur. Sometimes, your server becomes overwhelmed and cannot load all page assets quickly enough before the request times out. This issue is more frequent with cheaper web servers.

Consider upgrading your server’s capacity or migrating to a more reliable web host to resolve this. Additionally, enabling lazy loading for your images can help.

When lazy loading is enabled, your server loads images only as the user scrolls to that section. This reduces server load and speeds up your website.

Common Causes of Broken Images in WordPress

Let’s look at some of the most common reasons why image URLs fail to load and how you can troubleshoot them.

• Incorrect Image URLs: One of the most common causes of broken images is incorrect or outdated image URLs. This often happens after migrating your site or changing the domain. If the URL structure of your site has changed but the image links weren’t set correctly, you’ll end up with missing images.

• File Permissions Issues: If your image files don’t have the right file permissions, browsers won’t be able to access them. This can result in broken thumbnails or product images not loading. Make sure your images are readable by the server; usually, a permission of 644 is configured correctly for image files.

Sometimes your server may block access to image files when permissions are too strict, resulting in broken thumbnails across your site.

• Media Settings Misconfigured: Sometimes, the issue lies in your media settings under WordPress settings. If your upload folder path is wrong or does not match your site’s structure, images won’t appear where they should.

• Problems with the .htaccess File: The .htaccess file controls many aspects of how your site behaves. A mistake here, like a misconfigured redirect or blocked access rules, can break image loading. Always make a backup before editing this file and double-check any changes.

• CDN Settings Not Set Correctly: Using a Content Delivery Network (CDN)? That’s great for speed, but only if your CDN settings are configured correctly. If they’re pointing to old or incorrect paths, or if the cached versions are outdated, images may not appear.

Cached versions of a JPEG file stored in your CDN can also cause display issues until the cache is fully purged.

Read: Best WordPress Speed Optimization Services

Wrap Up

Keeping your website free of broken images is important for maintaining a good reputation, engaging users, and boosting your search engine rankings. As explained above, there are various ways to detect and fix broken images in WordPress.

If you prefer to fix broken images in WordPress yourself, start by identifying the cause. It could be a damaged or incorrect file path. Once you know the cause, you can fix it by restoring, replacing, or deleting the image.

Keeping your website free of broken images not only improves user experience but also helps your search engine rankings. Even a single corrupted JPEG file can disrupt a page layout, slow loading, or create broken placeholders that affect user trust.

FAQs About Fixing Broken Images in WordPress