How to Resize Images for the Web: Sizes, Ratios, and Best Practices

Resizing is the single most effective thing you can do to make images load faster. A beautiful 4000-pixel photo displayed in a 400-pixel slot wastes roughly 99% of its data. Resizing fixes that before compression ever enters the picture.

Resize before you compress

Compression removes detail within the pixels you have. Resizing removes pixels you never needed. Do the math and resize first:

• A 4000 × 3000 photo holds 12 million pixels.
• The same photo at 1200 × 900 holds 1.08 million pixels.
• That is about a 91% reduction before any compression at all.

Once the image is the right size, a modest quality setting finishes the job.

Know your display sizes

Designs are usually built from a handful of reusable sizes. Here are sensible targets for a typical site:

Placement	Suggested width	Aspect ratio
Full-width hero	1600–2400 px	16:9 or 21:9
In-content featured image	1200 px	16:9 or 3:2
Blog card / thumbnail	600–800 px	16:9 or 4:3
Avatar	128–256 px	1:1
Logo in a header	2× displayed height	Varies
Open Graph / social share	1200 × 630 px	1.91:1

A good rule of thumb: measure the largest size the image will ever appear on screen, then multiply by 2 for high-density displays. Do not multiply by three or four unless you know you need it.

Always preserve the aspect ratio

The aspect ratio is the relationship between width and height. Distorting it squeezes or stretches the subject, which is immediately noticeable — especially with faces and circles.

When you change one dimension, let the tool adjust the other automatically. If you need a different shape, crop deliberately instead of squashing the image. Imgsprint’s resize tool keeps the ratio locked by default, and the crop tool handles deliberate reframing.

Upscaling: proceed with caution

Making an image larger does not add real detail. The software has to invent new pixels, which usually means a softer, slightly blurry result. Upscale only when:

• The source is only slightly too small (10–20%).
• The image is a simple graphic with clean edges.
• You have no alternative and the softness is acceptable.

For photographs, it is almost always better to use a larger original.

Serve the right size to each device

If you control the website, do not send one huge image to every visitor. Use responsive images:

<img
  src="photo-1200.jpg"
  srcset="photo-600.jpg 600w, photo-1200.jpg 1200w, photo-1800.jpg 1800w"
  sizes="(max-width: 600px) 100vw, 1200px"
  width="1200"
  height="900"
  alt="A description of the photo"
  loading="lazy"
/>

This lets the browser download only the size it needs. Two details matter most:

• Set width and height so the page does not jump while the image loads.
• Use loading="lazy" for images below the fold, and leave the hero image eager so it appears quickly.

Resizing versus cropping versus compressing

These three operations solve different problems, and confusing them causes trouble:

• Resize changes the pixel dimensions while keeping the whole image.
• Crop removes parts of the image to change its shape or framing.
• Compress reduces file size by discarding detail within the existing dimensions.

A common high-quality pipeline is: crop to the right shape → resize to the right dimensions → compress to the right file size. Our guides on compression and formats cover the other two steps.

A checklist

• Start from the highest-quality original you have.
• Decide the largest display size, then double it for retina screens.
• Keep the aspect ratio locked unless you are deliberately cropping.
• Check the result at 100% zoom to catch softness.
• Add width and height attributes when you publish.
• Use srcset when you can.

Resizing is not glamorous, but it is the difference between a page that feels instant and one that makes people wait. Get the dimensions right, and everything else gets easier.