Better Image Caching with CSS

Updated January 30, 2020 • 45 comments

I have written previously on the fine art of preloading images without JavaScript using only CSS. These caching techniques have evolved in terms of effectiveness and accuracy, but may be improved further to allow for greater cross-browser functionality. In this post, I share a “CSS-only” preloading method that works better under a broader set of conditions.

Previous image-preloading techniques target all browsers, devices, and media types. Unfortunately, certain browsers do not load images that are hidden directly (via the <img> element) or indirectly (e.g., via the parent <div> element) using either display:none; or visibility:hidden;. Further problematic is the potential unintentional display of images on pages when presented via specifically designed print stylesheet.

To get around these limitations, we begin by segregating our strategy to target different media types. For example, for web pages featuring both screen and print stylesheets, we treat each separately by writing this:

@media screen {}
@media print {}

Then, to ensure that the images are preloaded in all browsers, we need to avoid the use of either display:none; or visibility:hidden; in the method. Rather than risking non-caching by hiding or preventing the display of images that need preloaded, we ensure their display and position them far outside of the screen. To do this, we enclose all images that need cached within some specifically identified division like so:

<div id="preloader">
	<img src="http://domain.tld/path/images/01.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/02.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/03.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/04.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/05.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/06.png" width="1" height="1" />
	<img src="http://domain.tld/path/images/07.png" width="1" height="1" />
</div>

Then, with that markup in place, we flesh out the previous media directives with the following CSS:

@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}

Here, we have the preloader division positioned far to the lower-left outside of the screen, and then redundantly specify block display on the image elements.

Finally, to prevent the unwanted display of these preloaded images via print media, we simply hide the images via display:none; and visibility:hidden; declarations.

When using this method to preload/cache images, remember to call the preloaded images by using the exact same path used for the original preloaded image. For caching to work, the browser must reference an existing resource via the identical path.

This method is designed to enable the caching of specified images in virtually all visual browsing devices. If you encounter cases where this method does not work, or if you have comments or suggestions for improvement, please share by leaving a comment below. Thanks!

About the Author

Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.

45 responses to “Better Image Caching with CSS”

Christopher 2009/12/07 4:37 am

Brilliant article, very helpful.
Thanks

Jeff Starr 2009/12/28 9:45 am • Post Author

@Greg: That’s a great article – thanks for sharing. I recently posted a follow-up article that includes your method. You can check it out here. Cheers!

Ciprian 2010/01/21 10:46 pm

Thank you for this article, it works great.
Finally Internet Explorer flickering is gone!

Ian 2010/02/10 6:38 am

Hi, thanks for this interesting way to preload images. I’m a bit new to css, and I encountered a problem with setting a negative position to the left and right properties. There is now a horizontal scrollbar that appears because the width is now larger. How do I solve this? thanks for the help

Thierry Koblentz 2010/02/10 7:59 am

To reply to my own comment (#23).
The values should be negative to offset the image, obviously using “100% 100%” would leave the background image in view.

Rachet 2010/04/08 10:39 am

Hello all, I just finished reading the directions for caching images. I thought it might be the solution to my problem until I tried to implement it. I found the directions easy to follow except it seemed to leave out key components. In my opinion it was not a complete solution because it assumed too much from its audience.

I am sure that there were people who could connect the dots, but when one is looking for a solution to a problem then ALL of the steps should be included. You never know who is going to read it and what level they are at with CSS…

Now if someone could complete the instructions that would be great!

Rachet

Jeff Starr 2010/04/10 8:55 pm • Post Author

Hi Rachet,

Thanks for chiming in. I thought it was pretty straightforward. There’s always that question of what level you want to write at, and with this post I was sort of continuing a series of posts that already covers the basics.

If you need help with something specific, just ask. No need to bash the post. I’m more than happy to help my readers.

“Good Smeagol always helps!”

Neil 2010/04/10 9:19 pm

I was not trying to bash your article, its just that your article was just what I was looking for but when I looked closer there were so many details left out that it became frustrating. My point was, if you are going to put a solution out there on the Internet then you don’t know who and what level of person will find your article. If it is written for someone who is just starting out then the people who know more can take what they need. In addition, I was at work and needed to access it quickly and try it out.

I apologize if my earlier post came off as bashing, it was more frustration than anything; I guess a complete solution would have worked better, you have different levels of geekdom reading your work. You definitely have an audience for your work, just want you to speak to all of it is all…

Jeff Starr 2010/04/10 9:46 pm • Post Author

You bring up an interesting point. How much is safe to assume from the reader? Is it safe to assume you know how to create a CSS file? Upload an image? Specify correct path information? Include a stylesheet? This concise little post could easily inflate to ten times its size if I were to assume nothing from the reader.

We all get frustrated from time to time. But rather than projecting our problems onto others, we learn to deal with them ourselves.

Neil 2010/04/11 4:03 pm

Jeff, you have made your point. Thanks. I will get my information from other sources. Good luck with your Blog.

Jeff Starr 2010/04/11 4:53 pm • Post Author

Excellent. I know there are many sites that will be able to help you according to your needs. Kind regards.

Bahrul Ulum 2010/04/30 11:01 am

Hi Jeff, thank you for the article how the image caching. I searched through google and got your blog posts. I was looking for in order to speed up my website, which was analyzed by Firebug. I’m sorry if my english not very good.

Best Regards

Bahrul in Indonesia

Comments are closed for this post. Something to add? Let me know.

Christopher 2009/12/07 4:37 am

Brilliant article, very helpful.
Thanks
Jeff Starr 2009/12/28 9:45 am • Post Author

@Greg: That’s a great article – thanks for sharing. I recently posted a follow-up article that includes your method. You can check it out here. Cheers!
Ciprian 2010/01/21 10:46 pm

Thank you for this article, it works great.
Finally Internet Explorer flickering is gone!
Ian 2010/02/10 6:38 am

Hi, thanks for this interesting way to preload images. I’m a bit new to css, and I encountered a problem with setting a negative position to the left and right properties. There is now a horizontal scrollbar that appears because the width is now larger. How do I solve this? thanks for the help
Thierry Koblentz 2010/02/10 7:59 am

To reply to my own comment (#23).
The values should be negative to offset the image, obviously using “100% 100%” would leave the background image in view.
Rachet 2010/04/08 10:39 am

Hello all, I just finished reading the directions for caching images. I thought it might be the solution to my problem until I tried to implement it. I found the directions easy to follow except it seemed to leave out key components. In my opinion it was not a complete solution because it assumed too much from its audience.

I am sure that there were people who could connect the dots, but when one is looking for a solution to a problem then ALL of the steps should be included. You never know who is going to read it and what level they are at with CSS…

Now if someone could complete the instructions that would be great!

Rachet
Jeff Starr 2010/04/10 8:55 pm • Post Author

Hi Rachet,

Thanks for chiming in. I thought it was pretty straightforward. There’s always that question of what level you want to write at, and with this post I was sort of continuing a series of posts that already covers the basics.

If you need help with something specific, just ask. No need to bash the post. I’m more than happy to help my readers.

“Good Smeagol always helps!”
Neil 2010/04/10 9:19 pm

I was not trying to bash your article, its just that your article was just what I was looking for but when I looked closer there were so many details left out that it became frustrating. My point was, if you are going to put a solution out there on the Internet then you don’t know who and what level of person will find your article. If it is written for someone who is just starting out then the people who know more can take what they need. In addition, I was at work and needed to access it quickly and try it out.

I apologize if my earlier post came off as bashing, it was more frustration than anything; I guess a complete solution would have worked better, you have different levels of geekdom reading your work. You definitely have an audience for your work, just want you to speak to all of it is all…
Jeff Starr 2010/04/10 9:46 pm • Post Author

You bring up an interesting point. How much is safe to assume from the reader? Is it safe to assume you know how to create a CSS file? Upload an image? Specify correct path information? Include a stylesheet? This concise little post could easily inflate to ten times its size if I were to assume nothing from the reader.

We all get frustrated from time to time. But rather than projecting our problems onto others, we learn to deal with them ourselves.
Neil 2010/04/11 4:03 pm

Jeff, you have made your point. Thanks. I will get my information from other sources. Good luck with your Blog.
Jeff Starr 2010/04/11 4:53 pm • Post Author

Excellent. I know there are many sites that will be able to help you according to your needs. Kind regards.
Bahrul Ulum 2010/04/30 11:01 am

Hi Jeff, thank you for the article how the image caching. I searched through google and got your blog posts. I was looking for in order to speed up my website, which was analyzed by Firebug. I’m sorry if my english not very good.

Best Regards

Bahrul in Indonesia

« Previous Comments • 1234 • Newer Comments »