You’ve probably seen an image icon on your website that looks like a torn picture. That is a broken image and it can negatively affect your website if you do not replace it.
Images are important to most websites. Among other things, they make your page more engaging, convey key information, and improve your search engine ranking.
Therefore, it is important to find and fix broken images on your website as soon as you notice them. In this guide, we will explain what a broken image is, and show you how to fix them on your WordPress site.
- What is a Broken Image?
- Detecting Broken Images on your Website
- How to Fix the Broken Image Issue
What is a Broken Image?
Put simply, a broken image is an image whose source link is unavailable or corrupted. When a user scrolls to a section with a broken image on your site, they will see the broken image icon. It can be due to a misspelled URL, improper file path, or you may be linking to a site that no longer exists.
This is a critical issue as it negatively affects user experience. When users encounter missing images on your site, they tend to leave your site for a competitor.
As a result, bounce rates will increase on your website. So to prevent this from happening, always scan your site for broken images and fix them. Let’s see how to do that in the next section.
Detecting Broken Images on your Website
The easiest way to detect broken images on your WordPress website is using a plugin. One of such plugins is the Broken Link Checker. With this plugin, you can scan your site’s internal and external links for any broken links and images.
After installing and activating the plugin, you can access the plugin’s settings page via Settings >> Link Checker.
The Broken Link Checker plugin scans your website for broken links. If there are any issues, you will see them from here or get notified by email.
The plugin also provides you with the option to prevent search engines from following the broken links. You can enable this option so the broken image doesn’t affect your SEO rankings.
Fixing Broken Images
There are several scenarios that may lead to missing images on your WordPress website. In this section, we will be discussing the reasons and how to fix them.
Incorrect File Path
When adding images to your website, WordPress creates a file path that specifies the images’ location. Web browsers use the path in the image src attribute to locate the image. If the path to the image is incorrect, the image will not load and will not be displayed.
To fix this, simply locate the post or page with the broken image icon and replace it with a new image. For this, log in to your dashboard and navigate to your WordPress post page. Then hover over the post with the broken image and select Edit.
On the post editor, scroll to the section with the broken image, then click on it and select Replace. You can choose an image from your media library or upload a new image.
After replacing the broken image, click on Update to save your changes.
If you are using the classic editor, click on the image and then select the Pen icon to edit the broken image.
Here, click on the Replace button and then choose an image from your media library. Finally, click on Update to replace the image.
Replacing Custom HTML Images
If you added the image using custom HTML or CSS, you need to verify that the path is correct. To verify this, you need to check the location where you added the image. It could be on the Additional CSS block. If this is the case, then follow the steps below.
Side note: Replacing images in your template can be technical. If you are new to WordPress, you can have our experts help you fix your template issues.
First, log in to your WordPress dashboard and then go to Appearance >> Customize.
After that, select the Additional CSS block or Custom CSS menu.
On the code editor, locate the line of code where the image was added and highlight the path to the image. Next, right click and then select Go to path-to-file…
If the image is not available, you will get a 404 not found error. You can simply re-upload the image to your website and then copy and paste the link to the file here.
To upload the image, go to Media >> Add New. After that, click on Select Files and then choose the image file. Once the upload completes, click on the Copy URL to Clipboard button.
Now go back to the customizer page and replace the broken image link with the one you just uploaded. Finally, click on Publish to save your changes.
Cross-check the Filenames
This is a common cause of image loading problems. Ensure the spelling of the image is the same as the one in the media library. The mistake can also be as little as a different special character. Typing an underscore (_) instead of a dash (-) can result in a broken image.
To fix this issue, you need to compare the filename on the post or page to the original image on the media library. For this, login to your WordPress dashboard and then go to Media >> Library.
Now, use the search box to find the image you want to compare. After that, hover over the image and then select View.
On the address bar, you will see the path to the image. The highlighted part is the name of the image as seen below.
Now head over to the post with the broken image and verify the file name as well. For this, open the page on your browser, then right click on the broken image and select Open image in new tab.
If there are discrepancies between both file names, it could be the cause of the image not showing. You will end up seeing a 404 not found error.
To fix this issue, you need to edit the post with the broken image and replace the wrong file name with the one on the media library.
After correcting the file names, you should see the image displayed on the post editor. If not, you can re-upload the image and add it to your post. Ensure you update the post to save your changes.
Incorrect File Extensions
You should also check the file extensions. Sometimes, the file name could be spelled correctly, but the file extension may be incorrect. For instance, you can have an image uploaded as a .jpg file, but in the code, it is a .png extension. This can cause problems.
Another common issue occurs with the “jpg” and “jpeg” image extension. Although both formats are the same, you may run into a broken image error if you interchange one for the other.
Use a Relative File Path
A relative path links to a file in relation to the homepage URL. In WordPress, a relative path takes out the domain name, and only uses the path after the domain.
So in the “src” attribute, instead of “https://example.com/wp-content/uploads/image.png”, the source becomes “/wp-content/uploads/image.png”. And your images will work fine with the short link.
One of the benefits of using a relative path is that your images will work even if you change your domain name. That would be the case as long as the files are still hosted on the same server.
You can use a plugin such as the Make Paths Relative plugin to force WordPress to use relative paths for your media files. The plugin is easy to install and set up.
After installing and activating the plugin, go to Make Paths Relative >> Settings to open the plugins settings page.
Here, tick the option to enable relative paths for images and then click on Save Changes to register your changes. You will now be able to display images on a page using relative paths.
Ensure the Image Exists
You may have linked to an image hosted on a different website. If that site goes down or relocates to a different server, the images will cease to exist.
In addition, linking directly to another site increases server usage on the site from which you are getting the image. If the host website disables hotlinking, it will prevent your image from showing.
To prevent this from happening, it is best you upload every image to your website before adding them to the page. Also, avoid using images from third-party websites except you have permission to use it.
This is not a common issue, but it does happen. Sometimes, your server becomes overwhelmed and cannot load all page assets fast enough before the request timed out.
It happens mostly with cheap web servers. To resolve this, you need to upgrade your server’s capacity or migrate to a reliable web host.
You can also use a plugin to enable lazy loading for your images. When you enable it, your server will only load images when the user scrolls to the section. This will free up your server resources and also speed up your website. You can learn more about this in our speed optimization guide.
Summary – Fixing Broken Images
It is not uncommon for websites to experience issues with broken or missing images, but it is quite a serious issue that should be handled promptly. If you have an online store, you may lose potential customers if users can’t see product images on your store.
In this guide, we explained some of the causes of broken images as well as tips on how to fix them on WordPress websites.
Fixing broken images is one way to reduce bounce rate on your website. You also need to optimize your images to improve your site’s performance. For a detailed tutorial on this, check our image optimization guide.