Scrollable grid of images - slow?

I have a viewport set up such that its contents are an array of 4x10 DrawableButtons with unique images that are 30x30 pixels in JPG format. The viewport scrolls only vertically, but performance when scrolling is very slow.

I would assume this is because the component in it's entirety is being redrawn over-and-over while scrolling. Is there some way to improve performance in this scenario that I am overlooking?

http://www.juce.com/api/classImageCache.html

I'm not sure a cache would work in this case, as they are all different images which are loaded only once. It's perfomance during scrolling that is mediocre.

You could make one big Image out of the small ones and put transparent buttons over it. So only one image has to be drawn, also setBufferedToImage on your viewedcomponent should help.

This is why we have profiling tools - the first thing everyone should do when you hit a performance problem is to fire up a profiler and measure it!

Drawing images is generally fast, and depends more on the number of pixels rather than the number of images you draw, so using bigger images or caches would probably not help. But the mechanism varies wildly between OSes and rendering engines, and you didn't even say what platform you're running it on.

You might take a look at http://www.juce.com/forum/topic/opengl-fast-viewport

Thanks, I'll check it out.