Should the hero image be my LCP, or should I lazy-load it?

If the image is above the fold, it will be your LCP whether you plan for it or not — so never lazy-load it. Give it a priority hint and correct dimensions so it paints early. Lazy-loading an above-the-fold hero is one of the most common Core Web Vitals mistakes I fix.

Is a stock photo really that bad for a hero?

For a placeholder, no. For a brand a stranger needs to remember, yes. Stock says nothing that is only yours, and the popular ones carry huge file sizes. A right-sized custom photo, an illustration, or a type-led hero usually looks more distinct and loads faster.

How big should the hero image file be so it doesn't slow the page?

Ship a modern format (AVIF or WebP), size it to the actual rendered dimensions with responsive sources, and aim well under a few hundred KB for the fold. The number that matters is how fast it paints on a mid-range phone on LTE, not the resolution on your monitor.

Can I put the headline text over the image, or should it be separate?

Keep the headline as real HTML text laid over the image, never baked into the picture. Text paints instantly, stays sharp, is readable by search engines and screen readers, and lets the image and words load independently. Text welded into an image loses all of that.

Do I need a video or WebGL hero to stand out?

Only if the craft is the product. Motion earns memory but costs load time, so it has to mount after the fold has meaning. Plenty of the strongest heroes are a single strong image, a sharp headline, and one clear CTA. Spectacle is a choice, not a requirement.

Can you rebuild just my hero without touching the rest of the site?

Often yes. A hero rebuild — new image strategy, headline, CTA placement, and the performance fixes to keep it fast — is a common surgical commission, not a full rewrite. Send me the URL and I will tell you whether it is a swap or a bigger job.

What does the composer above actually give me?

A layout you arrange yourself — image, headline, and CTA — so you can see the composition and its tradeoffs before hiring anyone. It runs in your browser, needs no email, and the output is something concrete to attach to the contact form so scope starts from a real artifact.

The fold is the whole game

First paint and first impression happen in the same instant. Compose it below.

Your hero image loads first — and sells first.

You searched "hero image website" because the top of the page is where the decision gets made. A visitor forms an opinion before they scroll, and Google clocks your load time at the same spot. Your hero image is doing two jobs at once: it is the first thing a person judges, and it is almost always the Largest Contentful Paint.

Most heroes fail one job to serve the other. A big, gorgeous photo that paints in four seconds. Or a fast page wrapped around a stock image that says nothing anyone remembers. The composer below lets you lay out image, headline, and CTA and see the tradeoff before you commission anything.

I'm David Weaver — engineer, novelist, Roblox developer, based in Columbus, Georgia and working remotely. I built the live WebGL loom on this site's homepage: it loads without ever blocking the headline. Same discipline goes into every hero I ship.

Compose your hero: image, headline, CTA

Hero layout composer — before / after

Pick a composition. Toggle before (template) vs after (craft). The layout is half the conversion story — the other half is the words and the motion.

One sentence that earns the click

Specific outcome. Specific buyer. Specific proof.

Start the project

Copy left / media right — best for: Product demos, apps, clear CTAs

Compose my hero See everything I've shipped

Two jobs, one element

The hero image is the first thing a visitor judges you on, and it is almost always the element Google measures as your LCP — the moment the browser calls the page "loaded." When those two jobs collide, most sites lose both: the image looks nice and paints slowly, so the page feels cheap even though it looks expensive.

The fix is unglamorous. The headline is real text, not letters baked into the image, so it paints instantly and search engines can read it. The image is responsive, compressed to a modern format, and priority-loaded so it is the next thing on screen, not the last. The CTA sits where the eye lands after the headline. Place those three well and the fold does both jobs at once.

Four parts of a hero, and the job of each

The composer above arranges these. Each one has a single job — get any one wrong and the fold leaks conversions:

The image
Sets the mood in a glance and carries your LCP. It has to feel like yours and paint fast, or it costs you on both counts.
The headline
The one sentence a visitor must believe. Real text, not baked into the picture, so it paints first and reads as content.
The support line
One clause that removes the biggest objection or names who it is for. Optional, but it earns its line when the headline can't say everything.
The CTA
Placed where the eye lands after the headline, worded as the outcome the visitor wants — not a generic "Submit."

Hero media, ranked by what it costs your LCP

Same fold, four ways to fill it. Pick for the job, not the trend.

Hero media	Best when	LCP cost	Memory
Stock photo	Placeholder or tight budget	Low if sized right	Near zero — everyone has it
Custom photo or art	You have a real product, face, or place	Low to medium	High — it is only yours
CSS / SVG / type-led	Speed-critical, brand carried by words	Lowest	Medium to high
Video or WebGL	The craft itself is the product	High — must load after the fold	Highest, if it never janks

LCP is the largest thing painted above the fold — usually the hero image or the headline. Anything heavier has to load after that paint, or the score drops and the page feels slow.

The image is where most heroes go generic

A stock photo of a smiling team around a laptop tells a visitor nothing they will remember tomorrow. The moment your offer needs a stranger to recall you — to come back, to trust you over a competitor — a default image becomes a tax you pay on every visit.

The alternatives are not more expensive to load. A real photo of the actual product, a made-for-you illustration, or a hero built from type and color with no photo at all can all beat stock — and usually paint faster, because you control the file instead of inheriting someone else's 900KB JPEG.

How I build the hero

I treat the hero as a performance budget, not a mood board. The headline ships as server-rendered text and is the LCP target. The image goes out at the right dimensions in a modern format with an explicit priority hint, so it paints early on purpose. Nothing decorative — motion, secondary media, anything below the fold — mounts until the headline has meaning.

You can watch that discipline run on the homepage: a live WebGL loom you can pull apart, loaded so it never delays the first paint. That is the proof I would rather show than describe. Open /work for more — live products, playable Roblox games, published books — and judge the craft before you send a dollar.

Proof over promises

Open the work. Judge it live.

2026 · Software · Prototype

BABA Smoke Shop

A local-business marketing site for a Columbus, GA smoke shop. No backend, complete local-SEO metadata, and deliberate restraint.

2026 · Software · Shipped

Black Nile

A conversational website builder where small businesses talk, a site appears, and their own AI answers customers — metered to the credit.

2026 · Games · Prototype

Buena Vista Beach

A coastal life-RP sandbox where skipping the light bill darkens your windows.

Straight answers

Asked often. Answered honestly.

Should the hero image be my LCP, or should I lazy-load it?: If the image is above the fold, it will be your LCP whether you plan for it or not — so never lazy-load it. Give it a priority hint and correct dimensions so it paints early. Lazy-loading an above-the-fold hero is one of the most common Core Web Vitals mistakes I fix.
Is a stock photo really that bad for a hero?: For a placeholder, no. For a brand a stranger needs to remember, yes. Stock says nothing that is only yours, and the popular ones carry huge file sizes. A right-sized custom photo, an illustration, or a type-led hero usually looks more distinct and loads faster.
How big should the hero image file be so it doesn't slow the page?: Ship a modern format (AVIF or WebP), size it to the actual rendered dimensions with responsive sources, and aim well under a few hundred KB for the fold. The number that matters is how fast it paints on a mid-range phone on LTE, not the resolution on your monitor.
Can I put the headline text over the image, or should it be separate?: Keep the headline as real HTML text laid over the image, never baked into the picture. Text paints instantly, stays sharp, is readable by search engines and screen readers, and lets the image and words load independently. Text welded into an image loses all of that.
Do I need a video or WebGL hero to stand out?: Only if the craft is the product. Motion earns memory but costs load time, so it has to mount after the fold has meaning. Plenty of the strongest heroes are a single strong image, a sharp headline, and one clear CTA. Spectacle is a choice, not a requirement.
Can you rebuild just my hero without touching the rest of the site?: Often yes. A hero rebuild — new image strategy, headline, CTA placement, and the performance fixes to keep it fast — is a common surgical commission, not a full rewrite. Send me the URL and I will tell you whether it is a swap or a bigger job.
What does the composer above actually give me?: A layout you arrange yourself — image, headline, and CTA — so you can see the composition and its tradeoffs before hiring anyone. It runs in your browser, needs no email, and the output is something concrete to attach to the contact form so scope starts from a real artifact.

Compose your hero above, then send it with the form (thread: An app). I'll reply with a written, itemized plan to build it — free, from the builder.

Start the commission See everything I've shipped