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.
The best image size for a website depends on where the image will appear. A hero banner needs different dimensions from a blog image, product photo, thumbnail, or logo. In this guide, you’ll find practical website image dimensions, recommended file sizes, and the best formats to use so your images look sharp without slowing down your pages.
Quick-reference table
| Image type | Recommended dimensions | Target file size | Best format |
|---|---|---|---|
| Hero / banner | 1920 × 1080 px | Under 300 KB | WebP or AVIF |
| Blog featured image | 1200 × 630 px | Under 200 KB | WebP or JPG |
| In-article image | 1200 × 800 px | Under 200 KB | WebP or JPG |
| Product photo | 1200 × 1200 px | Under 200 KB | WebP or JPG |
| Thumbnail | 300 × 300 px | Under 100 KB | WebP or JPG |
| Logo | 300–500 px wide | Under 100 KB | SVG, WebP, or PNG |
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
- 1. Resize to the dimensions you actually need
Start with the image dimensions required by the page. Avoid uploading a much larger original when it will only be displayed at a smaller size.
- 2. Choose an efficient image format
Use WebP or AVIF when supported for efficient web delivery. JPG works well for photographs, while PNG is useful when you need transparency or crisp graphics.
- 3. Compress the image
Compress the image to reduce its file size while keeping the quality visually acceptable. For many website images, aiming for a file size below 200 KB is a useful starting point.
- 4. Check the image on the actual page
View the image at its real display size on both desktop and mobile. Make sure it remains sharp and readable without unnecessarily increasing the page's load size.
- 5. Test the final file size
If the image is still larger than necessary, resize or compress it again. The goal is to use the smallest file that still provides the quality your visitors need.
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.