may be surprised that there are images on your site that are damaged or broken (Broken Images), meaning that the images do not appear on the site even though when you uploaded them they were valid and of excellent quality, so what is the secret of this sudden defect!
When you see broken links to images on your website, you may think that there is a glitch or slowness in the loading process that prevents the images from appearing, but in reality there are many reasons behind broken images.
In our article for today, we review the reasons for the problem of broken images and their negative impact on the site, then we discuss how to solve the problem through WordPress plugins or through code.
How does the problem of corrupted images occur?
There are many reasons why images do not appear on your site, such as changes to URLs and extensions, incorrect paths for images, and perhaps changes in the settings of WordPress itself, which causes images to reappear on the site and appear in the form of an icon as follows:
In the following paragraphs we talk about the causes of these problems in more detail and explain how to solve them in several ways:
1- Changes in URLs
If you make changes to the URL address, the image path and code in the HTML code will change. If you do not update the image path, it will still point to the old address. Then the file path will be corrupted and thus the image will appear damaged or broken.
2- The image extensions are incorrect
If the image is uploaded with the JPG extension and is defined in the HTML code with the PNG extension, then the browser will not recognize the image and prevent it from appearing, and it will appear as a broken image, as the extension format affects its appearance, so make sure that the image extensions and formats match the code and the image itself.
3- The image file path is wrong
When the image is displayed, the browser usually follows the path to the file in which the image is located. When the name of the image is changed or moved to a new file or folder, the HTML code for the image will differ, or there may be spelling errors when renaming and moving that lead to errors in the code, so the image does not appear.
4- Changes in WordPress setup
Broken images may be caused by making some modifications to the WordPress dashboard, changing the default values, specifying a different upload path for the file, or making changes to the wp-config.php configuration file and changing the media upload location.
In this case, you can modify the changes and put the default values back in place by accessing the file from within the hosting control panel and having the media stored in its default location, which is wp-content/uploads within the root folder of your site, as follows:
5- Move a page or post to a new location
Changing or moving a page or post to a new location in WordPress will likely cause the system to lose the ability to track the location of images and files on the page. Although modern versions of WordPress can avoid this error, it is one of the possible reasons for the presence of broken images on the site.
Disadvantages of having broken images on the site
1- Search engines hate errors on sites and always strive to show good sites in the first results. The more broken images you have, the more your site will be pushed down the search results rankings, which negatively affects your site’s SEO.
2- Broken links on the site spoil the user’s experience. When the image does not appear in front of the user, he may choose to leave your site or online store without interacting fully or without completing the purchases he intended to make, which reduces your conversion rate and sales.
3- An error in the image link will not help search engines index the image and identify it. If you own a store that sells products, customers will not be able to reach you by searching images in the search engine, because your images will not appear in the first place.
Solve the problem of broken images with custom plugins
There may be many options available to you to solve the problem of broken images, such as replacing the links to these images with other valid links, or perhaps deleting them and uploading new images. This may seem easy, but if you have a large number of broken images, it will be cumbersome and require more time and effort. So, here we have chosen for you a group of add-ons that help you perform this task. Let us list them for you.
Add Replace Broken Images
The Replace Broken Images plugin allows you to replace broken images on the site with others automatically once you install the plugin on WordPress. It also gives you the option to replace images with others of your choice. On the practical side, we will explain this addition in detail, so continue reading with us.
Add PlaceHodor
The PlaceHodor plugin is considered one of the easiest plugins available to fix broken images on your site, as the plugin tries to create a good and appropriate size for the broken images. You can choose to replace broken images with new ones from the extension’s settings page, from the extension’s web page services, or from an external source.
Add Enable Media Replace
The Enable Media Replace add-on enables you to replace any image or file in two ways. The first depends on uploading an image of the same type that you want to replace, and the old names and addresses are preserved.
The second method allows you to replace the image with another while updating the title and link to the new image instead of the old data. The extension also gives you the option to control the format used to display the modification history.
Remediate broken images using the Replace Broken Images plugin
Now we will explain to you in a practical and detailed manner the steps to install and use the Replace Broken Images plugin on your WordPress website.
1- Through your site’s control panel, go to Add-ons > Add New, then type in the search box the name of the add-on Replace Broken Images.
After finding the add-on, install and activate it on the site by clicking on the Install Now button and then clicking on the Activate Add-on button as shown in the following images.
2- Now, once you activate the add-on, all broken images for all posts will be replaced automatically without any intervention from you, with the following default image:
3- Then, if you prefer to replace the broken images with other images of your choice, go to the WordPress control panel and choose the Replace Broken Images plugin.
4- After entering the add-on page from the settings menu, click on the option to upload an image as follows:
5-Then select the image you want to appear as a default replacement image for any damaged image on your site.
With this, you will be able to get rid of all the broken images on your site and replace them with another, more customized image that you easily choose yourself, while you work to solve the problem in the original image that caused the problem.
Note : You should only adopt this solution temporarily and verify the original damaged image by verifying that it has not been deleted from the source, whether this source is the media library or in the path (wp-content\uploads) within your site folders or any other site. On the Internet, then you must ensure that it is included on the site in the correct form and with the same name and extension.
Solve the problem of corrupted images using code
You may have a problem with one or two photos, so you don’t need the add-ons or want to use them. Here we explain to you how to replace broken photos with good ones manually.
Images that the browser cannot find trigger a JavaScript “error” event that we can monitor and respond to. Therefore, a simple Javascript code can be added to the site to solve this problem.
Let’s assume that the alternative image you want to upload is in the following file:
/wp-content/uploads/2018/08/replace.png
This code allows you to add it to the header of your site. As we explained in the following article . This will quickly replace all broken images with default ones.
Of course, you have to change the following part of the code (wp-content/uploads/2021/08/replace.png) and replace it based on the path of the image that you want to use as a replacement for the broken image on your site.
Alternatively, you can write the following code to completely hide the corrupted image:
Another way you can solve the problem with code is by writing the following PHP code in the functions.php file of the template activated on your site.
Read also: What is functions.php file in WordPress and how do you edit it?
With this, we have reached the conclusion of our article in which we explained how to deal with broken images on a WordPress site, and in which we explained to you why this error occurred and how to solve it by easily replacing these images with other valid images or hiding them through plugins or manual code.
We assure you that the step of checking and repairing damaged images on your site is an important step that you should not ignore because of its importance to both site visitors and search engines alike.
