What Image Size Should I Use for a Website?
The right image size depends on where it's used. Get exact pixel dimensions and file-size targets for hero, blog, product, and thumbnail images.
There is no single correct image size for every website. The right dimensions depend on where the image is displayed. A hero banner needs to be much larger than a thumbnail, while a product photo may need enough resolution for customers to zoom.
Quick-reference table
| Image type | Recommended dimensions | Target file size | Format |
|---|---|---|---|
| Hero / banner | 1600–1920px wide, 16:9 typical | Under ~200 KB | WebP, JPG fallback |
| Blog featured / Open Graph | 1200×630px | Under ~100 KB | WebP or JPG |
| In-article / inline | Typically 700–900px wide | Under ~150 KB | WebP or JPG |
| Product photo | 1000–2000px on the long side | Under ~300 KB | WebP or high-quality JPG |
| Thumbnail | 300–400px square | Under ~30–50 KB | WebP |
| Logo | Approximately 2× display size | As small as practical | PNG or SVG |
These are practical starting points rather than rigid standards. The actual layout, device, image content, and performance requirements should determine the final choice.
Why one universal size doesn't exist
Two forces pull in opposite directions. Larger images can provide more detail on high-density screens and large displays, while smaller images load faster. The right image is usually the smallest one that remains sharp at the size where it is actually displayed.
Hero and banner images
Hero images are often among the most important images on a page because they can appear early in the user experience and can influence perceived loading speed. They should be large enough for their layout but compressed aggressively enough to avoid unnecessary page weight.
Blog featured and Open Graph images
A 1200×630 image is a widely used starting point for blog featured and social preview graphics. Keep these images reasonably compressed because the same artwork may be reused across social previews and other surfaces.
In-article images
Inline blog images usually do not need to be as wide as a hero image. Match the image to the width of the content column and avoid serving several times more pixels than the page can actually display.
Product images
Product images are a special case because shoppers may zoom in. Keeping the resolution reasonably high and relying more heavily on compression can protect the buying experience while still controlling page weight.
Thumbnails
Thumbnails are displayed at small sizes and are often used in large numbers. Keeping both their dimensions and file sizes small can have a meaningful effect on total page weight.
Mobile vs desktop image sizes
With responsive images, the ideal image size is really a range. A properly configured website can serve a smaller image to mobile visitors and a larger version to larger displays.
How to optimize a website image
- Choose dimensions based on display size
Measure or inspect the actual area where the image will appear.
- Choose the format
WebP or JPG can work well for photographs, while PNG is useful for logos and transparency.
- Compress the image
Reduce file size until the image is small enough without becoming visibly degraded.
- Check the result on the real page
Do not judge an image only in isolation. Check how it looks at the size visitors actually see.
Common mistakes
- Uploading camera-original files directly to a website.
- Using the same oversized image for a hero, thumbnail, and inline image.
- Optimizing only pixel dimensions while ignoring file size.
- Optimizing only file size while ignoring whether the image is sharp enough.
- Copying another platform's image dimensions without checking your own site's layout.