---
title: "What Size Should a Website Hero Image Be? | ImageQuarry"
url: https://www.imagequarry.com/faq/what-image-size-for-a-website-hero/
last_updated: 2026-10-20
---

# What image size do I need for a website hero image?

Wide enough for the largest screen it fills, times the screen's pixel density. A full-width hero on a 1920 pixel wide desktop needs about 1920 pixels, or about 3840 for sharp display on high-density screens. Serve smaller versions to phones.

There is no single standard size, because hero areas differ in shape. Measure the hero's width and height in your layout at the widest desktop size, then double it for high-density screens.

Use the same image in several sizes. MDN's responsive images guide explains how the srcset and sizes attributes let the browser pick a smaller file for a phone and a larger one for a big screen, so phones don't download a desktop-sized file.

Leave room in the image for the headline and buttons that sit over it, and check how the crop changes between desktop and phone, since a wide hero is often cropped to a taller shape on mobile.

Save web heroes as WebP, AVIF or a well-compressed JPEG rather than a large PNG, unless the image is mostly flat graphics.

_Source: MDN Web Docs, responsive images and image format guide, checked October 20, 2026. Pixel figures are layout width x density._

Next step: [How do I leave room for a headline in an AI image?](https://www.imagequarry.com/faq/how-do-i-leave-room-for-text-in-an-image/)

## Related questions

- [How do I leave room for a headline in an AI image?](https://www.imagequarry.com/faq/how-do-i-leave-room-for-text-in-an-image/): Name where the empty space goes and how big it is.
- [Should I save an AI image as PNG or JPEG?](https://www.imagequarry.com/faq/png-or-jpeg-for-ai-images/): PNG for text, graphics and further editing; JPEG for photos where size matters.
- [What is the difference between 16:9 and 9:16?](https://www.imagequarry.com/faq/what-is-the-difference-between-16-9-and-9-16/): Same shape, turned: 16:9 is wide, 9:16 is tall.
- [What resolution are AI-generated images?](https://www.imagequarry.com/faq/what-resolution-are-ai-images/): Often about 1 megapixel by default; some models offer 2K or 4K.
- [Should I crop or extend an image to change its aspect ratio?](https://www.imagequarry.com/faq/crop-or-extend-to-change-aspect-ratio/): Crop when there is room to lose; extend when there is not.

Last reviewed 2026-10-20 by ImageQuarry.

## Make a hero with room for the words

Describe the scene and the empty space for your headline, then refine it.