Improving performance on bitmap images decoding on translating into view

Question

I'm developing an application which involves a slides translating into view as the primary navigation mechanism. The first slide to come in involves several super-imposed PNGs at roughly 2000px squared with transparencies, and there's a notable framerate stutter as the images come into view.

Using Chrome Dev Tools' Timeline feature I've established that while most of the individual Paint tasks take under 5 milliseconds each, the significant outliers are those Paint events whose subtasks include decoding the PNGs, which take between 50 and 100 milliseconds one after the other, seemingly at the moment the images come into view.

Ideally I would like to decode the bitmaps ahead of time, but I can't think of a way of forcing this behaviour without actually rendering them in view. Any ideas?

Answer 1

If the bottleneck is decoding, then pre-render your images to a canvas, and then either draw those pre-rendered canvases to your view canvas or translate them in using CSS.