- \n
- It is possible that images are deleted from their original location<\/li>\n
- Over time, images may have been renamed or moved to a different location<\/li>\n
- Images may also become corrupt, which prevents them from displaying correctly on the browser<\/li>\n
- They may undergo changes in permissions<\/a>: for instance, viewing may be restricted to a certain number or category of users<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\t\t<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tMissing images on your #WordPress #website? Here's how to handle them better<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div><\/div>\n<\/div>\n
If any of those things happen, visitors will encounter issues whenever they try to view content that contains a missing image.<\/p>\n
To help mitigate the negative consequences of broken images, I’ll share 4 different ways to better handle missing images on your website.<\/p>\n
What missing images look like in web browsers<\/h2>\n
![\"Handling](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/12\/missing_images_1.png\")
An example of a missing image in Chrome (on the right<\/em>)<\/p><\/div>\n
Although each browser handles things slightly differently, browsers generally show some type of broken image icon.<\/p>\n
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.<\/p>\n
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<\/a>.<\/p>\n
Four ways to better handle missing images on your website<\/h2>\n
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.<\/p>\n
To help mitigate the negative consequences of that happening, there are a few different strategies that you can employ, which I’ll cover below.<\/p>\n
1. Use
alt<\/code> andtitle<\/code> attributes in the<img><\/code> tag<\/h3>\nOne 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.<\/p>\n
Image alt text<\/a> has two main functions:<\/p>\n
- \n
- It displays if the image is missing (like the example shown above) or if a user’s browser is set to not display images.<\/li>\n
- If someone is visually impaired and using a screen reader, the screen reader will read the alt text aloud.<\/li>\n<\/ul>\n
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.<\/p>\n
In addition to adding image alt text, you should put relevant text in the
title<\/code> attribute, too. If one hovers over an image, their browser will show the text within thetitle<\/code> attribute in a tooltip. In most cases, both these attributes will have the same textual content.<\/p>\nTo add or edit the title attribute<\/a> and image alt text on WordPress, you can use the Attachment Details<\/strong> sidebar in the WordPress Media Library<\/a>:<\/p>\n
![\"Using](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/image-alt-text-3.png\")
<\/p>\n2. Use the
onerror<\/code> attribute in the<img><\/code> tag<\/h3>\nBeyond 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<\/code> attribute.<\/p>\n<img src=\"original-image.jpg\"\r\n onerror=\"this.onerror=null;this.src='default-image.jpg';\"\r\n>\r\n<\/code><\/pre>\nIn case the original image is inaccessible and throws an error, the code within the
onerror<\/code> attribute changes thesrc<\/code> tag of the image with the location of the default image.<\/p>\nThis method only works for regular images in your content and will not<\/strong> work for background images.<\/p>\n
If you’re using WordPress, you’ll need to manually add the
onerror<\/code> attribute using the code editing functionality of the WordPress editor:<\/p>\n- \n
- Classic editor<\/strong> – use the Text <\/strong>tab.<\/li>\n
- Block editor<\/a> (AKA Gutenberg)<\/strong> – use the drop-down in the top right to access the Code Editor.<\/strong><\/li>\n<\/ul>\n
![\"Add](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/12\/missing-images-1.png\")
<\/p>\nTo use this code, replace
default-image.jpg<\/code> with the link to the actual image that you want to use (e.g. a default placeholder image<\/em>).<\/p>\n3. Use a third-party service<\/h3>\n
Some image optimization services<\/a> have an option to serve a default image in case an image is missing.<\/p>\n
For instance, ImageKit<\/a> has a simple solution for serving default images in case the original image does not exist. This works a lot like the
onerror<\/code> attribute method from above.<\/p>\nWith ImageKit, the
di-<\/code> parameter lets you specify a placeholder image that will be delivered in case the original image is not available.<\/p>\nHowever, unlike the
onerror<\/code> attribute, you’ll add thedi-<\/code> parameter directly to the imagesrc=\"\"<\/code>. Here’s what it looks like:<\/p>\n<!-- Specifying the default image to be displayed in the URL -->\r\n<img src=\"https:\/\/ik.imagekit.io\/demo\/img\/tr:di-default-image.jpg\/original-image.jpg\" \/>\r\n<\/code><\/pre>\nLike the
onerror<\/code> attribute, this will not<\/strong> work for background images, though.<\/p>\nA 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<\/a> serves images through its own content delivery network (CDN)<\/a>, which might be more reliable than your hosting server.<\/p>\n
4. Serve default image through your server for missing images<\/h3>\n
Let us now look at a solution that could potentially replace any image with a default image using your site’s .htaccess file<\/a>.<\/p>\n
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<\/em>).<\/p>\n
This method is a bit more advanced, so we don’t recommend doing this unless you have some technical knowledge.<\/p>\n
Essentially, you need to:<\/p>\n
- \n
- Create a
.htaccess<\/code> file on the root directory of your web server, if it does not exist already.<\/li>\n- Check for image requests, which typically end with the image file extension<\/a> (you may add more extensions if required).<\/li>\n
- Serve a default image if the requested file does not exist.<\/li>\n<\/ul>\n
\u26a0\ufe0f Whenever you edit your site’s htaccess file, you should always make a backup<\/a> first.<\/p>\n
Here’s an example of the code snippet that you’ll need to add to your
.htaccess<\/code> file. Replace\/default-image.jpg<\/code> with the actual URL to the placeholder image that you want to use:<\/p>\nRewriteCond %{REQUEST_FILENAME} !-f\r\nRewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]\r\nRewriteRule .* \/default-image.jpg [L]\r\n<\/code><\/pre>\nIf you’re not sure how to edit your
.htaccess<\/code> file, you can follow the steps in our guide on how to prevent hotlinking of images<\/a>.<\/p>\nFinal thoughts<\/h2>\n
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<\/a> even if they do encounter missing images.<\/p>\n
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.<\/p>\n
Then, you can also consider using the
onerror<\/code> 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.<\/p>\nOr, if you feel comfortable editing your site’s
.htaccess<\/code> 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.<\/p>\nBeyond 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…<\/p>\n
\n\n- \n
- Checking your posts regularly and cleaning up images that do not exist.<\/li>\n
- Checking if you moved any images or group of images to a different location on your server.<\/li>\n
- Using relative paths to images on your server.<\/li>\n
- Checking if the web server has the right permissions to view the image.<\/li>\n<\/ul>\n
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!<\/strong><\/em><\/p>\n<\/div><\/div>\n
- Check for image requests, which typically end with the image file extension<\/a> (you may add more extensions if required).<\/li>\n
- Block editor<\/a> (AKA Gutenberg)<\/strong> – use the drop-down in the top right to access the Code Editor.<\/strong><\/li>\n<\/ul>\n
- Classic editor<\/strong> – use the Text <\/strong>tab.<\/li>\n