images
The standard image sizes for a website (and a free tool to make them)
The common image sizes every website needs — hero, content, product, card, thumbnail, and avatar — with target dimensions and a free tool to make them.
Updated 2026-06-14
A website is not one image size — it is several. The banner across the top, the photos inside an article, the small pictures in a grid of cards, and the round avatar next to a name all have different jobs, and each one has a sensible size.
If you use the same giant file everywhere, the small ones waste bandwidth and the big ones may still be too heavy. If you guess sizes at random, your layout looks inconsistent. This guide lists the standard image roles on a typical website, the dimensions and file-size budgets that suit each one, and how to produce them quickly.
Why “standard sizes” exist
Two forces decide the right size for an image:
- How big it appears on screen. There is little point serving a 3,000-pixel image into a box that is 600 pixels wide.
- How heavy it can be. Larger images are allowed a bigger file budget; small ones should stay tiny so pages feel instant.
The roles below are the ones almost every site reuses. They also map directly to the one-click presets in the tool further down, so you do not have to memorize the numbers.
The standard image roles
Hero / banner
The large image across the top of a page, often full width.
- Width: around 1920 px
- Budget: keep it under ~200 KB
- Notes: this is usually the most important image for performance, because it is the biggest thing visitors see first. Compress it harder than you think you need to.
Content / article image
Photos placed inside the body of a page or blog post.
- Width: around 1200 px
- Budget: ~150 KB
- Notes: wide enough to look crisp in the content column without dominating the page weight.
Product / gallery image
E-commerce shots and portfolio images where fine detail matters.
- Width: around 1200 px, at slightly higher quality
- Budget: a little more generous, because buyers want to see texture and detail
- Notes: the one place where it is worth trading a few extra kilobytes for sharpness.
Card / grid image
The medium thumbnails used in blog listings, related-post grids, and carousels.
- Width: around 600 px
- Budget: ~80 KB
- Notes: these repeat many times on a page, so small savings multiply.
Thumbnail
Small previews in lists, sidebars, and search results.
- Width: around 400 px
- Budget: ~40 KB
- Notes: tiny on screen, so they should be tiny as files.
Avatar / icon
Profile pictures, author photos, and small logos — almost always square.
- Width: around 200 px, 1:1 ratio
- Budget: ~20 KB
- Notes: crop to a square first so faces are centered and nothing looks stretched.
A quick reference table
| Role | Typical width | Ratio | File budget |
|---|---|---|---|
| Hero / banner | 1920 px | wide (16:9, 21:9) | ~200 KB |
| Content / article | 1200 px | flexible | ~150 KB |
| Product / gallery | 1200 px | 1:1 or 4:5 | a bit higher |
| Card / grid | 600 px | 3:2 or 16:9 | ~80 KB |
| Thumbnail | 400 px | flexible | ~40 KB |
| Avatar / icon | 200 px | 1:1 | ~20 KB |
Treat these as practical defaults, not strict rules. A specific theme or platform may ask for exact pixel sizes.
How to make every size from one photo
You rarely need different source files — you start from one good photo and produce each size from it. A browser-based optimizer does this in seconds and never uploads your image anywhere.
Open the free image optimizer and use its “Optimize for” presets: pick Hero, Content, Product, Card, Thumbnail, or Avatar, and it sets the right width and quality in one click, landing inside the file-size budget for that role. You can fine-tune afterwards.
For one-off jobs you can also go straight to the right tool: resize an image online to a specific width, or crop an image to a square for an avatar.
A simple workflow
- Start from the highest-quality original you have.
- Decide the role: is this a hero, a card, an avatar?
- Apply the matching preset (or set the width and quality manually).
- Export as WebP, check the file size, and download.
- Repeat for any other size the same photo needs.
The bottom line
Most websites only need a handful of image sizes: hero, content, product, card, thumbnail, and avatar. Learn those six roles, keep each one inside its file budget, and your site will look consistent and load fast — and with one-click presets, you do not even have to remember the numbers.