Shrinking a photo for a blog post, fitting a product shot into an email, preparing a website banner — resizing is the most common image edit of all, and one of the easiest to get wrong: one careless step and a sharp picture turns soft or stretched. This guide covers what resizing does to pixels, the rules that keep quality intact, and how to do the job in Online PS, a free online photo editor that runs entirely in your browser.
What Resizing Actually Does to Your Pixels
A digital image is a grid of pixels; resizing changes the size of that grid, and what happens next depends on the direction:
Downscaling discards pixels — and that's safe. When a 6000 × 4000 photo becomes 1200 × 800, the editor merges small neighborhoods of pixels into new ones, a process called resampling. The discarded detail is gone for good, but everything that remains is real. Downscaled photos often look better at the same viewing size, because fine noise and slight misfocus disappear with the extra pixels.
Upscaling invents pixels — and that's the honest catch. Making an image bigger means the editor must guess the new in-between pixels by interpolating between neighbors. The result is mathematically smooth but contains no new real detail — no tool can restore texture the camera never captured. A small image enlarged 4× will always look softer than one shot at that size.
The practical takeaway: shrinking is quality-safe, enlarging is a compromise. Plan your workflow around that asymmetry.
The Golden Rules of Resizing
Resize once, from the original. Every resample softens the image slightly, and resizing an already-resized copy stacks that softness. Always start from the full-resolution master.
Keep the aspect ratio locked. Changing width and height independently stretches the picture — the classic squashed-face look.
Never upscale beyond roughly 110–120% if quality matters. A modest bump is usually invisible; past that, softness becomes obvious fast.
Keep a master copy. Save resized versions as new files, never overwriting the original — someday you'll need a different size, and only the master can provide it cleanly.
Step by Step: Resizing in Online PS
The whole job takes under a minute, and because Online PS processes images locally via the Canvas API, your photo never leaves your device.
Open Online PS and choose File → Open…, or simply drag your image onto the canvas.
Choose Image → Image Size… to open the resize dialog.
The dialog shows the original dimensions at the top — confirm you're starting from the full-size file, not an already-shrunk copy.
Make sure Keep aspect ratio is checked (it is by default), then type your target width OR height in pixels. The other field updates automatically.
Click OK. Use View → Actual Pixels (Ctrl+1) to inspect the result at true size.
Optional: after a big downscale, one light pass of Filter → Sharpen restores some edge crispness. Go easy — over-sharpening creates bright halos.
Export with File → Export as PNG (Ctrl+S), Export as JPG, or Export as WebP — how to choose is covered below.
Choosing the Right Target Size
The right size depends on where the image will appear. Some battle-tested widths:
1920 px: full-width hero images and banners.
1200 px: photos inside blog articles and most social posts.
800 px or less: email newsletters (many clients render content around 600 px wide), thumbnails and avatars.
One common confusion: on screen, pixel dimensions are all that matter — DPI is irrelevant. A 1200 × 800 image tagged "72 DPI" renders identically to the same image tagged "300 DPI"; DPI is a print instruction, and changing it adds zero pixels. For crisp results on high-density (retina) screens, export at about twice the display size — a photo shown at 600 px wide can be exported at 1200 px.
Picking the Right Format at Export
Resizing is only half the story; how you save the result matters just as much:
JPG — for photographs. It makes photos much smaller by discarding information the eye barely notices — but the loss happens on every save. Repeatedly re-saving a JPG compounds the damage until edges look muddy. Edit from your master copy and export the JPG once, at the very end.
PNG — for graphics, screenshots and text. PNG is lossless, so sharp edges and lettering stay clean, and it preserves transparency (JPG cannot store transparency at all). The trade-off is bigger files for photographic content.
WebP — for the modern web. Typically smaller than JPG at similar quality, supports transparency like PNG, and works in all current browsers. A great default for website images.
Resizing One Layer Instead of the Whole Image
Image → Image Size… scales the entire document — every layer at once. To resize just one element instead, such as an imported logo or a sticker on a collage, select its layer and choose Layer → Free Transform (Ctrl+T). Drag a corner handle to scale, drag inside the box to reposition, then press Enter to apply or Esc to cancel.
The same physics applies per layer: scaling down is safe, scaling up past the original size softens it — the editor is again inventing pixels. If an imported element looks blurry after enlarging, the honest fix is a higher-resolution source.
Common Pitfalls to Avoid
Stretching with the aspect ratio off. Unchecking the ratio lock to "make it fit" a slot distorts everything. If you need different proportions, crop instead of squeezing.
Expecting tiny images to upscale cleanly. A 300 px avatar will never become a crisp 1920 px banner. Track down a larger original instead.
Resizing the same JPG over and over. Each round trips through resampling plus JPEG compression, and the damage accumulates. Go back to the master every time.
Resizing when you meant to crop. Want tighter framing? That's the crop tool's job — resizing keeps the whole scene and just makes it smaller.
Try It Yourself
Open Online PS, drop in the largest photo you have, and walk through the steps above: downscale to 1200 px wide, sharpen lightly, export as WebP, and compare the file size with the original. Everything runs locally — free, no account, no watermark, and the editor works offline once installed.