Tutorial6 min read·Updated

How to Resize Images for the Web: The Right Dimensions for Every Use

Most oversized web images are not a compression problem but a dimension problem: a 12-megapixel photo squeezed into a 300 px thumbnail. Resizing to the right width is free performance. Here are the numbers, and how to resize and convert in a single step.

UseWidth (px)Notes
Full-width hero / banner1920–24002400 covers Retina laptops; 1600 if bandwidth matters more
Blog / article content image1200–16002× a 600–800 px column
Product image (zoomable)1600–2000Square or 4:5
Card / grid thumbnail600–8002× a 300–400 px card
Avatar / small icon160–256Serve 2× for sharpness
Open Graph / Twitter card1200 × 630Fixed size; keep 1.91:1
Instagram post1080 × 1080 / 1350Platform re-compresses
Email600–1200Displayed at ~600 px

Why 2× and not 3×

Retina displays have 2× or 3× pixel density, but images at 2× already look sharp on 3× screens because the human eye cannot resolve the difference at typical viewing distances, and lossy compression hides it further. Going from 2× to 3× costs 2.25× the bytes for no visible gain.

Resize and convert in one step

  1. Open Fast WebP Converter and drop your images.
  2. Set Maximum width to the value from the table (e.g. 1600 for blog content).
  3. Set Quality to 80 for photos, 90 for graphics.
  4. Convert. Images wider than the limit are scaled down proportionally with high-quality resampling; smaller images are left untouched.
Never upscale
Enlarging an image cannot add detail; it only adds bytes and blur. The converter never upscales, so you can safely set one maximum width for a mixed batch.

Responsive images with srcset

For the best results, generate 2–4 widths (e.g. 480, 960, 1600) and list them in srcset with a sizes attribute. The browser picks the smallest file that fills the slot on that device. Most CMSs and frameworks (WordPress, Next.js, Astro) do this automatically once you upload a large enough master.

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

For full-width images, 1920–2400 px wide; for content images, 1200–1600 px; for thumbnails, 600–800 px. Always combine with WebP compression.

Downscaling with a good resampling filter keeps images sharp at their displayed size. Only upscaling degrades quality.

Keep reading

Tutorial6 min read

Best WebP quality setting

What quality should you use when converting to WebP? We tested photos, screenshots and graphics at every level. Get concrete recommendations per image type.

Read more
Performance9 min read

Core Web Vitals & WebP

Learn how converting images to WebP improves Largest Contentful Paint, Cumulative Layout Shift and your PageSpeed Insights score, with a step-by-step optimisation checklist.

Read more
Performance6 min read

Reduce image size

Five techniques to shrink image files by 80–95% with no visible quality loss: modern formats, resizing, smart quality, metadata stripping and avoiding double compression.

Read more