Question
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.
Related questions
Last reviewed October 20, 2026 by ImageQuarry
Create an image. Edit it with words. Keep refining.
Make a hero with room for the words
Describe the scene and the empty space for your headline, then refine it.
Start creatingAlready have an account? Sign in