Hero Image

When you open a webpage, at first you only see the topmost section. Everything else you have to scroll down to see. Designers often place a single large image right in this topmost section. This image is called a hero image, which translates roughly to “hero picture.” The name doesn’t say anything about the content, only about its role: it’s the star of the show and usually wider and taller than any other image on the page. Often there’s a short headline over it along with a button leading to the next step.

The first seconds decide

People judge a webpage extremely quickly. Studies speak of fractions of a second for the first impression. In that time, nobody reads a paragraph. An image, on the other hand, is grasped instantly. That’s why the hero image carries a large part of the message: Is this a bank or a music festival? Does it look serious or cheap?

For companies, real money is at stake here. Those selling software like to show the program itself in action up top. Those selling travel show a beach. Companies systematically test such images against each other: two groups of visitors see different variants, and afterward it’s compared which group bought more. This procedure is called an A/B test. Differences of just a few percent in sales already count as a success.

However, there is also criticism. A huge image pushes all the information further down, out of view. Some users scroll right past it without even looking at it, because they take it for an advertisement. So a hero image isn’t automatically a win — it’s a decision with pros and cons.

How such an image is delivered technically

A hero image has to be sharp on a large monitor and still load quickly on a phone. Doing both at once is difficult. That’s why developers store the same shot in several sizes. The browser, meaning the program you use to surf the internet, then selects the appropriate version for the respective screen.

File size is also important. An unedited photo can be several megabytes and take seconds to load over mobile data. Modern image formats like WebP or AVIF store the same picture much more efficiently, often with half the data or less. In addition, developers explicitly tell the browser that this particular image should be prioritized and loaded first. Other images further down can wait until you scroll to them.

A typical mistake is the layout jump. If the space for the image isn’t reserved in advance, the text shifts downward as soon as the image arrives. Google measures exactly this and ranks pages with such jumps lower. That’s why width and height are fixed from the start. Another point is the alt text: a short description of the image that blind users can have read aloud to them.

From online shops to AI image generation

You encounter hero images pretty much everywhere. The homepage of a sneaker shop shows a close-up of a model at the top. News sites place a wide photo above the main text. The announcement pages of major tech companies for a new phone also follow this pattern. When an article about web design mentions the “above the fold” area, this exact top section is what’s meant.

In recent years, the origin of such images has changed. In the past, people bought photos from stock image databases or booked a photographer. Today, many editorial and marketing teams generate their hero images with image generators, meaning AI programs that compute a new image from a text description. This is cheap and fast, but it raises questions about copyright and labeling.

You shouldn’t confuse the hero image with the preview image that appears when someone shares a link in a chat. This preview image is set separately and is often a different picture. Both serve the first impression, but they sit in different places: one on the page itself, the other outside of it.