Question

I am designing a simple web page which contains several images.

But when I am opening that webpage in my browser, minimizing the browser and then reopening it after few minutes, the image disappears for few milliseconds

It doesn’t occurs in popular website like Facebook or Google but the same problem persists in some less famous websites.
I am not able to figure out what’s actually happening..

Answer 1

Usually caused by very huge images resized using HTML/CSS. Another way to look at it, the images used was not resized to the size it was intended for the display. It takes time for the browser to resize and render them on the page, especially the large ones.

Also, a machine running low on memory will often offload resources to the swap. When windows are not in focus or are minimized, some browsers move resources off the memory and into the swap. As far as I know, Firefox does this and is configurable in the about:config. This allows the browser to save memory for other operations to use.

When the window regains focus, the browser picks them up from the swap (which generally is a slow operation), loads them back on the memory and renders them. This on-and-off-the-memory operation will take time thus could be what you are experiencing.

That’s why when using images on the web:

• resize the actual images to the size you need them to be
• optimize images by using compression. JPGs and PNGs are good at this
• Don’t over use images
• spriting, to avoid multiple HTTP requests