Why is Chrome so slow when loading many (≈130) png-images?

Question

Im making a page/application that presents a wide range of products. One view contains a lineup of about 130 products, eash represented by a png-image, the size varies from 33Kb to 150Kb.

The lineup can be scrolled horizontally whith the users scrollbar or custom controller, and when you hover each product I use som css-transistions to fade out all products except the one hovered, and to enlarge it.

It works perfectly smooth in Safari and decently Firefox, and in Chrome as long as I keep the image count-down. But the more images i try to add, both the scrolling and the transistions progressively gets slower until it's almost imposible to work with.

Is this some cache.problem in chrome? Is there any way around it?

I've tried to preload the images, but the problem isn't the loading time og the image, its the performance that seems to halt due to the sheer number of images.

Answer 1

You can combine all your little images in one big image, and load ONLY the big image, so you do only ONE HTTP request. For display you must set the offset (background-position property) of every image using css.

Tutorial