How to Deal with Broken Images?

 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

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 Cleanup 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.

Pros

One-time attempt in writing the script.Solves the hassle at the basic level.

Cons

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.

Pros

By doing so, we can reduce the cyclic check for errors as the error is been handled in real-time

Cons

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.

Pros

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.

Cons

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.

Comments

Post a Comment

Popular posts from this blog

Why Pointers are Eliminated in Java?

Image
 This is rare question but it is good to get prepared with such type of Questions as it may be asked in Beginner level. The first motivation is to make Java programming less complicated. Java is an easy-to-learn, object-oriented programming language. As is well known, the pointer idea is very confusing, challenging to understand (especially for beginners), and leads to coding errors.  The pointers concept was eliminated by the designers of Java in order to make it less complicated and more straightforward. Memory can be allocated and deallocated via pointers. Although this is a useful aspect of pointers, manually managing memory can occasionally be challenging for programmers. Pointers are not required because Java has an automatic garbage collection mechanism, which simplifies memory management. One of the major problems in the field of programming is security. Direct access to a memory address is provided through a pointer. As a result, it is simple to access any memory region and pe
Read more

What is the advancement made in Hashmap in Java 8?

Image
We'll talk about an intriguing update on HashMap performance Improvement Changes in Java 8. Due to a performance issue, the Oracle changed HashMap.  What is HashMap and How it is Implemented? It keeps the key-value pair in storage where it may be retrieved with the use of a key. You must be familiar with how HashMap is Implemented only then we can understand what was the performance issue we had earlier and how that has been overcome by Oracle in Java 8. As its name suggests, HashMap operates on the concept of hashing. Equals() and hashcode() are two of the methods included in the Java Object class. We need to appropriately override these methods in order to get our HashMap to behave as expected. Any problems with these approaches could even invalidate the entire purpose since there is a chance that the results won't be retrieved even if the key-value pair is still there. HashMap use the Basic Implementation of Map Interface. When there is a hash collision, the entry's Link
Read more

Integer.parseInt(“text”)

Image
  What will happen if we execute the program int a = Integer.parseInt(“text”) ? class HelloWorld { public static void main(String[] args) { int a = Integer.parseInt(“text”); System.out.print(a); } } When this program is executed this will throw the following Exception Exception in thread "main" java.lang.NumberFormatException: For input string: "text"at java.base/java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)at java.base/java.lang.Integer.parseInt(Integer.java:652)at java.base/java.lang.Integer.parseInt(Integer.java:770) at HelloWorld.main(HelloWorld.java:7) This is because parseInt() is used to get the primitive data type of the given string. It need to accepts the Integer in the form of String. But here we have given "text" as an Input in place of Integer. So it has thrown Number for Exception. It can be corrected by giving any Integer as an Input. class HelloWorld { public static void main(String
Read more