A small, fast and advanced PNG / APNG encoder and decoder. It is the main PNG engine for Photopea image editor.
- Examples of PNGs minified by UPNG.js
- Try UPNG.js in Photopea - open an image and press File - Save for web, play with the Quality
- UPNG.Photopea.com - a separate minifier app, that uses UPNG.js
- Support us by making a donation.
Download and include the
UPNG.js file in your code, or get it from NPM:
npm install upng-js
UPNG.js supports APNG and the interface expects "frames". Regular PNG is just a single-frame animation (single-item array).
UPNG.encode(imgs, w, h, cnum, [dels])
imgs: array of frames. A frame is an ArrayBuffer containing the pixel data (RGBA, 8 bits per channel)
h: width and height of the image
cnum: number of colors in the result; 0: all colors (lossless PNG)
dels: array of delays for each frame (only when 2 or more frames)
- returns an ArrayBuffer with binary data of a PNG file
Lossy compression is allowed by the last parameter
cnum. Set it to zero for a lossless compression, or write the number of allowed colors in the image. Smaller values produce smaller files. Or just use 0 for lossless / 256 for lossy.
Supports all color types (including Grayscale and Palettes), all channel depths (1, 2, 4, 8, 16), interlaced images etc. Opens PNGs which other libraries can not open (tested with PngSuite).
buffer: ArrayBuffer containing the PNG file
- returns an image object with following properties:
width: the width of the image
height: the height of the image
depth: number of bits per channel
ctype: color type of the file (Truecolor, Grayscale, Palette ...)
frames: additional info about frames (frame delays etc.)
tabs: additional chunks of the PNG file
data: pixel data of the image
PNG files may have a various number of channels and a various color depth. The interpretation of
data depends on the current color type and color depth (see the PNG specification).
img: PNG image object (returned by UPNG.decode())
- returns an array of frames. A frame is ArrayBuffer of the image in RGBA format, 8 bits per channel.
var img = UPNG.decode(buff); // put ArrayBuffer of the PNG file into UPNG.decode var rgba = UPNG.toRGBA8(img); // UPNG.toRGBA8 returns array of frames, size: width * height * 4 bytes.
PNG format uses the Inflate algorithm. Right now, UPNG.js calls Pako.js for the Inflate and Deflate method.