Best Image Size for Websites: Dimensions, File Size and Quality
Choose practical dimensions and file-size targets for hero images, article photos, thumbnails and product images.
Dimensions before kilobytes
There is no universal ideal file size because detailed photos and simple illustrations compress differently. Begin with layout dimensions, then select format and quality. Avoid placing camera originals in narrow content columns.
Useful starting points
| Placement | Typical source width | Priority |
|---|---|---|
| Full-width hero | 1600–2000 px | Sharp focal point |
| Article image | 1200–1600 px | Readable detail |
| Thumbnail | Largest rendered slot | Small transfer |
| Product zoom | Real zoom requirement | Texture and colour |
Measure the actual layout; these are starting points rather than rigid standards.
Responsive images win
Provide multiple widths so phones do not download a desktop hero. Reserve image space with dimensions or an aspect ratio. Lazy-load below-the-fold media, but avoid lazy-loading a main image that is central above the fold.
Quality checklist
- View at actual rendered size.
- Check faces, text, gradients and hard edges.
- Test a slower mobile connection.
- Confirm the crop works across breakpoints.
- Compare bytes after resizing.
Frequently asked questions
Is 100 KB ideal?
It is useful for some images, but content varies. Use the smallest file that meets the visual requirement.
Should retina images be twice the CSS width?
Often, but responsive sources avoid forcing the larger file on every visitor.