How do I resize images for the web without losing quality?

To resize images for the web without losing visible quality, the key is to reduce them to the exact size you need and export with the right format/settings. You can’t truly resize an image smaller with zero quality loss, but you can make the loss imperceptible.

Best practices

1) Resize to the displayed size

Don’t upload a 4000 px wide image if it will only display at 800 px wide.
Resize it to the maximum size it will actually appear on your site.

• If an image displays at 800 × 600, export it close to that size
• For high-DPI/Retina screens, you may want 2x the display size, e.g. 1600 × 1200

2) Use the right file format

• JPEG/WebP/AVIF: best for photos
• PNG: best for transparency and some graphics
• SVG: best for logos, icons, simple illustrations

If you’re using photos, WebP or AVIF usually gives better quality at smaller file sizes than JPEG.

3) Use high-quality resampling

When shrinking images, use a good resampling method:

• Lanczos: excellent for downscaling
• Bicubic: also good
• Avoid nearest-neighbor unless you want a pixelated look

4) Export with appropriate compression

• For JPEG, use quality around 75–90
• For WebP, quality around 70–90
• For PNG, compress losslessly if possible

You want the smallest file size that still looks clean.

5) Keep aspect ratio

Always resize proportionally unless you intentionally want a crop or stretch.

6) Use responsive images

Serve different sizes for different devices:

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

This prevents mobile users from downloading unnecessarily large images.

Tools you can use

Easy GUI tools

• Photoshop: Image Size → resample with Bicubic Sharper/Lanczos-like options
• GIMP: Image → Scale Image → Cubic/Lanczos
• Affinity Photo: high-quality resampling options
• Squoosh (free, web-based): great for WebP/AVIF/JPEG optimization

Command line

Using ImageMagick:

magick input.jpg -resize 800x600 -filter Lanczos -quality 85 output.jpg

Using sharp in Node.js:

import sharp from "sharp";

sharp("input.jpg")
  .resize(800, 600, { fit: "inside", kernel: sharp.kernel.lanczos3 })
  .webp({ quality: 85 })
  .toFile("output.webp");

Important note

If your goal is “no visible quality loss,” the best strategy is:

• resize to the correct dimensions,
• use high-quality resampling,
• and avoid over-compressing.

If you want, I can show you:

1. the best settings for Photoshop/GIMP, or
2. a command-line workflow for batch resizing images for a website.