DEV Community

Fahad Farid
Fahad Farid

Posted on

How I shrink images 80% without a server

#javascript #webdev #tutorial #performance

Every image optimizer site asks you to upload your photos first. But your browser can already decode, resize, and re-encode images — so the whole compression pipeline can run in the tab, with the original file never leaving your device.

The pipeline

Three steps, all client-side:

  1. Decode the uploaded file into pixels (createImageBitmap).
  2. Draw it onto a canvas at the target dimensions — this is where resizing happens, and it's the biggest win.
  3. Export with canvas.toBlob() at a chosen quality and format. 
async function compress(file, maxWidth = 1600, quality = 0.8) {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, maxWidth / bitmap.width);
  const canvas = document.createElement('canvas');
  canvas.width = Math.round(bitmap.width * scale);
  canvas.height = Math.round(bitmap.height * scale);
  canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return new Promise(resolve =>
    canvas.toBlob(resolve, 'image/webp', quality)
  );
}
Enter fullscreen mode Exit fullscreen mode

Why it works so well

  • Resizing dominates. A 6000px phone photo displayed at 1200px carries roughly 25x the pixels it needs. Nothing beats deleting pixels you were never going to show.
  • Modern formats. WebP at quality 0.75–0.85 is visually near-identical to the source JPEG for photographs, at a fraction of the size.
  • Metadata goes free. The decode/re-encode round-trip drops EXIF segments automatically — the output is pixels only.

The gotchas

  • Screenshots and flat graphics: lossy compression smears text and sharp edges. Use WebP lossless or PNG for those.
  • Transparency: JPEG has no alpha channel. If the source has transparency, export WebP or PNG instead.
  • Orientation: modern browsers apply EXIF orientation when decoding via createImageBitmap, but verify on Safari before you ship.

No upload means no waiting on a server round-trip either — on a decent laptop this runs in milliseconds per image.

I build ToolVero, 70+ free tools that run entirely in your browser. The same pipeline powers the Image Compressor and Image Resizer — try them on your own photos.

Top comments (0)