How do I resize images for the web without making them blurry?

To resize images for the web without making them blurry, the key is to use the right source image, resize only once, and export with proper settings.

Best practices

1. Start with a large enough original

   • Don’t enlarge small images; that causes blur.
   • If you need a 1200×800 image on the site, start with something at least that size, ideally larger.

2. Resize to the exact display size

   • If the image will appear at 600×400, export it close to that size.
   • Avoid relying on CSS to shrink a huge image if you care about file size and performance.

3. Use the right interpolation method

   • When shrinking: use high-quality resampling like Lanczos or bicubic.
   • When enlarging: any method will soften the image, so it’s better not to upscale unless necessary.

4. Keep aspect ratio

   • Resize proportionally so the image doesn’t stretch.

5. Export in a web-friendly format

   • JPEG: photos
   • PNG: transparency or sharp graphics
   • WebP/AVIF: smaller files, good quality for modern browsers

6. Don’t over-compress

   • Too much JPEG compression can make images look blurry or blocky.
   • Use moderate quality, often around 75–85 as a starting point.

7. Use responsive images

   • Serve different sizes for different screens using srcset and sizes.
   • This prevents small images from being stretched on high-resolution displays.

Example: HTML responsive image

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

If you’re using CSS

Make sure the image is not being scaled up beyond its natural size:

img {
  max-width: 100%;
  height: auto;
}

Simple rule of thumb

• Downsize before uploading
• Never upscale small images
• Use srcset for different screen sizes
• Export with high-quality resampling

If you want, I can also give you:

• a Photoshop/GIMP workflow,
• a command-line ImageMagick example, or
• a Python script for batch resizing.