Image Lab
Shrink it, resize it, or change its format. The image stays on your device while your browser does the work.
Build notesUnder the hood, without the lecture
Image Lab is a file workflow with no upload step. The browser decodes, redraws, encodes, previews, and downloads the image itself.
One canvas, three formats
The chosen dimensions become the Canvas size. High-quality smoothing handles resizing, and toBlob asks the browser to encode WebP, PNG, or JPEG.
JPEG needs a background
PNG and WebP can preserve transparency. JPEG cannot, so the canvas is filled white before drawing to avoid surprising black transparent areas.
Object URLs have a cleanup bill
Local previews use temporary blob URLs. They are revoked when the image changes or the component leaves the page, so repeated edits do not quietly consume memory.
canvas.toBlob(
blob => blob ? resolve(blob) : reject(),
selected.mime,
format === "png" ? undefined : quality / 100
);