PNG Resizer
Resize a PNG to an exact width and height, or scale by a percentage. Keep aspect ratio locked or unlock for free-form resize. Transparency is preserved. Runs in your browser.
Why resize a PNG?
The single biggest reason to resize a PNG is page speed. A photograph shot on a modern phone is typically 4,000 pixels across; the spot on your web page that displays it might be only 800 pixels wide. Serving the full-resolution image means downloading roughly 25× more data than needed, which kills Largest Contentful Paint scores and slows the page for every visitor — especially on mobile. Resizing the image down to the actual display size (or 2× that for high-DPI screens) is the cheapest performance fix in web development.
Other practical reasons: you need a 1200×630 PNG for an Open Graph image, a 512×512 icon for an Android app, a 180×180 apple-touch-icon, or a 1280×720 thumbnail for YouTube. Most platforms want exact dimensions, and uploading the wrong size means rejection or ugly auto-cropping. This tool lets you hit the target size precisely.
How this resizer works
The browser draws your PNG onto a hidden <canvas> at the new target dimensions. The canvas uses the browser's built-in bilinear or bicubic resampling (depending on the resampling quality you choose) to interpolate pixels between the source and destination grids. The output is then re-encoded as PNG and offered for download. Transparency comes through cleanly — every pixel keeps its alpha value.
You have two ways to set the new size:
- Exact pixel dimensions — type the width and height. With "Lock aspect ratio" ticked, editing one dimension updates the other automatically so the image doesn't get squashed.
- Percentage scale — drag the slider to scale relative to the original (50% halves both dimensions, 200% doubles them).
Aspect ratio — keep it locked unless you really mean it
Aspect ratio is the relationship between width and height (e.g. 16:9 widescreen, 4:3 standard, 1:1 square). When the lock is on, changing width recalculates height (and vice versa) to keep the same shape, so your image stays proportional. When the lock is off, you can stretch or squash freely — useful for skewing things to fit a specific banner, but it usually looks bad on photographs.
Common target sizes
| Purpose | Recommended size |
|---|---|
| Open Graph / Facebook preview | 1200 × 630 |
| Twitter card (large) | 1200 × 628 |
| LinkedIn share preview | 1200 × 627 |
| Pinterest pin | 1000 × 1500 |
| YouTube thumbnail | 1280 × 720 |
| Instagram square post | 1080 × 1080 |
| Instagram story / reel | 1080 × 1920 |
| Apple touch icon | 180 × 180 |
| Android adaptive icon (foreground) | 432 × 432 |
| Favicon (large) | 512 × 512 |
| Hero image (desktop) | 1920 × 1080 or 2400 × 1200 |
| Card thumbnail (typical CMS) | 800 × 600 |
Resampling quality — what changes between the three options?
- High quality (smoother) — uses the browser's bicubic-style smoothing. Best for photographs and any image being made smaller. Produces clean, soft results with no jagged edges.
- Medium quality (faster) — bilinear or similar. Visually similar to high quality on most images, slightly faster on very large files.
- Low (nearest neighbour) — picks the closest source pixel without interpolation. Looks pixelated when enlarging, but is the only correct choice for pixel art, retro game graphics, or anything where you want crisp pixel edges preserved.
Upscaling vs. downscaling
Downscaling (making the image smaller) almost always looks fine. The browser is averaging multiple source pixels into one output pixel, so detail is preserved gracefully and edges stay clean. This is the resize direction you want for web optimisation.
Upscaling (making the image larger) cannot create detail that wasn't there. Every algorithm — bilinear, bicubic, Lanczos, even AI super-resolution — is guessing. Modest upscaling (up to 2×) often looks acceptable, especially on photographs. Beyond 2× the image starts to look soft or muddy. For dramatic upscales, AI-based tools (Topaz Gigapixel, Real-ESRGAN, Stable Diffusion upscalers) outperform conventional resampling significantly — but they have to be run separately.
Tips and best practice
- For high-DPI screens (Retina, AMOLED phones), serve images at 2× the display size — a 400×400 avatar should be 800×800. The browser scales it down for "1×" displays automatically.
- If your final destination is a photograph on the web, combine resize with conversion: resize first, then run through PNG to WebP or PNG to JPG. The two together can cut file size by 95%.
- Pixel art and chart graphics: always pick Low (nearest neighbour) and use whole-number scale factors (2×, 3×, 4×). Anything else introduces blur.
- When resizing for print, work backwards from DPI: an image meant to print at 4 inches at 300 DPI needs to be 1200 pixels wide.
FAQs
Will transparency be preserved?
Yes — the canvas keeps the alpha channel and the output is a fresh transparent PNG.
How do I avoid stretching?
Keep "Lock aspect ratio" ticked. Editing one dimension will update the other automatically.
Why does the upscaled image look blurry?
Standard resampling can't invent detail that wasn't in the source. For dramatic upscales, use a dedicated AI super-resolution tool.
Does resizing reduce file size?
Usually yes — fewer pixels means less data. The exact reduction depends on image complexity.
Is anything uploaded?
No. Everything happens locally in your browser.
Can I resize multiple PNGs at once?
Not yet — one file at a time.
What's the maximum output size?
20,000 × 20,000 pixels in theory. In practice, browser memory limits how big you can go — most desktops handle 8K (8000×8000) without problems.