Image Resize

Your image is right. The dimensions are wrong. Here's how to fix that.

If you've ever uploaded a photo to a CMS and watched it get auto-scaled weirdly, or discovered that your "hero image" is a 5000px wide DSLR shot that's making your load time embarrassing — that's a dimension problem. Not a quality problem. Not a format problem. Just an image that's the wrong size for where it's going.

This tool resizes images in two ways: by exact width and height (when you know the target size), or by scaling percentage (when you just want something smaller or bigger without doing math). Both run entirely in your browser — no upload, no waiting, no account needed.

Resolution vs. file size — understanding what you're actually changing

People use "resolution" and "file size" interchangeably, but they're different things. Resolution is the pixel count — how many pixels wide and tall the image is. File size is how much storage space the file takes up, measured in kilobytes or megabytes. They're related, but not in a 1:1 way.

A 3000×2000 PNG screenshot with large flat color areas might be 800KB, while a 800×600 PNG of a detailed photograph could be 2MB. The pixel count is radically different, but the file size doesn't follow because PNG compresses flat areas efficiently and struggles with photographic detail. For JPGs, the relationship is more predictable — more pixels generally means a larger file — but the quality setting still has a huge influence.

What this means in practice: resizing will reliably reduce the file size when you're making an image smaller (fewer pixels = less data to store), but if the original file was bloated due to format or compression issues, resizing alone won't fix the underlying problem. Resize first to get the right dimensions, then compress for the right file weight.

When should you resize vs. crop?

They're different operations that solve different problems, and it's worth knowing which one you actually need:

• Resize — scales the entire image to new dimensions. The composition stays exactly the same, everything just gets bigger or smaller proportionally.
• Crop — cuts away parts of the image. You're changing what's visible, not how big everything is.

Rule of thumb: if your image looks good but is just too large, resize it. If the framing is off — too much sky, subject too far to one side, too much background clutter — crop it first, then resize. Most good image workflows do both.

Why the aspect ratio lock is on by default

Stretching an image to fit non-proportional dimensions is one of those things that looks immediately wrong — people end up looking weirdly wide, circles become ovals, product images look distorted. Aspect ratio lock prevents that by automatically adjusting the other dimension when you change one.

There are cases where unlocking it makes sense: non-photographic diagrams, placeholder images, or situations where visual distortion is acceptable by design. But for anything photographic or representing real objects, keep the lock on. The result will look more professional without any extra effort.

Exact dimensions vs. percentage scaling — which to use?

Use exact dimensions when the destination has a specific requirement. Common examples: a CMS image slot that expects 1200×628 for social share previews, a marketplace product image requirement of 800×800, or a banner ad specification at 728×90. When the target size is known, type it in.

Use percentage scaling when you just want the image smaller or larger but don't have a specific target. "Make this 50% smaller" is often all you need when preparing for email, reducing the size before attaching to a document, or doing a rough size reduction before uploading.

The responsive images concept — why one size doesn't fit all

Modern websites don't serve a single image to every visitor. A phone on a 4G connection doesn't need (or want) the same 2400px hero image that a desktop on fibre broadband gets. Responsive image techniques let you serve different sized versions of the same image depending on the visitor's screen size and connection speed.

The practical implication for you: when preparing images for a website, it's worth creating 2–3 sizes of key images. For a hero banner, you might produce a 1920px version for desktop, a 1024px version for tablets, and a 640px version for phones. The srcset attribute in HTML then lets the browser pick the most appropriate one.

You don't need to do this for every image on the page — thumbnails, icons, and small decorative images are fine at a single size. But for the big, high-visibility images that load first and set the visual tone, providing a size-appropriate version for each device class makes a noticeable difference in load time and data usage.

Retina displays — why your images might look fuzzy on modern screens

A "Retina" or high-DPI display packs roughly twice as many pixels into the same physical area as a standard screen. An image that's 800px wide will physically occupy 400 CSS pixels on a Retina display — meaning the browser has to stretch those 800 pixels across twice the pixel density, and the result looks soft.

The fix is straightforward: serve images at 2× the display size for high-DPI screens. If your layout displays an image at 600px wide, providing a 1200px source lets Retina screens render it at full sharpness. The trade-off is file size — a 1200px image is roughly 4× the data of a 600px image — so it's worth balancing sharpness against load time. For hero images and product photos where visual quality matters, the 2× approach is worth it. For thumbnails and small UI elements, the difference is rarely noticeable.

Common mistakes when resizing images

• Uploading a 4000px image and letting the website scale it down visually — the browser renders it small, but the 4MB file still downloads. Always resize before uploading, not after.
• Resizing too aggressively — going from 2000px to 80px on a complex image turns detail into mush. Scale down gradually if you're concerned about quality.
• Resizing instead of cropping — if the composition is off, resizing won't fix it. A slightly tighter crop solves the framing problem; resize is for the size problem.
• Unlocking the aspect ratio accidentally — double check this if your result looks stretched or squished.
• Only resizing the width and hoping the height sorts itself out — if you're not using the aspect ratio lock, you need to calculate or consider both dimensions. Entering just the width with the lock off will give you a height of zero or a distorted result.

The page speed connection

Image file sizes are almost always the heaviest thing on a webpage. A properly resized image at the actual display size can be 5–10x smaller than a full-resolution original served at the same visual size. Google's PageSpeed Insights will almost always flag "properly size images" as an opportunity if your images are bigger than they need to be.

Resizing images before upload isn't glamorous work, but it's one of the highest-impact, lowest-effort changes you can make to improve site performance. Every second you take off load time translates to lower bounce rates and a better user experience, especially on mobile connections.

Standard image dimensions worth knowing

If you work with websites, social platforms, or CMSs regularly, memorising a handful of common dimensions saves a lot of back-and-forth. Here's a practical reference for the slots that come up most often:

• Open Graph / social share preview: 1200×630px — used by Facebook, LinkedIn, and most other platforms when a link is shared
• Twitter/X card: 1200×628px (nearly identical to OG, worth keeping consistent)
• YouTube thumbnail: 1280×720px (16:9)
• Instagram square post: 1080×1080px
• Instagram portrait post: 1080×1350px
• Favicon: 32×32px or 16×16px (resize, then convert to ICO or PNG)
• Email header image: 600px wide, height flexible — 200–400px is a common range
• Shopify product image: 2048×2048px max, but 800×800px works fine for most themes

You don't need to memorize all of these — but having a reference handy when you're preparing assets means you can resize to the right target the first time instead of going back and forth.

What "resize" can't fix — and what to do instead

Resizing handles dimension problems. It doesn't fix everything. Here are a few situations where resizing alone won't get the result you want:

• Image is small and you need it larger: Scaling up adds pixels but doesn't add detail. The image will look soft or pixelated. The only real solution is to get a higher-resolution source or use an AI upscaling tool.
• The composition is wrong: Resizing won't move the subject closer or further. That's a crop problem. Crop first, then resize to the target dimensions.
• The file is large because it's uncompressed, not because of dimensions: A 1200×800 PNG can still be 4MB if it's saved as an uncompressed 24-bit image. In that case, resizing helps a little but compressing is the bigger win. Run it through the Image Compressor after resizing.

The best results usually come from combining tools: crop for framing, resize for dimensions, compress for file weight. Doing all three takes only a few minutes and produces an image that's correctly framed, the right physical size, and as small as it needs to be without looking bad.

When batch resizing actually saves time — and when it doesn't

If you've got 20 product photos that all need to be 800×800, batch resizing is a massive time-saver. Upload them all, set the target dimensions once, and download the set. But batch resizing has a limit: when each image needs individual attention — different crops, different quality targets, different format considerations — processing them one at a time usually produces better results.

The practical middle ground: use batch resizing when the target dimensions are identical and the source images have similar compositions. If you're resizing a mix of landscape and portrait images to a fixed square slot, you'll probably want to crop each one individually first to control what gets included, then batch resize the cropped results.

Frequently Asked Questions