Hero images are the web's prettiest dead weight: slow, vague and overused. It is time to stop decorating the homepage and start saying something that actually matters.
There is one pattern that has haunted web design for more than a decade, so embedded in our workflows that questioning it feels like blasphemy.
The full-bleed hero image.
You know the one. You have designed it. You probably reach for it in Figma without thinking. A big, bold visual at the very top of the homepage. Maybe an atmospheric photo of a workspace, or a startup founder walking and talking. Maybe a vague slogan like "Powering the Future." Maybe a ghost CTA button floating in a corner, hoping someone will click it.
We convince ourselves this kind of design "makes an impression". That it grabs attention. That it conveys the brand's mood and values instantly.
But strip away the visual gloss and what is left is often an empty first impression: slow performance, little information, poor accessibility and a dull sameness. In reality, the hero image has quietly become one of the most misused and misunderstood elements of modern web design.
And it is time to re-evaluate it.
Let's look back. In the early 2010s, as responsive design took off and high-resolution screens went mainstream, the hero image felt fresh. Cinematic. Engaging. Inspiring. Suddenly the homepage felt like the opening scene of a film.
But like most trends, the hero image became a commodity. It stopped being a creative decision and became the default.
It appeared in every template, every pitch deck, every "modern" SaaS homepage. What was meant to create emotional resonance turned into a crutch, a substitute for a content strategy that was never really written.
Today, more often than not, the hero image doesn't communicate. It decorates. Distracts. Delays!
There is a reason your LCP (Largest Contentful Paint) is bad. And the culprit is probably in the hero section.
In many cases, a high-resolution JPEG or an autoplaying background video in the hero is the single biggest element holding up the page render. It doesn't matter how clean your CSS grid is or how clever your JavaScript; if your hero image is 2 MB and loads above the fold, you have already lost the performance game.
And performance isn't only a developer problem. It is a design decision too. Designers who ignore performance metrics are designing in a vacuum. You may win awards, but users wait five seconds just to see a stock photo of a cup of coffee.
That isn't storytelling. It is sabotage.
But even when performance is perfect (which almost never happens), there is a bigger sin: abstraction.
Too many hero images are paired with slogans so abstract they sound like parody. "Empowering Possibility." "Where Innovation Meets Impact." These phrases sound neat in a vacuum but in practice say nothing.
It is the visual equivalent of small talk. You have three seconds to catch the user's attention and tell them what you do, and you spend them showing an aerial cityscape?
That isn't just lazy. It is dishonest. Because when users open your site and can't immediately understand what you offer, who it is for and why it matters, they leave. No matter how beautiful your typography is.
Then there is mobile.
On a big desktop screen, the hero image still has room to breathe. There is space for composition and cropping. But squeeze that layout into a 390px viewport and everything falls apart. Text overlaps. The CTA sinks below the screen. That perfect rule-of-thirds composition? Gone.
In reality, the mobile hero is often just a useless half-screen image that pushes important content down.
Designing for mobile isn't just a responsive breakpoint; it is about context of use. And on a phone screen, a big abstract image is often the least useful thing you can show.
This is where it gets worse. The hero section is often where accessibility gets ignored.
Text over photos rarely passes contrast checks. Background videos autoplay without pause controls or captions. Images carrying important content are marked as decorative. And semantic structure is thrown away to cram an H1 into a container screen readers can't reach.
The sad part? These are all solvable problems. But they rarely get solved, because the hero image is treated as a visual asset, not a content container.
And when visuals are put before meaning, people with disabilities are the first to be shut out.
Here is the harsh truth: most hero images exist because nobody knew what else to put there.
It is the most expensive real estate on the page (the top of the homepage, the first impression, the scroll-stopper) and what we put there is... a photo. Not because the photo means anything, but because the message isn't ready. The value proposition isn't clear. The product is hard to explain. So we show a cityscape, write something ambiguous and hope users are patient enough to scroll down.
The hero image isn't the enemy. But it is now often used to avoid the hard work of explaining clearly.
It disguises indecision. It hides an unfinished message.
It delays the moment when the product has to speak for itself.
No, we don't have to ban all images. Visuals still have a place, when they earn it.
A good homepage should start with clarity. When someone lands on your site, they should be able to answer three questions within seconds:
What is this? Who is it for? Why should I care?
If your hero section answers those questions, visually or in text, you are on the right track. But if you are relying on an abstract image to do all the work, it is time to reconsider.
No rule says your site must have a big banner. You can start with a strong headline, a concise subhead and a simple image that supports the message instead of distracting from it. You can show the product in use. Feature a real customer story. Go straight to an interactive demo, or even straight to navigation.
Because in the end, design isn't just about looking beautiful; it is about what actually works.
And for more and more sites today, the hero image no longer works.
