javascript 34 lines · 7 steps

Compressing images in the browser with canvas

A client-side helper that downscales and re-encodes an image file, returning a smaller File — or the original if it can't beat it.

Explained by highlit

Intermediate canvas image-processing promises browser-api compression

1export async function compressImage(file, { maxWidth = 1600, maxHeight = 1600, quality = 0.8, mimeType = 'image/jpeg' } = {}) {
const bitmap = await createImageBitmap(file);
3 
let { width, height } = bitmap;
const ratio = Math.min(maxWidth / width, maxHeight / height, 1);
width = Math.round(width * ratio);
height = Math.round(height * ratio);
8 
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
12 
const ctx = canvas.getContext('2d');
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(bitmap, 0, 0, width, height);
bitmap.close();
17 
const blob = await new Promise((resolve, reject) => {
  canvas.toBlob(
    (result) => (result ? resolve(result) : reject(new Error('Canvas is empty'))),
    mimeType,
    quality,
  );
});
25 
if (blob.size >= file.size) {
  return file;
}
29 
const extension = mimeType === 'image/webp' ? 'webp' : 'jpg';
const name = file.name.replace(/\.[^.]+$/, '') + '.' + extension;
32 
return new File([blob], name, { type: mimeType, lastModified: Date.now() });
34}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1createImageBitmap plus a canvas lets you resize and re-encode images entirely on the client, no server round-trip.
2Wrapping the callback-based toBlob in a Promise makes the async encoding step await-friendly.
3Guarding against a larger output means compression never makes a file worse than the original.

Related explainers

javascript

const express = require('express');
const multer = require('multer');
const path = require('path');
const crypto = require('crypto');

Safe image uploads with Multer in Express

file-upload multer validation

Intermediate 7 steps

javascript

const express = require('express');
const jwt = require('jsonwebtoken');
const crypto = require('crypto');

Refresh token rotation in Express

jwt token-rotation authentication

Advanced 9 steps

javascript

class StarRating {
  constructor(container, { max = 5, value = 0, onChange } = {}) {
    this.container = container;
    this.max = max;

Building an accessible star-rating widget

dom event-handling accessibility

Intermediate 7 steps

javascript

const form = document.querySelector('#signup-form');
const password = form.querySelector('#password');
const confirm = form.querySelector('#confirm-password');
const submit = form.querySelector('button[type="submit"]');

Live password-match validation in the DOM

form-validation dom-events accessibility

Intermediate 6 steps

javascript

const express = require('express');
const EventEmitter = require('events');
 
const router = express.Router();

Server-Sent Events with Express

server-sent-events streaming event-emitter

Advanced 8 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
export function useCountdown(initialSeconds) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);