How to Resize Images for a Website
Oversized images are the number one cause of slow websites. A 6000px, 12MB “hero” photo that displays at 1200px wide is pure waste — visitors download ten times the pixels they can see, and Google's Core Web Vitals punish you for it. The professional workflow is simple: resize every image to its actual display size (plus a 2x version for retina screens), convert to WebP, and watch load times collapse. Re-Sizefy does the whole batch in your browser, so even unreleased product shots never leave your machine.
Step-by-step: size images for the web
- Decide each image's display size. Typical targets: hero/banner 1920px wide, article content 1200px, product cards 800px, thumbnails 400px. When in doubt, check your site's CSS max-width.
- Drop in the batch. Drag all the images for a page — or a whole product catalog — into the drop zone at once.
- Resize to the display width. Set the resize target to width and enter the pixel value. For retina sharpness on important images, export at 2x (e.g., 2400px for a 1200px slot) — still far smaller than the camera original.
- Convert to WebP at quality 80. WebP at 80 looks identical to a JPG at 90 on screens while running ~30% smaller. Keep a JPG fallback only if you must support truly ancient browsers.
- Download the ZIP and deploy. Use clear file names (
hero_1920.webp) via the renaming options so your asset folder stays sane.
Quality tips
Serve responsive images with srcset: export each image at 400, 800, 1200, and 1920px, and let the browser pick. Batch mode makes the four-size export a one-minute job.
Product photos on white backgrounds compress beautifully — you can often use quality 70–75 with zero visible difference, because there is little detail for the encoder to struggle with.
Thumbnails under 400px barely need quality 75 at all; at that size, even quality 65 looks clean, and the files become almost free.
Things to watch out for
- Do not ship camera originals. Uploading a 12MB original and relying on CSS to shrink it is the classic performance sin — the bytes still download. Resize before upload, always.
- Mind the art direction. A wide crop that looks great at 1920px may crop awkwardly at 400px. For critical images, crop variants per breakpoint rather than blindly scaling one file.
- Alt text still matters. Resizing helps performance SEO; descriptive alt attributes help ranking SEO. Do both.
Try it now
Open the free Re-Sizefy converter — drop in your site images, resize to display size, convert to WebP, done. No sign-up, no upload.
Frequently asked questions
What size should website images be?
Match the display size: 1920px for full-width heroes, 1200px for article images, 800px for product cards, 400px for thumbnails. Export 2x for retina on key visuals.
Is WebP safe to use on websites now?
Yes — all modern browsers support it, covering the overwhelming majority of visitors. Only very old browsers need a JPG fallback.
How much faster will my site get?
Replacing a 12MB hero with a 200KB WebP cuts that image's load from seconds to milliseconds — often the single biggest performance win available.
Can I resize a whole product catalog at once?
Yes. Batch mode applies identical dimensions, format, and naming to hundreds of images and returns one ZIP.