4 Ways to Handle Missing Images on a Website ... #Beginner-Friendly

If you have a website where you add content frequently, there is a possibility that over time, some of your websites images will go missing. This post will help you handle missing images to avoid negatively impacting your sites 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 locationOver time, images may have been renamed or moved to a different locationImages may also become corrupt, which prevents them from displaying correctly on the browserThey may undergo changes in permissions: for instance, viewing may be restricted to a certain number of users What missing images look like in web browsersAn 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 imag e 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 websites accessibility.Four ways to better handle missing images on your websiteWhile you probably never intended to include missing images in your websites 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 Ill cover below.1. Use alt  and  title attributes in the img tagOne 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 users 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 cant 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:2. Use the  onerror attribute in the img tagBeyond adding text, another thing that you might want to do is show a pl aceholder 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 youre using WordPress, youll 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.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 serviceSome 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, youll add the  di-  parameter directly to the image  src="". Heres 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 imagesLet us now look at a solution that could potentially replace any image with a default image using your sites .htaccess file.This method will only work if you host and serve images from your own server (that is, you arent using a third-party image optimization service that serves images for you).This method is a bit more advanced, so we dont 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 r equests, 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 sites htaccess file, you should always make a backup first.Heres an example of the code snippet that youll 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 youre not sure how to edit your  .htaccess  file, you can follow the steps in our guide on how to prevent hotlinking of images.Final thoughtsThough 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 sites 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 theres 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 sites  .htaccess file, you can specify a global placeholder image for missing images at the server level. Again, we dont 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 likeChecking 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 well try to help! Missing images on your #WordPress #website? Here's how to handle them better