Web
The Best Image Size and Format for Websites in 2026
How wide your images should be, how many kilobytes they should weigh, and which format to use so pages load fast without looking blurry.
· 2 min read · ConvertPixels Team
Images are usually the heaviest part of a web page. Getting their size and format right is one of the easiest ways to make a site faster - which helps visitors, conversions and search rankings.
How wide should images be?
Size images for the largest space they'll fill, allowing for high-resolution (Retina) screens:
| Image type | Recommended width |
|---|---|
| Full-width hero / banner | 1920-2400 px |
| Blog or article image | 1200-1600 px |
| Product photo | 1000-2000 px (square) |
| Thumbnail / card | 400-800 px |
| Logo | SVG, or PNG at 2× its display size |
Uploading a 4000-pixel phone photo for a 800-pixel slot wastes bandwidth - resize it first.
How many kilobytes?
| Image type | Target weight |
|---|---|
| Hero image | under 200 KB |
| Content image | under 100 KB |
| Thumbnail | 10-30 KB |
Compress Image can hit an exact target size.
Which format?
- AVIF or WebP for photos - the smallest files at good quality. Convert with JPG to WebP.
- SVG for logos and icons - tiny and sharp at any size.
- PNG only for graphics that need lossless detail and don't work as SVG.
- JPG as a fallback for older systems such as email newsletters.
Other quick wins
- Lazy-load images below the fold (
loading="lazy"). - Set width and height attributes so the page doesn't jump while loading.
- Use responsive images (
srcset) so phones download smaller versions. - Strip metadata - camera EXIF data adds weight and can leak location. Remove EXIF Data handles it.
A simple workflow
For each new image: resize to the width you need → convert to WebP → compress to the target size. With batches of up to 30 files, a whole gallery takes a couple of minutes.
FAQ