Missing images on a website are one of the most common issues that web developers face. Particularly if you don't really have a well thought out and robust image management solution just yet. You might be storing files locally on your server and you might even have one giant folder for your uploads, meaning that eventually issues are going to arise, such as naming conflicts, files being overwritten and in performance issues.
By default, most browsers will generally show a small icon informing the user that the image is no longer available if it can't load the resource. And if you've set the alt property (as you should), then hovering over that icon will show the user what the image was suppose to be.
And some browsers will show the alt text in lieu of showing a broken icon image.
So that's where we'll start off.
4. Use 'alt' attributes
The alt attribute on an image is surprisingly useful in many ways. It's there as a placeholder "alternate" text just in case the browser can't seem to find the image, in which case it will display this alternate text instead.
<img src='house.png' alt='older style townhouse' />
But it's also used by screen readers to help visually impaired users understand what the page is rendering. As users tab through the various elements of the page, a screen reader will dictate the alternative text on each image. Meaning that you should pretty much always include an alt attribute in your images for better usability and accessibility.
And if you want to see what else the alt attribute can do, feel free to check out my article here where I go over it in detail.
Having it be a default placeholder text on the page is really more of a side-effect than anything else, because ideally you should not have broken images on your website. That's really where the trouble begins, because if you have one missing image file, odds are you will have others.
3. Update your content
This is by far the biggest reason why 404 images even occur to begin with. Often times, programmers have to make changes to naming conventions when it comes to uploaded files. And not always is this a safe backwards compatible method of doing things.
If you all of a sudden start to add prefixes or suffixes to your file names in order to better categories them for display purposes, then there is a good chance that older files not following this convention will suffer because of it.
The only solution here is to update your content to the latest conventions as often as possible. If you are storing file names directly in your database, then this could mean writing scripts to ping each image to ensure that they are still valid. And if they aren't valid, then updating the images accordingly.
If you are going to be storing your image files directly yourself in your own server with their own custom folder structure, then you are also going to need to build out custom ways of managing these files.
At the very least, running a ping script several times per months to find any missing files will help you determine if you have an issue or not.
2. Use the onerror event
There is a relatively unused event handler in the latest HTML specification called the onerror handler. And it is intended to trigger whenever an element provides an error response.
The onerror event looks something like the following:
<img src="imagefound.gif" onerror="this.onerror=null;this.src='imagenotfound.gif';" />
The onerror handler will execute some bit of JavaScript whenever there is an error loading an image file.
In the snippet of code above, if there is an error in loading the resource, then we can clear out the onerror handler and replace the src attribute of the broken image with another default image.
1. Using an image host provider
The most foolproof way of handling 404 status images on your websites is to host your images on a platform that does the checking for you and then defaults to an alternative image.
There are a few that can do the pre-processing for you, such as ImageKit (not sponsored). I've been using ImageKit for several months now to host my companies images and so far we've had zero broken images appear on the site, where as prior to using ImageKit, we constantly faced the issue.
From a design perspective, this is definitely the way to go as it will keep your websites looking functional year round.
Though, I will say this, it still does not address the issue at the source of everything. And that's the fact that you have missing images period.
Conclusion
Image management on websites is a hard problem to solve. At least to me it is, and I've been a professional web developer for 15 years.
The tips mentioned here will help your website look decent and will make them more functional in general. But eventually, you will need to dive in and take a look at just how many images aren't loading and you will need to address those.
Walter Guevara is a Computer Scientist, software engineer, startup founder and previous mentor for a coding bootcamp. He has been creating software for the past 20 years.