Choosing image sizes for the web: pixels, resolution, and compression

How large should this image be? It is one of the most common questions when preparing images. Make it too large and pages load slowly or uploads fail; make it too small and it looks blurry. This guide separates pixel dimensions, resolution, DPI, and file size, then gives practical sizes and steps for common situations.

First: pixel dimensions ≠ file size ≠ DPI

These concepts are often confused, but they measure entirely different things:

• Pixel dimensions, such as 1920×1080, describe how many pixels an image contains and determine how large and sharp it can appear.
• File size, such as 350 KB, is the storage space the file uses. It depends on pixel count, format, and compression.
• DPI / PPI measures pixels per inch and matters mainly for printing. On a screen, the DPI value has almost no effect; pixel dimensions are what matter.

For web pages and social media, focus on pixel dimensions and file size, not DPI. Although 72 DPI is often called a web standard, screens do not use that number to display the image.

Screen resolution and 2× images

Most phones and laptops now use high-density displays, such as Retina screens, where one CSS pixel maps to two or even three physical pixels. If an image appears 400 px wide on a page, an 800 px source image—the 2× version—will stay sharp on those screens. There is no need to keep scaling up, however: beyond 2× or 3×, the benefits fade while the file keeps growing.

Recommended sizes for common uses

• Images within web content: 1200–1600 px wide is sharp enough while keeping size manageable.
• Full-screen banners / hero images: 1920–2560 px wide.
• Avatars: A 400×400 or 512×512 px square is enough.
• Thumbnails: 200–400 px wide.
• Email attachments: Keep the longest edge below 1500 px to avoid oversized attachments.

Social platforms each publish their own recommended dimensions and change them from time to time, so check the current requirements before posting. The general rule remains the same: set pixel dimensions first, then compress the file.

Two rules for resizing

First, resize down rather than up whenever possible. Reducing dimensions discards extra pixels with little visible impact. Enlarging asks software to guess pixels that do not exist, which adds blur rather than real detail.

Second, preserve the aspect ratio. Changing width and height independently stretches the image. Lock the aspect ratio, edit one dimension, and let the other update proportionally.

Workflow: resize first, then compress

The best order is to set the target pixel dimensions first, then reduce file size:

1. Use the image resizer to reduce the longest edge to your target, such as 1600 px, with the aspect ratio locked.
2. Then use the image compressor and converter to reduce file size or convert to a more efficient format such as WebP or AVIF.
3. Compare sharpness and file size before and after, then download when you are happy with the result.

Both tools run locally in your browser, so images are never uploaded and can be downloaded as soon as processing finishes. For more on choosing a format, read WebP vs AVIF.