How image resizing works in a browser
When you resize an image in this tool, the browser draws the original image to an off-screen HTML Canvas element at the target dimensions using drawImage(). The GPU handles the pixel interpolation — the same way a GPU scales a texture in a video game.
By default, browsers use bilinear interpolation for downscaling: each output pixel is a weighted average of the four nearest input pixels. This produces smooth results for photographs. For pixel art or screenshots with crisp text, bilinear interpolation creates blur because it averages across edges. For those use cases, set imageSmoothingEnabled = false before drawing — the tool uses high-quality smoothing by default since most images are photos, not pixel art.
Downscaling vs upscaling
Downscaling (reducing dimensions) always looks good. You're discarding pixels by averaging — sharpness is preserved as long as you don't downscale more than 50% in a single pass. Browsers handle this internally when the canvas is small relative to the source.
Upscaling (increasing dimensions) always reduces sharpness. You're interpolating pixels that don't exist — the algorithm guesses what colour they should be. The result is a blurry version of the original, not a higher-resolution version. No amount of interpolation can recover detail that wasn't in the source. If you need a larger image, go back to the original high-resolution source.
Platform dimension requirements
Every platform has specific requirements not just for dimensions but for file size and format. Here's a practical summary:
- YouTube thumbnails: 1280×720 px minimum, 1920×1080 px recommended, JPEG or PNG, under 2 MB
- Instagram feed: square (1080×1080), portrait (1080×1350), landscape (1080×566) — all at 72 DPI
- Twitter/X posts: 1200×675 px displayed; the platform centre-crops to 16:9 in feeds
- Open Graph / OG image: 1200×630 px — used when your link is shared on WhatsApp, LinkedIn, Facebook, Slack
- WhatsApp status: 1080×1920 px (9:16) — video-optimised but works for images too
The tool's social presets use the recommended sizes above, not the minimum accepted sizes.
Canvas API vs server-side resizing
Server-side tools (Sharp, ImageMagick, Cloudinary) can apply multi-pass downsampling algorithms (Lanczos, Mitchell) that produce slightly sharper results than single-pass bilinear. For most web images, the difference is invisible. The advantage of client-side Canvas API processing is privacy: your image never leaves your device, there's no upload time, and there's no rate limit or file size cap beyond your device's RAM.