js

// Don't do this for large images

ctx.drawImage(img, 0, 0, targetW, targetH);

This works fine for small images. But scaling a 6000×4000 px photo down to 800×600 px in one shot causes:

- Massive memory usage — the full-resolution image is decoded into memory

- Bicubic artifacts — single-step downscaling creates visible moiré patterns

- Browser-dependent quality — each browser's internal algorithm differs

Step-Down Scaling

Halve the dimensions repeatedly until you're close to the target:

function stepDownResize(img, targetW, targetH) {

  let cw = img.naturalWidth;

  let ch = img.naturalHeight;

  let src = img;



  while (cw > targetW * 2 || ch > targetH * 2) {

    cw = Math.floor(cw / 2);

    ch = Math.floor(ch / 2);

    const temp = document.createElement('canvas');

    temp.width = cw;

    temp.height = ch;

    temp.getContext('2d').drawImage(src, 0, 0, cw, ch);

    src = temp;

  }



  const final = document.createElement('canvas');

  final.width = targetW;

  final.height = targetH;

  final.getContext('2d').drawImage(src, 0, 0, targetW, targetH);

  return final;

}

This produces significantly better quality because each half-step preserves more detail. It also uses less peak memory.

Three Resize Modes

A good resizer needs three modes:

function calcDimensions(srcW, srcH, tgtW, tgtH, mode) {

  const srcRatio = srcW / srcH;

  const tgtRatio = tgtW / tgtH;

  let w = tgtW, h = tgtH;

  let offX = 0, offY = 0;



  if (mode === 'fit') {

    if (srcRatio > tgtRatio) {

      h = Math.round(tgtW / srcRatio);

      offY = Math.round((tgtH - h) / 2);

    } else {

      w = Math.round(tgtH * srcRatio);

      offX = Math.round((tgtW - w) / 2);

    }

  } else if (mode === 'fill') {

    if (srcRatio > tgtRatio) {

      w = Math.round(tgtH * srcRatio);

      offX = Math.round((tgtW - w) / 2);

    } else {

      h = Math.round(tgtW / srcRatio);

      offY = Math.round((tgtH - h) / 2);

    }

  }

  // 'stretch' — use tgtW, tgtH directly, no offset



  return { w, h, offX, offY };

}

Fit — scales to fit inside target, adds padding. Fill — scales to fill target, crops excess. Stretch — forces exact dimensions.

Interactive Crop Box

The resizer now includes an optional crop overlay on the source image. When enabled, the crop region is extracted first, then resized to the target dimensions. The crop box uses pointer events with 4 corner handles, arrow key nudge (2 px normal, 10 px with Shift), and edge snap.

Social Media Presets

Instead of remembering platform dimensions:

const presets = [

  { label: 'Instagram Square', w: 1080, h: 1080 },

  { label: 'Instagram Portrait', w: 1080, h: 1350 },

  { label: 'Facebook Post', w: 1200, h: 630 },

  { label: 'YouTube Thumbnail', w: 1280, h: 720 },

  { label: 'LinkedIn Banner', w: 1584, h: 396 },

];

Select a preset, and width/height auto-fill. Apply with one click.

The Tool

The ToolBox Image Resizer (https://toolboximage.com/tools/resizer/) implements all of these techniques — social media presets, aspect ratio lock, three resize modes, crop box, and format selection with quality control. All client-side, zero uploads.

Try it at toolboximage.com/tools/resizer/ (https://toolboximage.com/tools/resizer/)