How to Resize Images for Websites

The widths that matter

Most site content columns land between 700 and 1200 CSS pixels wide. Double it for high-density screens and you get the practical targets: 1200–1920 pixels for full-width images, 800–1000 for in-article images, and 400–700 for thumbnails. Anything beyond ~2000 pixels wide is wasted bytes for almost every site.

Keep the aspect ratio locked

Changing width and height independently distorts the image — circles become ovals, people become strangers. When you resize images, keep the lock on: enter the width you need and let the height follow the image's own proportions.

Downscale, don't upscale

Downscaling keeps quality: fewer pixels are sampled from real data. Upscaling cannot invent detail that was never captured, so enlarged images go soft. If an image is too small for its slot, find a larger original rather than stretching it.

What about inches, cm and DPI?

For screens, DPI is metadata — a 300 DPI label on a 1200-pixel image changes nothing for browsers, which use the pixels themselves. Physical units matter for print planning, which is why a good resizer (including Pixitools' resizer) supports inch/cm/mm with an adjustable DPI — but for web work, pixels are the unit that matters.

After resizing

Resizing reduces pixel count; compression and format choice reduce encoding overhead. Do the resize first, then see how to compress images for faster websites for the second half of the equation.