Chevron DownCommand-Line Reference
Chevron DownAPI Reference


An image loader that works under both Node.js (requires and the browser.

File Extension.png, .jpg, .jpeg, .gif, .webp, .bmp, .ico, .svg
File TypeBinary
File FormatJPEG, PNG, ...
Data FormatImageBitmap, Image or "image data"
Supported APIsload, parse
Worker ThreadNo (but may run on separate native thread in browsers)


import ''; // only needed if using under Node
import {ImageLoader} from '';
import {load} from '';

const image = await load(url, ImageLoader, options);

Data Format

The ImageLoader parses binary encoded images (such as JPEG or PNG images) into one of three different in-memory representations:

  • ImageBitmap (type: 'imagebitmap) - Optimized image class on modern browsers.
  • Image (type: 'image) - Works on all browsers, less performant.
  • An "image data object" (type: 'data') - An ImageData like object that can holds the raw bytes to the image and works in both browsers and Node.js


image.typeString'auto'Set to imagebitmap, image or data to explicitly control type of returned image. auto selects the most efficient supported format (imagebitmap on Chrome and Firefix)
image.decodebooleantrueApplies to image type images only, ensures image is fully decoded before loading promise resolves.

ImageBitmap Options

In addition, for imagebitmap type images, it is possible to pass through options to createImageBitmap to control image extraction, via the separate options.imagebitmap object. However, for portability it may be best to avoid relying on these options for now, since some browsers do not support ImageBitmap options (and some browsers do not support ImageBitmaps at all).

imagebitmap.imageOrientationstring'none'image should be flipped vertically. Either 'none' or 'flipY'.
imagebitmap.premultiplyAlphastring'default'Premultiply color channels by the alpha channel. One of 'none', 'premultiply', or 'default'.
imagebitmap.colorSpaceConversionstring'default'Decode using color space conversion. Either 'none' or 'default' default indicates implementation-specific behavior.
imagebitmap.resizeWidthnumber-Output image width.
imagebitmap.resizeHeightnumber-Output image height.
imagebitmap.resizeQualitystring'low'Algorithm to be used for resizing the input to match the output dimensions. One of pixelated, low (default), medium, or high.

Portability note: The exact set of imagebitmap options supported may depend on the browser.


  • While generic, the ImageLoader is designed with WebGL applications in mind, ensuring that loaded image data can be used to create a WebGLTexture both in the browser and in headless gl under Node.js
  • Node.js support requires import before installing this module.