A web page hero image is prominent imagery near the top of a page that helps establish its subject, mood, or context. A good one fits the page, still works when the layout and crop change, and does not hide important text inside the image. There is no universal hero-image size: choose dimensions and delivery based on the design and the screens you need to support.
What a hero image does
A hero image is the large, prominent image used near the top of a web page, often alongside or behind its main heading. It helps visitors quickly understand the page and gives it a visual tone. The U.S. National Science Foundation describes its hero component as a large, full-width image at the top of a page; that is one organization’s design system, not a universal definition or mandatory layout. NSF hero-image guidance
Think of a hero image as part of the page’s composition, not a fixed-size decoration. It might be a photograph, illustration, or other visual that supports the page’s purpose. If readers need to inspect fine detail—such as a chart, map, or diagram—a broad hero crop is usually the wrong presentation. NSF advises treating its hero imagery more like wallpaper than a detail image.
Choose the image and crop for the page
Start with the page’s purpose and the message its visual should reinforce. Select an image with a clear subject and enough visual space for the heading and any other overlay content. Then check how it behaves at the actual layout breakpoints: a wide desktop crop may cut off the subject on a narrow phone screen, while a subject placed at the edge may sit underneath text.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Use imagery relevant to the specific page rather than a generic visual that could belong anywhere.
- Keep the focal subject visible at narrow and wide viewport sizes; adjust the crop or use alternate sources when necessary.
- Check overlay text against both bright and dark parts of the image. Add a suitable overlay or background treatment if needed, and assess readability in the actual design.
- Do not put essential information, headlines, or calls to action only inside the image.
Dimensions depend on the layout, source quality, and expected displays. As a concrete example, NSF recommends 1920 × 1080 pixels (16:9) as its preferred full-size hero image for high quality on large monitors, and gives 1366 × 768 pixels as a smaller usable example at the same ratio. These are NSF-specific recommendations, not an industry standard. NSF hero-image guidance
Make the hero accessible
Use HTML text for headings and actions
Render the headline and call to action as page text, not as pixels baked into the image. Text embedded in an image can be cropped, obscured, or pixelated, and it is less useful to visitors who need assistive technology or adjust text size. Keep the copy in HTML and check that any overlay remains readable over the image. NSF hero-image guidance
Write alt text according to the image’s purpose
If the image conveys information that matters to the page, provide concise alt text that describes its relevant content in context. If it is purely decorative and the surrounding text already carries the message, use an empty alternative: alt="". Do not stuff keywords into alt text. The W3C WAI Images Tutorial explains how to choose text alternatives, and Google’s image guidance also recommends useful, contextual descriptions.
Serve responsive images without wasting bandwidth
Use an HTML <img> when the image is content. Google says it can discover images in an image element’s src, whereas it does not index CSS background images. A background image may suit purely decorative art, but it is not a substitute when the image itself matters. Provide a fallback src and responsive candidates through srcset or <picture>, so the browser can select an appropriate asset for the layout. Google image SEO guidance · web.dev responsive images
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Set the image’s intrinsic width and height. The browser can use them to reserve space while the image loads, reducing unexpected layout shifts. Optimize files for the quality the design needs rather than sending a needlessly large desktop asset to every device. Google notes that images can contribute substantially to page weight. Chrome HTML guidance · Chrome image optimization guidance
This illustrative markup assumes you have generated the named image files and that the image is meaningful. Adjust the candidates and sizes to match your actual layout; the example is not a universal configuration.
<img
src="hero-1200.webp"
srcset="hero-480.webp 480w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 80vw"
width="1200"
height="675"
alt="A cyclist riding beside the coast"
>If the image is only decorative, use alt="" instead. If you need art direction—for example, a different crop on small screens—use <picture> with a suitable fallback <img>. Keep the image files, their dimensions, and the declared aspect ratio consistent with the design.
Load an above-the-fold hero at the right time
Lazy loading defers image loading until it is near the viewport. That is useful for images farther down the page, but a hero visible immediately on page load should generally not be lazy-loaded: deferring it can delay the image visitors see first. If the hero image is the page’s actual Largest Contentful Paint (LCP) element, consider assigning it higher fetch priority. Do not apply high priority to every image; first confirm which resource is the LCP element on the real page. Chrome HTML guidance · Chrome image optimization guidance
Recommended Free Tools
Rank #3
For a likely above-the-fold LCP image, the earlier example can include fetchpriority="high". Treat that as a decision to validate, not a default to copy blindly. Omit it when the image is not the page’s critical LCP resource. Use loading="lazy" for appropriate off-screen images, not for the visible hero.
Set search and social preview images separately
The page’s hero and its search or social preview image can be the same asset, but they serve different presentation contexts. Google’s preview selection is automated: publishers can provide signals such as schema.org primaryImageOfPage or the og:image metadata property, but cannot guarantee which image Google will display. Choose an image relevant to the page; Google advises against generic logos and text-heavy images and recommends avoiding extreme aspect ratios. Google image SEO guidance
Open Graph is a protocol for representing a web page as a rich object in a social graph, and its metadata includes image information. It does not establish a universal hero-image dimension. If exact social crops matter, check the current display guidance for the particular platform. Open Graph protocol
Check the finished hero before publishing
- Test the real layouts. Inspect the crop, focal point, heading placement, and text readability at the narrow and wide viewport sizes your page supports.
- Check the content alternative. Confirm meaningful images have contextual alt text and decorative images use an empty alt attribute.
- Inspect delivery markup. Verify the fallback
src, responsive candidates,sizes, and intrinsic dimensions describe the files and layout you actually serve. - Review loading behavior. Do not lazy-load a visible hero. Apply high fetch priority only when the hero is the actual critical LCP resource.
- Check previews independently. Set relevant preview metadata if needed, then remember that Google chooses previews automatically and may not use the preferred image signal.
Troubleshooting common hero-image problems
The subject disappears on mobile
The desktop crop may not suit a narrow viewport. Reposition the crop or supply an alternate composition using responsive art direction. Test the result at the actual breakpoint rather than assuming a centered crop will preserve the subject.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The headline is hard to read
Move the HTML text to a clearer area, add a contrast treatment behind it, or choose a better-suited image. Do not solve the problem by baking the headline into the image; that makes the copy less adaptable and accessible.
The page shifts as the image loads
Set correct width and height attributes so the browser can reserve space. If the displayed crop has a different ratio, ensure the styling and reserved aspect ratio reflect the actual layout.
The hero appears late
Check whether it is incorrectly marked for lazy loading. If it is the page’s LCP element, consider appropriate fetch priority, then verify performance on the actual page. Avoid raising priority for unrelated images.
The wrong image appears in a search preview
Review the page’s image relevance and preview signals, including og:image or primaryImageOfPage where appropriate. Google’s choice remains automated, so metadata indicates a preference rather than guaranteeing a result.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Or skip the browser setup
If you need to inspect the rendered hero across pages or viewport settings, ScreenshotNeo can return a screenshot through one GET request. Its capture flow accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. It also provides an MCP server for AI agents with take_screenshot, get_page_info, and capture_pdf. ScreenshotNeo
Example request (replace the URL with your page and the key with your API key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. Sign up free for ScreenshotNeo.
Frequently Asked Questions
Can a hero image be a CSS background?
It can be appropriate for purely decorative imagery. For a meaningful image, prefer an HTML image element so it can have an appropriate text alternative and be discovered through its source.
Does adding og:image guarantee that image appears in Google?
No. It is a preferred-image signal; Google selects previews automatically.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
