banner image 1 banner image 2

How to Deal with Broken Images?

August 22, 2022
5 mins
blog-img 1
Amar Balu

This article tells you everything you need to know about dealing 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

How to deal with broken images
Source: Google

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.

1. Occasional Clean-up and monitoring

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.

2. Handling using OnError Handler

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.

3. Handling it using Image Server

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.

Image Cache time during Error Cases

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.

Deliberation of Response Codes during error cases

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.

Meet the team!

Amar Balu

Mridula Saravanan

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!
blog-img 2


blog-img 3
5 mins
May 17, 2023
Sharing Data Between Controllers: Best Practices S...

This article will help you to understand the diffe

By Naveen C

blog-img 3
5 mins
March 21, 2023
Understanding Auto Layout and Constraints in Swift...

This article gives you an easy way of understandin

By Ramasamy P