How to resize and compress an image
- Choose a JPG or PNG. The width and height fields fill in with the original dimensions.
- Type the new Width (px), then work out and type the matching Height (px) with the formula below. If you clear a field, the tool uses the original value for it.
- Choose a Format: WebP (default, smallest for web) or JPEG (widest compatibility).
- Set Quality (30–100%). The preview and the size readout update on every change.
- Click Download image. The file is named with its new size, for example
banner-1200x675.webp.
The aspect-ratio formula, worked through
To keep proportions: new height = new width × (original height ÷ original width), rounded to a whole pixel.
Example: a Gurgaon interior-design studio has a 4,000 × 3,000 px phone photo (about 4 MB) for a blog hero that displays 600 CSS pixels wide.
- Target width: on high-density phone screens, export about twice the display width, so 600 × 2 = 1,200 px.
- Ratio: 3,000 ÷ 4,000 = 0.75.
- New height: 1,200 × 0.75 = 900 px.
- Pixel count drops from 12,000,000 to 1,080,000, so the image is about 9% of the original pixel area, before compression is even applied.
| Original | New width | Calculation | New height |
|---|---|---|---|
| 4,000 × 3,000 (4:3) | 1,200 | 1,200 × 3,000 ÷ 4,000 | 900 |
| 6,000 × 4,000 (3:2) | 1,600 | 1,600 × 4,000 ÷ 6,000 | 1,067 |
| 1,920 × 1,080 (16:9) | 1,280 | 1,280 × 1,080 ÷ 1,920 | 720 |
| 3,000 × 4,000 (3:4 portrait) | 800 | 800 × 4,000 ÷ 3,000 | 1,067 |
These are worked calculations. To find the size an image is displayed at on your site, run Lighthouse and check its "Properly size images" audit, as described in web.dev's guide to serving correctly sized images.
Can you resize an image with no quality loss?
Partly. Shrinking removes pixels, but if the result is still at least as large as its display size, viewers will not see a difference. Compression is where visible loss can creep in: both WebP and JPEG exports here are lossy, and the quality slider controls how much. At 85–95% artefacts are rarely visible. Enlarging cannot add detail that was never captured; a 400 px logo stretched to 1,200 px will look soft whatever tool you use. Ask for the original file instead.
So if you need an image resizer with no visible quality loss, use this tool to shrink, not enlarge, export once from the original file, and keep the quality slider at 85% or higher. It does not offer a lossless export; for a pixel-perfect copy, keep the original file.
Common mistakes and how to fix them
- Stretched or squashed images. Changing only the width leaves the original height, which distorts the picture. Always recalculate the height with the formula.
- Black background on transparent PNGs. Exporting a transparent PNG as JPEG fills transparent areas with black in most browsers. Choose WebP, which keeps transparency, or use the PNG to JPG converter, which lets you pick the background colour.
- Resizing to exactly the display width. On high-density phone screens the image looks soft. Export at about 2× the CSS width for key images.
- Huge single-step reductions. Going from 6,000 px to 300 px in one step can make fine patterns and text look jagged. For thumbnails, start from a mid-size version.
- Re-compressing compressed files. Each export of a downloaded JPEG or WebP loses more detail. Always resize from the original.
Practical use cases
- D2C brand: bring 5,000 px studio shots down to 1,600–2,000 px for product pages before uploading to Shopify or WooCommerce.
- Real-estate broker: resize site-visit photos from a phone to 1,280 px wide so a 20-photo listing loads on mobile data.
- Clinic: make doctor profile photos a consistent 800 × 800 for a team page.
- B2B marketer: resize screenshots and charts to the blog's content width before publishing.
For format choice, see the JPG/PNG to WebP converter. Page weight and image sizing are covered in our technical SEO audit checklist, and our website development team builds responsive images in from the start.
Resizing happens in your browser — the image never leaves your device.
Frequently asked questions
How do I resize an image without stretching it?
Keep the aspect ratio by calculating the new height from the new width: new height = new width × original height ÷ original width. For a 4,000 × 3,000 photo resized to 1,200 px wide, that is 1,200 × 3,000 ÷ 4,000 = 900 px. This tool does not lock the ratio, so enter both values yourself.
What size should website images be?
Match the largest size the image is actually displayed at, and about double that for important images on high-density phone screens. A hero shown 600 px wide needs roughly 1,200 px. Lighthouse's "Properly size images" audit lists images that are larger than needed. Avoid uploading full camera originals, which are often 4,000 px or wider.
Should I export as WebP or JPEG?
Choose WebP for images going on your own website: it is usually smaller at similar quality and keeps transparency. Choose JPEG when the destination may not accept WebP, such as some upload portals, email attachments or print vendors. If the source PNG has transparency and you need JPEG, use a converter that lets you set the background colour.
Can I enlarge a small image without losing quality?
No. Enlarging spreads existing pixels over a bigger area, so the result looks soft or blocky, because the missing detail was never captured. This tool simply scales the image. For a sharper large version, get the original high-resolution file or vector logo from whoever created it, or reshoot the photo at a higher resolution.
Why does my resized PNG have a black background?
You exported a transparent PNG as JPEG. JPEG cannot store transparency, and browsers fill those pixels with black when encoding from a canvas. Export as WebP instead, which preserves transparency, or use a PNG to JPG converter that fills transparent areas with a colour you choose, such as white or your page background.