Best Image Sizes for Websites
There is no single correct website image size. The right width depends on how large the image is displayed in your layout, and on the screens it is seen on. The aim is simple: send roughly the pixels the layout needs, no more, in a sensibly compressed file.
Start from the display size
Check how wide the image appears on a large screen; your browser’s developer tools show this. An image displayed 800 CSS pixels wide needs about 800 pixels, or about 1,600 to look sharp on high-density screens. Uploading a 4,000-pixel camera original for that slot sends many times the data with no visible benefit.
Typical starting points
| Use | Typical display width | Width to export | Rough file-size target |
|---|---|---|---|
| Full-width hero or banner | 1200–1920 px | 1920–2560 px | Under about 300–500 KB |
| Image within an article | 600–900 px | 1200–1600 px | Under about 200 KB |
| Card or grid thumbnail | 250–400 px | 500–800 px | Under about 60 KB |
| Logo | 100–250 px | SVG if possible; otherwise PNG at twice the display width | A few KB |
| Social-sharing (Open Graph) image | Set by each platform | 1200 × 630 | Under about 300 KB |
These are working starting points, not rules or ranking factors. Your layout decides.
High-density (Retina) screens
Phones and many laptops have two or three device pixels for every CSS pixel. Exporting at about twice the display width looks sharp on them; three times rarely makes a visible difference for photos, and costs a lot of bytes.
Responsive images
One large file for every screen wastes data on phones. The HTML srcset and sizes attributes let you offer several widths, for example 480, 960 and 1600 pixels, and the browser downloads the one that fits. Bulk Resize makes it quick to export a set of images at each width.
Dimensions vs file size
Pixel count drives file size: halving the width removes about three-quarters of the pixels. So resize first with Resize Image, then compress with Compress Image. Lowering the quality of an oversized image is the slow way to a small file.
Which format
- Photos: WebP, or JPG at quality 75–85. JPG to WebP typically saves a further 25–35%.
- Logos and icons: SVG where possible; otherwise PNG or WebP with transparency.
- Screenshots: PNG, or WebP at high quality.
Common mistakes
- Uploading camera originals and letting the page shrink them.
- Using PNG for photos, which makes them several times larger than JPG or WebP.
- Exporting at three or four times the display size “just in case”.
- Leaving out width and height attributes, which makes the layout jump while images load.