Missing images

If you have a website where you add content frequently, there is a possibility that over time, some of your website’s images will go missing. This post will help you handle missing images to avoid negatively impacting your site’s user experience.

Why might images go missing on your website? There can be several reasons for this:

  • It is possible that images are deleted from their original location
  • Over time, images may have been renamed or moved to a different location
  • Images may also become corrupt, which prevents them from displaying correctly on the browser
  • They may undergo changes in permissions: for instance, viewing may be restricted to a certain number or category of users

If any of those things happen, visitors will encounter issues whenever they try to view content that contains a missing image.

To help mitigate the negative consequences of broken images, I’ll share 4 different ways to better handle missing images on your website.

What missing images look like in web browsers

Handling of missing images on Chrome 70

An example of a missing image in Chrome (on the right)

Although each browser handles things slightly differently, browsers generally show some type of broken image icon.

Beyond just generally looking bad, this broken image can also mess up the layout of your page because the broken image icon is usually smaller than your original image.

If the missing image was the background of an element, the structure of the page should not be altered. However, a missing background image could lead to reduced contrast or visibility of foreground text and other elements, thereby leading to inconvenience for the visitor and hurting your website’s accessibility.

Four ways to better handle missing images on your website

While you probably never intended to include missing images in your website’s content, it will almost certainly happen at some point or another due to the reasons listed above.

To help mitigate the negative consequences of that happening, there are a few different strategies that you can employ, which I’ll cover below.

1. Use alt and title attributes in the <img> tag

One big problem with missing images is that the reader has no idea what the missing image was supposed to communicate, which can lead to problems with comprehension on your site. A simple fix for this is to make use of the image attributes for alt text and title.

Image alt text has two main functions:

  • It displays if the image is missing (like the example shown above) or if a user’s browser is set to not display images.
  • If someone is visually impaired and using a screen reader, the screen reader will read the alt text aloud.

So even if the visitor can’t see your picture, they can still know exactly what it was meant to communicate if you use descriptive alt text.

In addition to adding image alt text, you should put relevant text in the title attribute, too. If one hovers over an image, their browser will show the text within the title attribute in a tooltip. In most cases, both these attributes will have the same textual content.

To add or edit the title attribute and image alt text on WordPress, you can use the Attachment Details sidebar in the WordPress Media Library:

Using the image edit screen to add image alt text

2. Use the onerror attribute in the <img> tag

Beyond adding text, another thing that you might want to do is show a placeholder image in case an image goes missing. To do that, you can use a one-line solution which you can implement in the HTML for your image with the onerror attribute.

<img src="original-image.jpg"
   onerror="this.onerror=null;this.src='default-image.jpg';"
>

In case the original image is inaccessible and throws an error, the code within theonerror attribute changes the src tag of the image with the location of the default image.

This method only works for regular images in your content and will not work for background images.

If you’re using WordPress, you’ll need to manually add the onerror attribute using the code editing functionality of the WordPress editor:

  • Classic editor – use the Text tab.
  • Block editor (AKA Gutenberg) – use the drop-down in the top right to access the Code Editor.

Add onerror attribute

To use this code, replace default-image.jpg with the link to the actual image that you want to use (e.g. a default placeholder image).

3. Use a third-party service

Some image optimization services have an option to serve a default image in case an image is missing.

For instance, ImageKit has a simple solution for serving default images in case the original image does not exist. This works a lot like the onerror attribute method from above.

With ImageKit, the di- parameter lets you specify a placeholder image that will be delivered in case the original image is not available.

However, unlike the onerror attribute, you’ll add the di- parameter directly to the image src="". Here’s what it looks like:

<!-- Specifying the default image to be displayed in the URL -->
<img src="https://ik.imagekit.io/demo/img/tr:di-default-image.jpg/original-image.jpg" />

Like the onerror attribute, this will not work for background images, though.

A third-party service can also help you prevent missing images in the first place by helping you deliver images more reliably. For example, the Optimole WordPress image optimization plugin serves images through its own content delivery network (CDN), which might be more reliable than your hosting server.

4. Serve default image through your server for missing images

Let us now look at a solution that could potentially replace any image with a default image using your site’s .htaccess file.

This method will only work if you host and serve images from your own server (that is, you aren’t using a third-party image optimization service that serves images for you).

This method is a bit more advanced, so we don’t recommend doing this unless you have some technical knowledge.

Essentially, you need to:

  • Create a .htaccess file on the root directory of your web server, if it does not exist already.
  • Check for image requests, which typically end with the image file extension (you may add more extensions if required).
  • Serve a default image if the requested file does not exist.

⚠️ Whenever you edit your site’s htaccess file, you should always make a backup first.

Here’s an example of the code snippet that you’ll need to add to your .htaccess file. Replace /default-image.jpg with the actual URL to the placeholder image that you want to use:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]
RewriteRule .* /default-image.jpg [L]

If you’re not sure how to edit your .htaccess file, you can follow the steps in our guide on how to prevent hotlinking of images.

Final thoughts

Though you never set out to have missing images on your site, they can still happen for a variety of reasons. The four approaches above can help make sure your site’s visitors still have a good experience even if they do encounter missing images.

No matter what, you should always add image alt text and a title. Beyond making sure there’s fallback text, this also makes your site more accessible to visually impaired visitors, which is a good thing by itself.

Then, you can also consider using the onerror attribute to specify a fallback image. Some third-party image optimization services – like ImageKit – also let you specify a fallback image in a similar way.

Or, if you feel comfortable editing your site’s .htaccess file, you can specify a global placeholder image for missing images at the server level. Again, we don’t recommend this method to complete beginners, though.

Beyond these specific methods, you should also follow some best practices to minimize the chances that visitors encounter missing images in the first place. Best practices like…

  • Checking your posts regularly and cleaning up images that do not exist.
  • Checking if you moved any images or group of images to a different location on your server.
  • Using relative paths to images on your server.
  • Checking if the web server has the right permissions to view the image.

Do you have any other questions about how to fix missing images on your website? Let us know in the comments and we’ll try to help!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!