How to Resize Images Correctly

Resize to the display size

The core rule: never serve larger than you display. A 4000px photo in a 600px slot wastes 80%+ of the bytes. Start from the original and resize down.

Resize and crop with the free image resizer and cropper.

Dimensions and retina

Modern screens have 2× (and sometimes 3×) pixel density. Provide:

• 1× — the CSS display size.
• 2× — double, for retina sharpness.

A 600px-wide display needs a 1200px asset for crisp retina rendering.

Keep the aspect ratio

Distorting an image to fit stretches faces and logos. Crop to the target ratio instead of squashing. Common ratios: 16:9, 4:3, 1:1, 3:2.

Responsive images with srcset

Let the browser choose:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="..."
>

Small screens download the small file; large screens get the sharp one.

Resize without quality loss

1. Work from the largest original.
2. Resize down, never up.
3. Use good downscaling (most tools do).
4. Resize before final compression.
5. Avoid repeated save/resize cycles (each degrades).

Cropping vs resizing

• Resize changes dimensions, keeps all content.
• Crop changes dimensions by removing content — often better for consistent thumbnails and cards.

Common mistakes

1. Serving originals at full resolution.
2. Upscaling small images (blurry).
3. Distorting aspect ratio.
4. Forgetting retina.
5. Re-exporting the same JPEG repeatedly.

Do it in your browser

The resizer handles dimensions and retina exports, and the compressor finishes the job — all locally, nothing uploaded.