Image Resizer & Cropper

Digital images are grids of pixels -- a 1920×1080 image has over 2 million individual pixels. Resizing changes the number of pixels in this grid. Downscaling (reducing dimensions) requires merging multiple pixels into fewer ones, a process called decimation or downsampling. Upscaling (increasing dimensions) requires interpolating new pixels from existing ones, a process called interpolation or upsampling. The quality of the result depends heavily on the resampling algorithm used.

The browser's Canvas API uses the browser's built-in image resampling, which is typically bilinear or bicubic interpolation. Bilinear interpolation computes each new pixel as a weighted average of the 4 nearest original pixels. Bicubic interpolation uses a 4×4 neighborhood and produces smoother results, especially for upscaling. The canvas's imageSmoothingQuality property can be set to 'low', 'medium', or 'high' -- our tool uses 'high' for maximum quality. For photographic images, this produces results comparable to dedicated image editing software.

When resizing, it's important to maintain the aspect ratio (the ratio of width to height) to avoid distortion. If you change the width without proportionally changing the height, the image will appear stretched or squished. Our tool locks the aspect ratio by default -- changing one dimension automatically adjusts the other. For non-proportional resizing (e.g., fitting an image into a fixed-size container), you can unlock the aspect ratio, but the result will look distorted.

Resizing, cropping, and compressing are three distinct operations that are often confused. Resizing changes the image's dimensions (pixel count). Cropping removes pixels from the edges to focus on a specific region. Compressing reduces the file size without changing dimensions by applying lossy or lossless compression algorithms. These operations serve different purposes: resize for fitting dimensions, crop for composition, compress for file size.

For web optimization, you typically need all three: crop to the desired aspect ratio, resize to the target dimensions (e.g., 1200×630 for Open Graph images), and compress to reduce file size (target < 200 KB for hero images). A common mistake is resizing without compressing -- a 4000×3000 image resized to 800×600 but saved as PNG can still be several megabytes. Always resize AND compress (using JPEG or WebP format) for web images.