How to Deal with Broken Images?
By Amar Balu — A multi-sport champion!
In day to day life, platforms like E-commerce were prone to treat millions of pictures on their website or mobile application. It’s relatively feasible that on occasion, several pictures may break up to live.
When you stretch to redeem those pictures on your applications, we end up noticing broken-up pictures like the one below
This isn’t something that you might need displaying up in your application.
Below are few methods that would help us to recover the broken picture to hold the UX requirements of your application.
Remove the Image from the database, if the image required is not found.
The most common case where we face broken images is that the image does not exist or there is some incorrect URL pointing to the image.
To avoid such type of issues, we need to check the sanity of the images at some periodic intervals.
To check the sanity of the Images, we have to choose a list of images that have been recently added up to the page/Application and try checking the URL for all those images.
If it’s retrieved then those data can be added up to the database else they can be discarded.
One-time attempt in writing the script. Solves the hassle at the basic level.
For a large number of Image files, this process seems to be a bit lengthy and impossible as it can waste the network bandwidth as well.
When the Required image is not found, then send a default image.
An alternate way to handle this error is to check the Error message that is thrown when there is a failure in loading the image.
The details of the HTML error can be retrieved using the onerror event which is used in the <img> tag.
<img src="https://url-of-non-existent-image.jpg" onerror="this.onerror=null;this.src='https://url-of-existing-image" />
The solutions are given in the onerror event is as follows. This will also be not applicable for Background Image loading.
If the given Image is not loaded or failed to load, then there is an option in the onerror event handler to load a different image. This method can be used in mobile applications too.
this.src method shares the default image, that will override the broken image applied to the image element.
In CaratLane, we are using this technique to track and catch failures (Image breaks).Business team will be addressed with the failures (Image breaks) regularly.
By doing so, we can reduce the cyclic check for errors as the error is been handled in real-time
Although the error can be handled in real-time, it can occur for the lower or older version of browsers as these are not updated with the latest new code.
This will not be applicable for Image loading in background.
If the Required image is not found, then the error message should not be sent by the server.
When checking for the image, the image server gets the info about the availability of the image.
If the image does not exist, then instead of sending the Error code as 404-Not found the Image server must try to replace the error image with a Default image and send the appropriate success code as status and default image as a response.
By doing so, we can reduce the cyclic check for errors as the error is been handled in real-time. Can be applied to all applications and versions without any issue.
Need to set up an Image server to handle this switching process.
With simple image delivery server setups like CDN + S3 storage, this cannot be achieved.
For broken or Non-Existent Images, Default images will be used, in that case, those default images should not be cached or stored.
If cached then the duration of storage for the cached images should be considered small like a few hours.
This helps us to fix broken or non-existent images and make them available for life. Only then, the user may get the opportunity to view the actual image rather than the default image.
If the time taken to fix the images is long then the cache duration can also be set a bit longer.
Instead of using an Image server for handling the broken or non-existent images, we can handle them in the application itself by sending the error code as 404 for the onerror handler.
For handling the default image with the broken image from the server, the status code must be set as 302- Temporarily removed. This helps us to prevent caching of the images in the intermediate layers like the Content Delivery Network(CDN).
For Caching the images in the Cache Handler the Status code is set as 200 OK.
Images are a crucial part of an Application or a website, so it is necessary to ensure that the UX of the images is not broken at any time due to any type of data issues is very important.
I wish the above strategies will assist in making sure a higher revel of your customers, throughout their journey in your website or application.
We at CaratLane are solving some of the most intriguing challenges to make our mark in the relatively uncharted omnichannel jewellery industry. If you are interested in tackling such obstacles, feel free to drop your updated resume/CV to firstname.lastname@example.org!