Preload images with HTML&CSS

07.03.2013 by Ilia Raiskin

In this quick tip we're going to show you how to preload images with simple HTML and CSS. Preloading images is useful when you have background-images that are only shown when you hover over an element. These images are often not preloaded by the browser and therefore you will have to wait for them to load when you hover over an element for the first time. Our simple solution solves the problem.


Of course you have to change the values for src, height, width and alt to the ones you need.

Now that we added the <img> tag, which "preloads" our image, we want to hide it.


That's it. You can leave out visibility:hidden; and opacity:0;. We added it to show you more hiding options than just display:none;.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of