How to show blurry images first and then progressively show clear image

InterlacedNormal
We have a slow net connection and when we browse our site we can see that the images are loaded line by line from top to bottom. We can change this behaviour by saving the image as Progressive (jpeg) or Interlaced (gif). We can achieve this using GIMP or there are lot of free image editing softwares out there.
The Interlaced image will have a bit more size than normal image, but the user will have a better experience.
Try loading the two images in different window and see the difference.
The Interlaced image will first load the whole image, but the image will be blurred. This will get sharper and finally the clearer image will be displayed.
In case of normal image, the section of image loaded will be sharp, but the whole image will not be loaded at once.

Comments

Post a Comment

Popular posts from this blog

Hide notification content in Android lock screen for Messages, email, whatsapp and selected apps.

Image
 Notification in lock screen is helpful to get an idea about the content. But for sensitive information like OTP it will be disastrous.  The feature to selectively hide content in the notification is available in Android. This example is based on Android v.13 and Samsung One UI v.5.0 Follow the steps to selectively disable notification content in the lock screen.
Continue Reading by clicking here >>

Array functions in JavaScript

Here are some of the functions useful for array operations Push() - Appends one or more elements to the end of an array var data = [ "A" ]; data.push( "B" ); data.push( "C" ); Result data = ["A","B","C"] Pop() - Pops out (removes) one element from the end of an array var data = ["A","B","C"]; data.pop(); Result data = ["A","B"]; Unshift() - Adds one or more elements to the beginning of an array var data = [ "A" ]; data.unshift( "B","X" ); data.unshift( "C" ); Result data = ["C","B","X","A"] Shift() - Removes one element from the beginning of an array var data = ["A","B","C"]; data.shift(); Result data = ["B","C"]; Splice() - Removes elements specified number of items from the starting index and also op
Continue Reading by clicking here >>