Image loading with image.decode()

Stephan Köpp
Jul 24, 2017 · 3 min read
Image for post
Image for post

The actual support to load an (large) image and add it into the DOM via JavaScript has some negative effects. The decoding of the image can block the main thread and by that cause jank in an app. To improve this behavior the browser developers came up with a new API specification for predecoding images.

The API provide an explicit decode function for an image with a success/failure callback when the image is loaded and decoded. After decoding the image authors could append it to the DOM, without causing a decoding delay.

Image for post
Image for post

Current practice loading an image into an app

When loading an image with JavaScript in the way we actually do, the handler guarantees that trying to use the image is going to work. At this time the image is not decoded. With the first time using the image data we usually get a delay to decoding overhead. So after inserting an image into the DOM a paint event occurs and this causes a synchronous decode of the image in the main thread. As a result the main thread is blocked.

The performance tool shows the delay synchronous image decoding causes. The browser main thread is blocked for more than 800 ms in this example. Of course this example uses a very big image to illustrate the effect. But if you think about a result list with many (normal sized) images and carousels the effect could cause jank also.

Image for post
Image for post
Screenshot DevTools decoding bigImage.jpg

Even when using the Promise API to load the image asynchronously we are still faced with the same effect. We only shift the insertion of the image into the DOM to a callback. So appending the image to the DOM still causes a synchronous decode of the image.

Image for post
Image for post

Using image.decode() function to load images

The usage of the decode function is very simple and supports us with the success/failure callback functionality we know from the Promise API.

In the example the author requests to decode an image element. The decode implies a load, followed by the decode of the image. The call returns a promise, which, when fulfilled, ensures that the image can be appended to the DOM without causing a decoding delay on the next frame.

Image for post
Image for post

Actual implementation status for API:

  • Chrome has ‘Intend to ship’
  • Safari has ‘Public support’
  • Firefox and Edge have ‘No public signal’

Useful Links:

DailyJS

JavaScript news and opinion.

Stephan Köpp

Written by

Software Engineer @Klarna who loves to use the web platform and is convinced of that a CSS and JS balanced application makes the difference.

DailyJS

DailyJS

JavaScript news and opinion.

Stephan Köpp

Written by

Software Engineer @Klarna who loves to use the web platform and is convinced of that a CSS and JS balanced application makes the difference.

DailyJS

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store