In the excellent performance article Front-end performance for web designers and front-end developers, Harry Roberts touches on image prefetching. He also mentions it may or may not work; citing the two opposing articles.
Out of curiosity, I threw together a quick test to see if I could prefetch an image using the following method:
<link rel="prefetch" href="image-name.jpg">
It’s typically a bad practice to specify
:hover without a sprite. However, in this case it’s perfect for testing whether an image was prefetch’d or not.
At the time of this writing, using the prefetch technique above, the image was not pre-loaded in
Firefox 18.0, Chrome 24.0 or Internet Explorer 10.0.
Update: Firefox is the only browser I tested which did pre-load the image. I believe I was hovering the boxes too close to page load on my initial test. After seeing the waterfall posted below I tried again, clearing cache in all the browsers, loading the page and waiting a bit longer before hovering. Regardless, this method probably isn’t ready for the masses until there is better browser support.