| Decision | Supported value | Planning use |
|---|---|---|
| Home page hero (top crop) | 3360 px wide by 1560 px high | Reserve this tallest crop for the home page, the only page the UCSB guide allows it on. |
| Landing page hero | 3360 px wide by 1200 px high | Works for landing pages or the home page when the headline and first content block need to share the opening screen. |
| Interior page hero | 3360 px wide by 960 px high | Use the shortest crop on inner pages so the content starts higher. |
| Upload weight | 1 MB or smaller | Compress before upload; large, high-resolution files can cause performance problems. |
| Desktop starting area | 1,200 px wide, 16:9 aspect ratio | A starting point for the banner area, not a fixed rule. |
| Small-screen starting size | 800 x 1,200 px, scaled down from there | Begin with a taller, narrower file for phones rather than squeezing the desktop crop. |
Dimensions come from the UCSB Web Theme hero image guide, while the desktop and small-screen starting points come from Ramotion’s hero image article.
What is a hero image on a website? A large photo, illustration or composition in the above-the-fold zone at the top of a page. Its size and file weight decide whether it helps or slows the page.
If you are planning a whole image-led layout rather than one banner, start with our guide to web design with images best practices.
What a hero image changes on the page
A hero image changes how fast the page feels, how the first screen reads on a phone, and how clearly visitors grasp the page’s purpose. Each effect is a decision you make before you pick a picture.
Speed is the biggest consequence. SmithWorks notes that the hero area often contains the largest visual element on the page, and that if that asset loads slowly, the entire page can feel slow. That is why Largest Contentful Paint (LCP), the speed metric tied to a page’s largest visual element, is where a heavy hero shows up first. Prismic adds that the first three seconds of page load are crucial, and that the essential items in the hero section should appear instantly.
The UCSB guide goes further and warns that large, high-resolution images may cause performance issues and could possibly cause other site errors. It gives no threshold beyond its file-size advice, so treat the size table above as a ceiling to stay under rather than a target to reach.
These effects translate into a few practical choices:
- Weight over resolution. A hero that looks sharp but arrives late does more harm than a lighter image that appears at once. Compress first, then judge quality.
- Crop for the smallest screen too. SmithWorks points out that a wide desktop image may crop awkwardly on a phone, so a subject placed at the edge of a wide frame can disappear.
- Purpose before picture. The same source says the design and elements of a hero banner should depend on the goal you are trying to accomplish. Decide whether the page should inform, sell or invite a click, then choose the visual.
Choosing hero size and crop by page type
Hero dimensions depend on the page, not on a single universal number. The clearest published guidance comes from the UCSB Web Theme, which sets three crops and refuses uploads that do not match one.
Dimensions for home, landing and interior pages
The UCSB guide sets a home-page-only crop of 3360 px wide by 1560 px high, a landing-or-home crop of 3360 px by 1200 px, and an interior-page crop of 3360 px by 960 px. The width stays constant while the height shrinks as pages become less important. It is a workable pattern for any site: the further a page sits from the front door, the less vertical space the banner deserves.
These are one institution’s template rules, so use them as a model for proportion rather than a web standard. If you build your own layout, Ramotion suggests starting with a banner area 1,200 pixels wide at a 16:9 aspect ratio and adjusting from there. Pick the UCSB style if you want a ready-made scale of three heights; pick the simpler 16:9 start if you are designing a single hero from scratch.
Phones and tablets
Ramotion says small screens need design attention to avoid full-screen images, and suggests starting at 800 x 1,200 pixels and sizing down slowly. It also lists aspect ratios by device: 4:3 for phones, 3:2 for smart devices, and 16:9 for tablets and laptops. Treat these as starting ratios to test rather than guarantees, since real screens vary.
In practice this is a responsive images problem. Prepare a separate crop for narrow screens, keep the subject near the centre, and let the page deliver the right file to each device instead of shrinking one wide image. The crop for a phone is a design decision, not just a smaller export.
When not to use a hero image
Skip or shrink the hero when the page has a job that a big picture would get in the way of. The evidence points to a few clear cases.
- Booking and form-first pages. Ramotion observes that booking websites always sacrifice a full-width hero image to have a booking form. If the visitor’s next action is filling in fields, put the form where the picture would be.
- Small screens with limited space. The same article warns that phones and tablets need design help to avoid full-screen images. On a phone, a hero that fills the screen pushes the headline and call to action out of view.
- Performance-sensitive pages. If you cannot get the file small enough, the UCSB warning about high-resolution images applies. A lighter, simpler visual or a plain text opening is the better choice than a heavy hero that delays everything else.
- Pages with no clear goal. Because hero design should depend on what you want visitors to do, a decorative image with no job on the page is a good candidate for removal.
What counts as a hero image
A hero image is the large visual placed at the top of a page. The UCSB theme describes hero images as always positioned at the top of the page and allowing full-width images. Ramotion describes a photo, illustration or composition located in the above-the-fold zone. SmithWorks uses the term hero banner for the large, high-visibility section at the top of a website page. Prismic uses hero section for the prominent element visible without scrolling, whose visual is often an image, video or animation that should reinforce the brand.
The word itself comes from the theatre, according to Foxxr, which says the term was first used in the world of theater.
Photo, lifestyle and product heroes
Foxxr separates several styles. Product showcase heroes feature a product prominently, which suits shop and catalogue pages. Lifestyle heroes show a product or service in a real-life context, which suits offers where the situation of use sells the idea. Both rely on photography, so both inherit the weight and crop issues covered above.
Illustration, video and animation
Some hero images use illustrations or graphic designs instead of photographs, and Foxxr notes that more websites now use video or animated hero images to create a dynamic first impression. Choose an illustration when you want a distinctive look without photo weight concerns; choose motion only when it explains something a still cannot, because moving media is the hardest format to keep light.
Keeping a hero image fast and understandable
The most reliable way to stop a hero image slowing the page is to compress it, keep the upload small and avoid loading anything heavy that is not needed straight away. Prismic recommends compressing images and lazy-loading background videos so that essential items in the hero section appear instantly. The UCSB guide gives a concrete weight cap: try to upload only photos with a file size of 1 MB or smaller.
Work through these checks before publishing:
- Match the crop to the page. An oversized home-page crop on an interior page adds pixels that nobody sees.
- Compress, then compare. Reduce the file until the image still reads well at its displayed size, and stop there.
- Defer background video. If the hero uses video, lazy-load it so the still elements and headline appear first.
- Watch LCP. Because the hero is often the largest visual element, it usually sets the page’s LCP; if that metric is poor, the hero is the first place to look.
Add descriptive alt text when you upload, so the message the hero carries is not lost for visitors who cannot see it. Keep any headline as real page text rather than baking it into the image file.
Hero images on portfolio sites
Portfolio sites lean heavily on the first screen because the work itself is visual. The same size and weight rules apply, and the cost of a heavy hero is just as real. For how those choices play out on specific site types, see Web Developer Portfolio Website: How To Build A Standout Portfolio In 2026 – Imagesup and Build A Standout Photography Portfolio Website: A Practical Guide For 2026 – Imagesup.
Frequently asked questions
Is a hero image the same as a hero banner or hero section?
They overlap. The image is the visual itself, a hero banner is the large section at the top of the page, and Prismic’s hero section is the prominent element visible without scrolling, often an image, video or animation.
Why is it called a hero image?
Foxxr says the term was first used in the world of theatre before it moved into web design.
Can a hero be a video instead of a photo?
Yes. Prismic describes the hero visual as often an image, video or animation. If you use background video, lazy-load it so the essential hero items still appear instantly.
Does one hero image work for every page?
Usually not. The UCSB theme uses a different crop for home, landing and interior pages, and a wide desktop image can crop awkwardly on a phone, so prepare crops that match both page and screen.
