Image Resizer — pixels, percent, and social presets

Resizing a photo on the web has been a built-in browser capability since the original HTML5 canvas spec shipped. The tool above wires up the four-step pipeline that every modern browser supports: decode the image into an HTMLImageElement, draw it onto an off-screen canvas at the target dimensions via drawImage(img, x, y, w, h), let the browser's built-in resampler interpolate the new pixels, then encode the canvas back to a file with canvas.toBlob. No part of the file leaves the tab.

The mathematically interesting bit is the planning step: given a source size and a target size, how exactly should the source land on the destination canvas? For uniform scaling (percent and longest side) it is one multiplication: every axis scales by the same factor and the canvas size matches the result. For fixed-size targets (presets and pixel inputs) there are three valid strategies:

1. Fit (letterbox) — pick the smaller of (target_width / source_width) and (target_height / source_height) as the uniform scale. The whole image fits inside the target with symmetric padding on the short axis. Nothing is cropped.
2. Fill (crop) — pick the larger of the two ratios. The image now covers the target on both axes; whatever runs past the canvas on the long axis is cropped. Useful for fixed-frame uses like Facebook covers.
3. Stretch — set drawWidth = target_width and drawHeight = target_height with no aspect preservation. Distorts the image when ratios disagree; only useful when matching a layout is more important than preserving the picture.

The page surfaces a second, independent formula for the fit case that solves the same problem from the aspect-ratio side:

src_aspect = source_width / source_height
dst_aspect = target_width / target_height
if src_aspect >= dst_aspect:
    draw_width  = target_width
    draw_height = round(target_width / src_aspect)
else:
    draw_height = target_height
    draw_width  = round(target_height * src_aspect)

Both formulas produce the same integer width and height to within 1 px of rounding slack on every input the tool accepts. The Draw plan panel inside the calculator above shows both numbers side by side so you can verify the agreement on your own image.

Resampling quality is delegated to the browser. The canvas context flag imageSmoothingQuality = "high" selects a bicubic-class filter in current Chromium, WebKit, and Gecko releases. For typical photographic content this is indistinguishable from offline tools that use Lanczos at the resolutions we resize to. For pixel art that needs nearest-neighbour downsampling, do not use this tool — use an editor that exposes the filter directly.

Every preset chip on the tool is sourced from the platform's current help-centre article. Where a platform serves a different size on mobile vs desktop, the chip uses the desktop dimension and the platform crops on mobile in the documented direction. Verified on 2026-05-11.

• MDN — HTMLCanvasElement.toBlob (browser-native encoder)
• MDN — CanvasRenderingContext2D.drawImage (9-arg dest-size resampling)
• MDN — imageSmoothingQuality (bicubic-class resampler)
• Instagram Help Center — Supported aspect ratios and dimensions
• Meta for Business — Facebook page cover photo dimensions
• X Business — Card and header image specifications
• LinkedIn Help — Profile and company banner dimensions
• YouTube Help — Channel art and thumbnail dimensions

Preset dimensions and canvas-API behaviour were last cross-checked against the above sources on 2026-05-11. The page is reviewed twice a year and whenever a platform publicly refreshes its specs.