Image Resizer

Two different operations on the same file. Resize changes the pixel dimensions - turning a 4000x3000 image into 1200x900 for example. Fewer pixels to store, naturally smaller file. Compression keeps the dimensions the same and changes how those pixels are encoded - higher compression discards more detail to shrink the file. You can do either alone, or combine them. For web use, resize first (match the display dimensions), then compress (set quality to 80 or so). Resize fixes 'this image is way bigger than my page needs'; compression fixes 'this image is heavier than it needs to be.'

Toggle the aspect-ratio lock in the resizer before changing any number. Once locked, type a new width and the height auto-updates proportionally, or change height and width follows. The math is straightforward: new_height = original_height x (new_width / original_width). Without the lock, you can stretch a 1920x1080 to 1000x1000 and faces will look squashed. Always lock the ratio unless you're deliberately distorting. If you need an exact target like 1200x630 (a typical Open Graph size) and the source ratio doesn't match, crop first to the right ratio, then resize.

Aim for roughly 2x the display width to handle high-DPI screens cleanly. If the design slot is 600px wide, export at 1200px. Hero banners that span the page might need 2000-2400px for sharpness on retina displays. Anything beyond 2500px wide is usually wasted bandwidth - users can't perceive it. Match dimensions to the actual rendered size, not what the source happens to be. A 6000px camera original on a 600px display is sending ten times the pixels needed. Use srcset and sizes attributes if you want to serve different sizes for different viewports.

Downscaling - making the image smaller - removes detail because there are literally fewer pixels to hold the information. The result usually looks fine because the original had detail you couldn't see at the smaller size anyway. Upscaling - making it bigger - is where quality drops noticeably. The algorithm has to invent pixels that weren't there, and standard interpolation (bilinear, bicubic) just blurs to fill the gaps. A 400px image stretched to 1200px will look soft and mushy. Stay close to native resolution, or use AI upscaling if you really need to enlarge.

Not with regular resize tools. Standard upscaling uses bilinear or bicubic interpolation - it just guesses intermediate pixel values from neighbors, which mathematically means blurring. Going from 300px to 1200px that way produces a soft, smeared result. AI upscalers (ESRGAN, Topaz Gigapixel, Real-ESRGAN, modern phone Photo Enhance) are different - they're trained models that hallucinate plausible detail rather than interpolating. They genuinely produce sharper enlargements, sometimes impressively so. The browser-based resizer here uses traditional interpolation, so for serious upscaling, route those files through an AI tool and bring the result back.

Most browser-based resizers do strip it. The reason is technical: the tool draws your image onto a Canvas element, resizes it there, then exports a fresh image from the canvas. That export only contains pixel data - the EXIF block from the original isn't carried across. Camera info, GPS coordinates, timestamps, lens data - all gone. If you need both a resized image and intact metadata, you'll need a desktop tool like ImageMagick or ExifTool that explicitly copies the EXIF block over after resize. Useful side effect when privacy is the goal: stripping is automatic.

Common targets that work well today: Instagram square 1080x1080, Instagram portrait 1080x1350, Facebook and LinkedIn shared images around 1200x630, X post images 1600x900, YouTube thumbnails 1280x720, WhatsApp status 1080x1920. These are the rendered sizes that look crisp without being oversized. Always check the platform's current spec page before a campaign - they shift dimensions every couple of years. When in doubt, 1200x1200 or 1200x630 covers most general posting needs. Keep important content away from the edges, since some platforms crop differently in feed previews versus the full open view.

Switch the resizer into percentage mode if the tool offers it. Enter 50% and both width and height halve - a 2000x1500 becomes 1000x750. Aspect ratio is automatically preserved because both axes scale by the same factor. 25% quarters the pixel count, 200% doubles it (with the upscale-blur problem mentioned earlier). Percentage is handy when you have a batch of mixed-size sources and want consistent reduction without thinking about exact pixels. If you need a specific output dimension regardless of source, switch to absolute width/height mode and lock the ratio instead.