Goals:

• Reduce CanvasKit bundle size by 140KB
• Make image decoding non-blocking on Firefox and Safari.

Background

Our current image codecs embedded into CanvasKit do the job, but our approach has a number of issues:

• According to my experiments image codecs add ~140KB to the compressed payload, which is significant.
• In browsers that support the ImageDecoder API these codecs are not used, so all they do is contribute to payload sizes and poor start-up times.
• Not all apps need to render an image on the very first frame, so loading image codecs before the first frame is sub-optimal.
• The codecs execute on the main UI thread, blocking frames, which leads to jank.

Proposal

• Remove image codecs from the main wasm bundle.
• Use ImageDecoder for all decoding needs, if available.
• Use <img> to decode static images in browsers that don't support ImageDecoder. Many, if not most, images are static (i.e. not animated). WebGLRenderingContext.texImage2D supports HTMLImageElement as the source.
• Create a separate wasm bundle for image codecs for cases not covered by the above. Load the bundle on-demand, only when the app actually needs to decode an animated image.

Some hand-optimized applications can go even further and use the raw <img> tag in a platform view for animated images, removing the need for codecs even on browsers that don't have ImageDecoder.