It is pretty frustrating to see your website not displaying the pictures properly or responding with errors and “not found” warnings. The good news is that this issue is quite common and easy to fix.
What Does “Broken Images” Mean?
It means that URL contains images (.jpg, .jpeg, .png, .gif, or .webp) that return 4xx or 5xx HTTP status codes. When you click on a broken icon, you will see a 404 error, and the picture cannot be loaded for some reason.
What Triggers This Issue?
Sometimes it happens because the server is temporarily unavailable, or the picture is too heavy and the internet connection is slow.
Other causes that can trigger this problem:
- An image doesn’t exist because it was moved or deleted by mistake. It can also be removed from the server when the website has been relocated.
- A code doesn’t contain a proper name or/and extension of the image.
- There is a bug in a file path in your code. For example, you’ve used a local path expecting the website to find the image on your computer.
- Sometimes it can happen after the CMS renewal.
- An image file is corrupted.
How To Check the Issue
One of the methods is to check each picture manually by right-clicking on it and inspecting an element. The code will show you the path it’s using to access the picture. Or you may copy an address, extract your image’s name, look for it in a file manager, and then compare the actual path to the one your website uses.
The easier way is to detect broken images and links automatically. There are free applications that will do the job for you, such as Broken Link Checker and SEO audit tools. If you’re using WordPress, you may add a plugin with the same name to the administration panel.
You may watch this video to learn more about handling 404 errors in WordPress.
Why Is This Important?
Broken images on your webpages will negatively affect the user experience, while search engines will not be able to index these images in their search results. Moreover, if robots detect a lot of underloaded pictures, they may consider the website abandoned. This will affect conversion, and the site will lose its position in Google search results.
How To Fix the Issue
Replace broken images with those that return 200 HTTP status codes or remove them. Your decision depends on the number of damaged pictures and their value. For example, for some outdated pages, you may simply remove a line code of the corrupted picture, and it will be deleted from the page.
WordPress has an option to replace broken images on its dashboard and a special plugin for this purpose. You can use a default image or a unique one to replace damaged pictures. If the problem occurred after changing the names of images or moving them to an image directory, you need to ensure that your code has been updated according to the changes.
Check out this article to learn when it’s worth fixing the 404 errors and how to do it.