plastic-image icon indicating copy to clipboard operation
plastic-image copied to clipboard

Implement offthread image rendering.

Open paales opened this issue 7 years ago • 2 comments

Since this library is already pretty awesome and I thought it could use more awesome features: Render Images Off Thread.

Decoding images for use with a canvas is pretty common, whether it’s to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding.

https://developers.google.com/web/updates/2016/03/createimagebitmap-in-chrome-50 https://github.com/GoogleChrome/offthread-image

Decoding an image Offthread will reduce scroll jank when loading the page because the main thread will have to do less.

Example how to implement in a custom element: https://github.com/GoogleChrome/offthread-image/issues/1 https://github.com/robdodson/offthread-image/commit/9e517a0fe6ae68d3bc857c7cc5165d57011ef446

I don't have any benchmarks so I can't say if this will actually improve performance, but it might be worth considering.

paales avatar Jul 03 '17 13:07 paales

Well, that is really cool.

I do want to maintain plastic-image as a superset of iron-image so there is a bit of complexity dovetailing with iron-image's 2 existing ways of displaying the image (img tag and background-image of the containing div) and adding a new way by inserting a canvas into the template. Also, iron-image has a fair amount of state tracking that plastic-image doesn't really have to deal with.

I certainly think it's worth an experimental build.

mlisook avatar Jul 03 '17 23:07 mlisook

@paales In case you missed it ... from the chomium project: Intent to Implement: image async attribute

mlisook avatar Oct 07 '17 01:10 mlisook