Resizing Images: The Math, the Filters, the Upscaling Trap

Image resizing looks like one of those operations that should be a single function call - take the pixels, make them smaller or bigger - but the actual algorithm choices behind it determine whether your output looks crisp or like a fuzzy mess. I learned this the hard way the first time I tried to upscale a low-resolution screenshot for a presentation slide. The result looked terrible no matter what I did, and at some point I had to accept that the missing detail was missing forever and no software could invent it.

That insight - downscaling is mostly fine, upscaling is fundamentally limited - is the most important thing to internalize about resizing. The rest of this post explains why, what the filter options actually do, what the browser-specific limits are, and when you should reach for a different tool.

The directional asymmetry

Downscaling an image means starting with more pixel information than you need and averaging it down to fewer pixels. The averaging itself is the thing that can go right or wrong. A naive "pick every Nth pixel" approach (point sampling) produces visible aliasing and stair-step edges. A proper averaging filter (bilinear, bicubic, Lanczos) smooths the result by considering multiple source pixels for each output pixel. Browsers do this by default - the canvas drawImage method uses bilinear or bicubic depending on the browser and the image-smoothing-quality hint.

The result of decent downscaling is hard to distinguish from a "native" image at the target size. A 4000x3000 photo downscaled to 1200x900 looks essentially identical to a 1200x900 photo taken with a phone. The detail that gets discarded is mostly invisible to the human eye anyway, because we cannot resolve it at the smaller display size.

Upscaling is the inverse and is much harder. You start with fewer pixels than you need and have to make up the additional pixels somehow. The "naive" approach is to interpolate: for each new pixel, take a weighted average of the nearest source pixels. This produces a blurry result that looks like the original photo viewed through a slightly-out-of-focus lens. There is no information being added; the image is just being smoothly stretched.

This is why upscaling AI tools like Topaz Gigapixel, Upscayl, and Real-ESRGAN look like magic. They use a trained neural network to generate plausible detail at the higher resolution. The output is not a faithful reconstruction of what would have been captured at higher resolution - that information is gone - but a hallucinated approximation that looks much sharper than any interpolation method can produce. The Toolium Image Resize tool does not include AI upscaling, because the models are too large to run in a browser tab and the quality of small open-source models is not where I would want it.

The actual workflow for downscaling

The tool takes a source image, target width, and target height, and produces a resampled output using the canvas API. The flow:

Drop or paste an image. The tool reads the dimensions and shows them.
Enter the target width or height. With the "lock aspect ratio" toggle on (default), the other dimension auto-fills to preserve proportions.
Optionally pick an output format (PNG, JPG, WebP). Default matches the input.
Click Resize. The output downloads.

For most uses - resizing a photo for upload to a social platform, sizing down a screenshot for a blog post, thumbnailing a product photo - this workflow takes under five seconds and produces output indistinguishable from what you would get from any desktop tool.

Common targets and why they matter

The dimensions people most often ask for, with a note about each:

1080x1080 (Instagram post). Square. Crops the long side if your source is not already square. For a non-square source, "fit" mode downscales to fit inside the square; "fill" mode crops to fill the square completely.
1200x630 (LinkedIn, Open Graph cards). The OG card aspect ratio used by most social sharing platforms. If you publish on the web, having all your cover images sized to this aspect ratio means your previews look consistent everywhere.
1920x1080 (YouTube thumbnail, presentation slide, desktop wallpaper). 16:9 HD ratio.
800x600 or 1024x768 (older website use, email attachments). 4:3 ratio, smaller file size for slow connections.
300x300 (avatar, small thumbnail). Square. Anything smaller than 200 pixels gets blurry on retina displays; 300 is a safer minimum.

Browser limits worth knowing

The canvas API has a maximum size limit that varies by browser. In Chrome and Firefox on desktop, the limit is 32,767 pixels per side. On Safari it has historically been 16,384. Mobile browsers have lower limits, sometimes as low as 4,096. The tool clamps the output dimensions at 10,000 pixels per side to stay safely below these limits across browsers.

If you need output larger than 10,000 pixels - which is rare; that is roughly a 13-foot-wide print at 72 DPI or a 3-foot print at 300 DPI - you need a desktop tool. ImageMagick or Photoshop can handle arbitrarily large output.

The format trap

Resizing changes the dimensions but not the format. If you upload a PNG, you get a PNG back at the new dimensions. If you upload a JPG, you get a JPG back. For most uses this is what you want.

The trap is that PNG output of a downscaled photo is much larger than JPG output at equivalent visual quality. If you are resizing a photo for web use, output as JPG or WebP, not PNG. The Image Format Converter handles format changes separately.

The other trap is transparency. PNG supports transparency; JPG does not. If you resize a transparent PNG to a JPG, the transparent areas get filled with white (which is what the tool does, after the black-background bug I fixed last year that I describe on the methodology page).

Where this tool is not the right choice

Batch resizing hundreds of files. The browser is fine for one or a few; for a folder of 200 product photos, use ImageMagick on the command line. The command is mogrify -resize 800x600 *.jpg for a one-liner.
Resizing while changing format. Two steps: resize first, then convert format with the Format Converter. Doing both in one operation is faster but Toolium does not currently combine them.
True upscaling. See above - AI upscalers are the right call here, not a browser-based interpolator.
Print-quality resizing. For files going to a commercial printer at 300 DPI for large format, the browser canvas is not the right tool. Use Photoshop or Affinity Photo.

Resize then compress

For web use, the standard pipeline is resize first, then compress. Resizing alone gives most of the file-size reduction (a 4000-pixel photo at 1200 pixels is roughly 9x smaller because the pixel count scales with area, not linear dimension). Compression on top of that gives another 30 to 60 percent depending on content type. The Image Compressor picks up where this tool leaves off.