Image Decode times from Chrome Timeline dev tool

Question

I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.

I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.

I'm doing this kind of thing multiple times and unfortunately I'm getting slow down.

Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.

Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?

Thanks for your help.

Answer 1

I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.

Anyway...

It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.

There are two things I have tried and for the most part they have been successful.

1. If you add -webkit-transform : translate3d(0,0,0) to the covering element, you should find most, if not all of the image decodes disappear.

2. If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or indeed try adding it to both elements.

My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.

90% of the time I have found one of the above combinations successful. I hope it helps.

Answer 2

How do you animate the property? I think you may have plenty of alternatives to just animating the height (which is some sort of resize of the container).

Maybe it's less intensive to just 'clip' the background image with another element. I found a thread about it on StackOverflow with some suggestions. If you animate with javascript, unfortunately pseudo elements are no option...

Clip/Crop background-image with CSS