How to Resize Images for Web Without Blurring

Resizing an image sounds trivial. It isn't. A 4000×3000 photo resized to 800×600 for a website can look either sharp and professional or soft and muddy — and the difference comes down to three decisions: the algorithm used, the output format, and whether you're scaling down or scaling up.

---

Why images blur when resized

Every raster image is a grid of pixels, each with a colour value. There is no concept of "edge" or "face" or "text" — just a number for each pixel. When you resize the grid, the software must calculate new pixel values either by sampling existing ones or inventing new ones.

Scaling down (making smaller): You're discarding pixels. A 4000-pixel-wide image at 800 pixels must represent 5 source pixels with 1 destination pixel. A poor algorithm (like nearest-neighbour) just drops pixels. A good algorithm (like Lanczos or Bicubic) uses a mathematical function to blend nearby pixels, preserving edge sharpness and reducing aliasing.

Scaling up (making larger): You're inventing pixels. Even a perfect algorithm can only interpolate (guess) between existing values. Upscaling always produces some softness. The more you upscale, the more pronounced it becomes. An image at 100% of its natural size will always be sharper than the same image at 200%.

The practical rule: never design for sizes larger than your source images. If you need a 1200px-wide hero image, start with a photo that's at least 1200px wide.

---

Choosing the right algorithm

Most image tools expose at least a few resampling algorithms. Here's what they actually mean:

Nearest-neighbour: Fastest, worst quality. Assigns each new pixel the colour of the nearest old pixel with no blending. Results in blocky, pixelated edges. Used in pixel art intentionally; don't use it for photos or UI screenshots.

Bilinear: Simple weighted average of the 4 nearest pixels. Fast and acceptable for moderate scaling (up or down by 2×). Produces soft results at large scale changes.

Bicubic: Weighted average of the 16 nearest pixels using a cubic function. Better edge preservation than bilinear, suitable for most photo resizing. The default in Photoshop's "Bicubic" preset.

Bicubic sharper: A variant tuned for enlargement. Slightly over-sharpens to compensate for interpolation softness. Good for upscaling by small amounts.

Lanczos (also called Sinc or Mitchell-Netravali): Uses a sinc function windowed over a larger neighbourhood (typically 2–3 "lobes"). Better high-frequency preservation than bicubic — sharper edges, less aliasing on downscaling. Slower but the best option for significant downscaling (4:1 or more). The Image Resizer uses this algorithm on the server.

For downscaling a 4000px photo to 800px, Lanczos is measurably sharper than bilinear. I've run this on product photos where the sharpness difference was immediately visible at 100% zoom, with Lanczos retaining edge definition that bilinear smeared.

---

Output format choice matters

Resizing into the wrong format can introduce blur even with a perfect algorithm:

JPEG at low quality after resizing: The block DCT compression of JPEG introduces artefacts that are particularly visible on recently-sharpened edges. If you resize and then export at JPEG quality 60, the compression artefacts can look like softness. Use quality 80+ for web images, or use WebP instead — WebP achieves smaller file sizes at equivalent perceptual quality.

PNG for photos: PNG is lossless — no compression artefacts — but the files are much larger. Use PNG for screenshots, logos, and UI elements. Use WebP or JPEG (at quality 80+) for photographic content.

Upscaling to PNG: If you're upscaling a small image and want to avoid JPEG artefacts obscuring the upscaling, PNG or lossless WebP at least ensures the output softness is from the algorithm, not from compression.

---

The right workflow for sharp web images

For photos going on a website:

1. Start with the highest-resolution source you have
2. Resize down to the target display size (not larger)
3. Use Lanczos resampling
4. Export as WebP at quality 80, or JPEG at quality 80 if WebP isn't an option
5. For retina/2× displays, serve images at 2× the CSS pixel size

For screenshots and UI documentation:

1. Capture at the target display resolution or larger
2. Resize down (never up) using Lanczos
3. Export as PNG (lossless) or WebP lossless for best results
4. JPEG is appropriate only if file size is critical and artefacts are acceptable

For product photography:

1. Resize to the platform's maximum useful size (e.g., Amazon requires 1000px minimum on the longest side; Shopify recommends 2048×2048)
2. Use WebP for web delivery, JPEG as fallback
3. Keep the original at full resolution for future use

Use the Image Resizer to resize to exact pixel dimensions with Lanczos resampling, output format choice, and quality control in one step. For converting existing JPEGs to WebP after resizing, you can select the output format directly in the tool.

---

What about AI upscaling?

Standard Lanczos and bicubic algorithms interpolate mathematically. AI upscaling (Waifu2x, Real-ESRGAN, Topaz AI) uses neural networks trained on millions of images to hallucinate plausible high-frequency detail. Results are dramatically better than algorithmic upscaling for photos.

The trade-off: AI upscaling is slow (seconds per image on consumer hardware) and requires specialised software or a paid service. For upscaling by 2–4× on important images where quality matters, it's worth investigating. For routine web image preparation, algorithmic downscaling with a good algorithm and appropriate output format produces excellent results.

---

FAQ

Why does my resized image look soft even at 100% zoom? The most likely cause is upscaling — you're displaying the image at a size larger than its source dimensions. Check the image's actual pixel dimensions and compare them to the element size in CSS. Also check your resampling algorithm: bilinear produces noticeably softer results than Lanczos on photos.

Should I sharpen after resizing? A slight unsharp mask (or smart sharpen in Photoshop) after resizing can recover some perceived sharpness that resampling softens. It's optional — a small radius (0.5–1px) with moderate strength is usually appropriate. Don't over-sharpen; it creates artificial halos around edges.

What's the best image size for social media in 2026? Key sizes: Twitter/X header 1500×500, post image 1200×675; LinkedIn post 1200×628; Instagram square 1080×1080, landscape 1080×566. For OG images used in link previews: 1200×630 is the universal safe size.

My image looks great in Photoshop but blurry when exported. Why? Usually a quality/compression issue at export, not the resize. Check the export settings: for JPEG, quality should be 80+. For PNG, make sure you're not exporting at a lower bit depth than the source (e.g., saving as 8-bit indexed colour instead of 24-bit RGB).

Can I convert a batch of JPEGs to WebP at a specific size? Our Image Resizer supports batch processing for Pro users — resize and convert up to 20 images at once to any dimension and format.