How to resize an image for web, email, and social media

A photo straight from a phone or camera is often several thousand pixels wide and several megabytes in size — far more than a web page, an email, or a social post actually needs. Resizing it makes pages load faster, keeps emails from bouncing, and stops platforms from re-compressing your image into mush. This guide covers the two numbers that matter, the target sizes for common situations, and the order of steps that gets you there reliably.

The two numbers: dimensions and file size

Dimensions are the width and height in pixels, like 4032×3024. File size is how much space the file takes up, in kilobytes or megabytes. They usually move together — smaller dimensions mean a smaller file — but you can also shrink the file at the same dimensions by lowering the export quality. The first question to ask is which one your destination actually limits: a width in pixels, or a maximum file size. That tells you which lever to pull.

Target dimensions for common uses

These are sensible starting points rather than strict rules. A full-width web banner rarely needs to exceed about 1600–2000 pixels wide. An image inside an article is fine around 1000–1200 pixels. Thumbnails and profile pictures usually sit between 150 and 400 pixels. Email images are friendliest kept under a couple of megabytes and around 600–1200 pixels wide so they display without scrolling. For social media, each platform publishes its own recommended sizes; when a number is given, match it, because uploading something far larger only gets re-compressed on their servers anyway.

The reliable order: resize, then compress

Work in two passes. First, set the dimensions to what the destination needs — this alone usually does most of the size reduction, and it keeps the aspect ratio so the image is never stretched. Then lower the quality for JPG or WebP output until the preview still looks clean; a setting a little below maximum removes detail your eyes will not miss. Doing it in this order means you are compressing an already-smaller image, which gives you the lightest file for the quality you want. The Image Resizer previews both the result and the estimated size as you adjust.

Pick a web-friendly format too

Dimensions are only half the story; the format affects size just as much. For photos on the web, WebP is usually the smallest sensible choice, with JPG as a compatible fallback; PNG is best reserved for graphics and transparency, where it can otherwise balloon a photo's size. If you are unsure, see WebP vs PNG vs JPG for a side-by-side comparison, and use the Image Converter if you need to change format before or after resizing.

Why smaller images are worth the effort

Oversized images are the most common reason web pages feel slow. A single multi-megabyte photo can take longer to load than the rest of the page combined, and slow pages frustrate visitors and can weigh on search ranking. Email is similar: large attachments are slow to send, can hit size limits, and may not display inline. Spending a few seconds to resize before you upload pays off every time the image is viewed afterward.

Resizing is not the same as cropping

Resizing changes how many pixels the whole image contains while keeping the same scene. Cropping cuts away part of the scene to change its shape or focus. They solve different problems: resize when the picture is right but too big, and crop when you want a square avatar from a rectangular photo or need to trim distractions at the edges. Often you do both — crop to the composition you want, then resize to the dimensions the destination needs.

Keep the aspect ratio unless you mean to change it

The aspect ratio is the relationship between width and height. Changing only one of them stretches or squashes the image and makes people look distorted, so good tools lock the ratio by default and the PixTools resizer keeps it for you. When a destination demands an exact square or banner shape that does not match your photo, crop to that shape first, then resize — that hits the required dimensions without distorting anyone.

What about high-resolution (retina) screens?

Modern phones and laptops pack extra pixels into the same physical space, so an image sized exactly to its displayed width can look slightly soft on them. A common fix is to export at roughly twice the displayed width — serving a 1200-pixel image into a 600-pixel slot — so it stays crisp on high-density screens while remaining far smaller than the camera original. If that feels fiddly, simply sizing a little generously is a safe middle ground that covers most screens without bloating the file.

Common mistakes to avoid

Three trip people up repeatedly. Uploading the full-size original and letting the platform shrink it gives you no control over quality — resize it yourself first. Trying to enlarge a small image to fill a big space adds no real detail; that is upscaling, not resizing, and it has limits. And exporting a heavily compressed photo at full quality can produce a file larger than the one you started with, because high quality means re-encoding with little compression, not matching the original. Keep an untouched original, and export sized copies from it.