Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image Decoding in Blink

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

For canvas-related usecases, there is a recently shipped API called createImageBitmap that can be used for async decoding. The API is async, but the implementation does not yet fully multi-thread all the work, this is still a work in progress. Currently png and jpeg decoding are done in a background thread.

Chrome on Android has the same behavior as desktop Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.