The hero image is the large banner at the very top of a page, the first thing visitors see. It’s also often the heaviest single file on the whole site. Getting its size right makes your site look professional and load quickly, and getting it wrong does the opposite.
Recommended dimensions
There’s no single correct number because screens vary, but a width of about 1920 pixels is a widely used starting point for full-width hero images. It covers standard full-HD desktop monitors with a little room to spare. For height, 600 to 1000 pixels is common, depending on how tall you want the banner to be.
If your hero sits inside a fixed-width container, say 1200 pixels, you don’t need to go as large. Upload around double the container width if you want it to look crisp on high-density screens.
File size: the number that matters most
A hero image shouldn’t be a multi-megabyte file. Aim for roughly 100 to 250 KB if you can, and certainly less than half a megabyte. A big hero image is usually what Google measures as your page’s Largest Contentful Paint, one of the Core Web Vitals, so a heavy one directly slows how fast your page feels. Our piece on how image size affects SEO goes into why.
The best format
For photographic hero images, WebP is usually the best balance of quality and file size. JPG is the safe fallback. Avoid PNG for photos, since it will be far larger. Compare them in the best image format for websites.
Design for cropping
A hero image on a wide desktop screen becomes much narrower on a phone, and the browser usually crops the sides to fit. If your subject is at the far left or right edge, it may vanish on mobile. Keep the important part, such as a person’s face or a product, near the center. You could also provide a separate, taller version for small screens. That’s what responsive images are for.
Text over images
If you put a headline on top of your hero image, check readability. Busy photos make text hard to read. A subtle dark overlay or a calmer area of the picture solves it. Never put important text inside the image itself as a graphic, because it can’t be read by search engines or screen readers and it shrinks on mobile.
Don’t lazy load it
Because the hero is the first thing on the screen, it should load right away. Lazy loading is for images further down. We explain the difference in our lazy loading guide.
Quick recipe
- Start with a high-quality original, ideally at least 2000 pixels wide.
- Crop it to the shape you need, keeping the subject centered.
- Resize to about 1920 pixels wide.
- Export as WebP or JPG at quality 75 to 80.
- Check the file size. If it’s over about 250 KB, reduce quality a little or trim the dimensions.
- Test on a phone.
You can do the resize and export steps in one go with our free online image resizer.