Image conversion with the Canvas API

How PNG, JPEG, and WebP transcodes work in the browser — resize, quality, and instant previews.

1 min read #images

What you can do

Convert between PNG, JPEG, and WebP. You can lower quality (for smaller JPEG/WebP files) and optionally shrink the longest side before export.

How it works (simple)

  1. The browser loads your image into an invisible <canvas> element.
  2. If you set a max width, the canvas is scaled down proportionally.
  3. The canvas is encoded to your chosen format (image/png, image/jpeg, or image/webp).
  4. The encoded bytes become a downloadable file.

No server is involved — it is the same technique many image editors use for “Export as…”.

What runs in your browser

PieceRole
Canvas APIDraw the image and read pixels
HTMLCanvasElement.toBlobProduce PNG/JPEG/WebP bytes

Learn more: Canvas API on MDN, toBlob reference.

Tradeoffs and limits

  • Transparency: JPEG does not support transparency; converting a PNG with alpha to JPEG will flatten onto a background.
  • Very large images: Huge dimensions can use a lot of memory; extremely large files may feel slow or fail on low-RAM devices.
  • Quality slider: Only affects JPEG and WebP output.

See also