Lazy-loading the hero image, which delays the single element the browser is measuring for Largest Contentful Paint.
Photo types and platforms
Hero image
Also called hero banner, above the fold image or key visual. Here is what it means, when it changes what you export, and what people get wrong.
Photo types and platformsRuns on your deviceUpdated 10 August 2026
The short answer
A hero image is the large lead visual at the top of a page, usually the first thing a visitor sees. Because it is big and loads early, it is commonly the element browsers measure for Largest Contentful Paint, which makes its file size and format a performance decision as much as a design one.
Updated
The short version
Hero image at a glance
| Quick fact | Detail |
|---|---|
| Typical role | Largest Contentful Paint element on the page |
| Loading | Load eagerly, never lazy-load the hero |
| Format choice | AVIF or WebP, with JPEG fallback |
| Export ladder | Mobile, tablet and one or two desktop widths |
| Text safe zone | Central band, away from the cropped edges |
Slide the table sideways to see every column.
Why does the hero image decide your page speed?
Largest Contentful Paint measures when the biggest visible element in the viewport finishes rendering. On a page that opens with a full-width image, that element is almost always the hero. Every kilobyte in it delays the moment the page is judged to have loaded.
Three levers matter, roughly in order of effect.
- Dimensions. Serve an image sized for the slot, not a 6000 px camera original scaled down by CSS. The browser downloads the full file either way.
- Format. WebP and AVIF both reach smaller files than JPEG at comparable quality, with JPEG or PNG as a fallback.
- Loading behaviour. The hero should load eagerly and early. Lazy-loading it is a common own goal, because it delays the one image that is guaranteed to be seen.
How many sizes should you actually export?
A phone in portrait and a desktop monitor differ by several times in width, so one file cannot serve both well. A workable ladder is a narrow mobile export, a mid tablet export and one or two desktop widths, offered through responsive image markup so the browser picks.
There is a second decision underneath that, and it is the one people skip. Simple scaling ships the same composition at every width. Art direction ships a different crop, usually tighter and more vertical on mobile, because a wide landscape scene shrunk to phone width leaves the subject a few pixels tall.
| Simple scaling | Art direction | |
|---|---|---|
| What changes | Pixel dimensions only | Crop, and sometimes the subject |
| Effort | One master, resized | A deliberate crop per breakpoint |
| Best for | Textures, patterns, loose scenes | Faces, products, anything with one subject |
Where should the text overlay sit?
Inside a safe zone that survives every crop. As the viewport narrows, most hero containers keep their height and lose width from the sides, so anything positioned near the left or right edge is the first thing to disappear.
Keep headline and call to action within the middle band horizontally, and give them a background that guarantees contrast: a gradient scrim, a darkened panel or a section of the photograph that is deliberately flat and empty. Text placed straight onto a busy photograph will be legible on your monitor and unreadable on somebody else's phone in daylight.
What people get wrong about hero image
Each one is a real failure mode, not a style preference.
Uploading a full-resolution camera file and letting CSS scale it, so mobile visitors download several megabytes they never see.
Placing the headline near the left edge, where the mobile crop cuts it off.
Choosing a busy photograph and then discovering no text colour is readable anywhere on it.
Questions people ask
Hero image, answered
The follow-up questions people search for once they have the definition.
What size should a hero image be?
Size it to the widest container it fills, not to your camera's output. For a full-width desktop hero, an export around 1920 px wide is a common ceiling, with narrower versions for tablet and phone. Doubling that only helps on very high-density displays and doubles the download.
Should a hero image be JPEG, WebP or AVIF?
AVIF or WebP for the modern path, since both reach smaller files than JPEG at similar quality, with a JPEG fallback for anything that cannot decode them. Use PNG only if the hero needs genuine transparency or is flat graphic artwork.
How do I stop the page jumping while the hero loads?
Reserve the space before the image arrives, by setting width and height attributes or a fixed aspect ratio on the container. Without that the browser does not know how tall the image will be, so everything below it shifts down when it appears.
Is one hero image enough for all screen sizes?
Rarely. One file either wastes bandwidth on phones or looks soft on desktop. Export at least three widths, and where a single subject matters, crop separately for narrow screens rather than shrinking the whole scene.
Same cluster
More from the glossary
Neighbouring entries, so every term in the set is one hop from every other.
From the studio
Tools that do this
Each one runs on your own device, so the photo stays where it is.
Sources
Where the facts on this page come from. Every link opens the specification, standard or documentation the claim was read at.
Keep reading
Elsewhere on Photomop
Platform image rules
Image size, file type and background rules for 22 selling platforms, each one sourced.
Read itConvert image
JPG, PNG, WebP and AVIF, with an honest answer about HEIC and alpha.
Read itAll the tools
The whole toolbox in three families, with what each one needs before it can run.
Read itOn-device privacy
The pipeline in five steps, what leaves your device, and how to check it yourself.
Read it
Now do it to a photo
Photomop is a photo studio that runs on your own device. Resize, crop, compress, convert, batch edit, remove a background and change one all work in the browser tab you are reading this in, at full resolution and with no watermark. The on-device page shows you how to check that the photo stays put.