There’s no single “correct” image size for a website — the right numbers depend on what role the image plays on the page. This is a working reference for the common cases, with the reasoning so you can extend it to cases not listed here.
Reference table by role
| Role | Width | Target file size |
|---|---|---|
| Hero / full-width banner | up to 1920px | under 200KB |
| Blog / in-content photo | 800-1200px | under 100KB |
| Product detail main image | 800-1200px | under 150KB |
| Product/listing grid thumbnail | 300-500px | under 50KB |
| Author avatar / small icon | 200-400px | under 20KB |
| Logo (if raster, not SVG) | actual display size x2 | under 20KB |
These targets assume the image has already been resized to a sensible maximum width for its role — file size targets without a dimension cap don’t mean much, since you can always hit a small file size by shrinking dimensions far below what’s needed.
Why 1920px is a practical ceiling for full-width images
Serving an image wider than roughly 1920px means you’re encoding pixel detail that exceeds the actual rendered width on the vast majority of visitor screens — even large monitors typically render a browser window well under their full native resolution, and CSS will downscale an oversized image to fit its container regardless. That downscaling doesn’t reduce the download size; the full file still transfers before being scaled down visually. Sizing the source image to match its actual maximum display width, rather than “big enough to be safe,” is where a lot of unnecessary page weight comes from.
Retina/high-DPI images: use them selectively, not universally
A 2x resolution image (double the pixel dimensions for the same display size) looks measurably sharper on high-density screens for content where sharpness at close viewing distance matters — logos, icons, hero images with overlaid text. For general photographic content viewed briefly and at normal scrolling distance, most people don’t consciously notice the 1x vs. 2x difference, but the file size cost is real (roughly double). A reasonable approach: serve 2x for small, detail-critical elements (logos, icons) and stick to 1x, well-compressed, for larger photographic content where the size cost of doubling isn’t worth a barely-perceptible sharpness gain.
Grids need aggressive, not moderate, compression
Because a product or content grid shows many images at once, each individual image gets only a glance from the visitor — this is exactly the situation where aggressive compression (a low file-size target relative to what a single hero image would use) has the least visible cost and the most cumulative benefit, since total page weight scales with the number of images shown.
srcset changes the target from “one size” to “a set of sizes”
If your site uses responsive images (srcset/sizes), you’re not picking one target size — you’re picking a target for each breakpoint variant, and the smaller variants should be genuinely resized down to their own target width, not just the same large image compressed to different file sizes. A phone visitor should download a file that’s actually smaller in pixel dimensions, not just more compressed, to get the full benefit.
Frequently asked questions
- What dimensions should a hero/banner image be?
- 1920px wide is a common safe maximum, covering the vast majority of desktop viewport widths without upscaling. Height depends on the design, but a common range is 600-1000px for a full banner. Beyond 1920px wide, you're serving pixels that exceed almost every visitor's actual viewport, for no visible benefit — CSS will scale the image down to fit anyway, and you've just made the file larger for nothing.
- Do I need 2x or 3x images for retina/high-DPI screens?
- For images where sharpness genuinely matters at close viewing distance — logos, icons, and hero images with text — serving a 2x resolution version (e.g., a 1200px-wide slot gets a 2400px-wide image) noticeably improves sharpness on retina displays. For most photographic content viewed at normal distance, the difference between 1x and 2x is much harder to notice, and blanket-serving 2x or 3x for everything roughly doubles or triples total image weight for a benefit most visitors won't consciously register. Reserve high-DPI variants for content where sharpness is the point.
- What's the right size for product photos in an e-commerce grid?
- Grid/listing thumbnails: 300-500px wide, under 50KB — displayed small, viewed briefly, high volume per page. Product detail page main image: 800-1200px wide, under 150KB, since customers may zoom or study it closely before purchasing. If your platform supports a zoom-on-hover or click-to-enlarge feature, that enlarged view can use a separate, larger source image loaded only on demand, rather than serving that resolution to everyone by default.
- Should every image on a page be the same file size target?
- No — treat file size targets as proportional to how much visual attention an image gets and how large it displays, not as a flat rule. A full-width hero gets more visual attention and needs more headroom (up to ~200KB) than a supporting thumbnail in a grid of a dozen similar images (under 50KB each), where any individual one gets only a glance.
- How does responsive `srcset` change these numbers?
- `srcset` lets you serve different image files at different sizes depending on the visitor's actual viewport and pixel density, so a phone visitor downloads a genuinely smaller file than a desktop visitor for the same image slot, rather than everyone downloading the same large file and having CSS scale it down client-side. If you're using `srcset`, the size targets above apply to your largest variant (typically the desktop 1x version); the smaller breakpoint variants should be resized (not just compressed) down proportionally to their own target width.