Hero Images Best Practices
for Web Design 2026
The hero image is the most important visual element on any website — and also the one most likely to destroy your page speed if done wrong. It forms the first impression, drives the emotional response that determines whether users scroll, and is almost always your LCP element. This complete guide covers every dimension of hero images best practices in 2026: dimensions, format, optimization, text overlay, mobile cropping, and what actually works for conversions.
📋 Table of Contents
Hero Image Dimensions and Specs
Following hero images best practices starts with getting the dimensions right. Use the table below as your reference for every breakpoint in 2026:
| Context | Dimensions | File Size Target | Format |
|---|---|---|---|
| Desktop hero (standard) | 1920×800px | Under 200KB | WebP |
| Desktop hero (retina 2×) | 3840×1600px | Under 400KB | WebP |
| Mobile hero (portrait) | 390×600px | Under 100KB | WebP |
| Mobile hero (retina 2×) | 780×1200px | Under 200KB | WebP |
| Tablet hero | 1024×600px | Under 150KB | WebP |
The 1920×800px desktop size covers virtually all widescreen monitors without wasting bytes on oversized files. The 800px height is the key number in these hero images best practices — it keeps the banner tall enough for visual impact while ensuring the headline and CTA remain visible above the fold on smaller laptop screens. Taller designs risk pushing CTAs below the fold on 13-inch displays.
Format and File Size
In 2026, WebP is the standard format for all website banners and landing page visuals. Browser support is universal across Chrome, Firefox, Safari, and Edge. AVIF is now supported in all major browsers and offers 20–30% better compression than WebP at the same quality — but encoding is significantly slower, making it less practical for manual workflows without an image CDN.
For manual optimization without a CDN, WebP at Quality 80 is the proven target following current best practices:
- A 1920×800px JPG original → WebP Quality 80 → typically 120–180KB (down from 1–3MB original)
- This size achieves the LCP “Good” threshold under 2.5s on most mobile connections
- Use our JPG to WebP converter and Image Compressor to hit these targets in under 2 minutes
Hero Images and LCP: The Critical Link
The banner image at the top of your page is almost always the LCP element — Google’s primary speed metric that directly affects search rankings. This makes following hero images best practices a dual-purpose requirement: the visual must be compelling for user experience and technically optimized for Core Web Vitals performance.
The two highest-impact LCP optimizations for your main banner:
The Most Common Hero Image Mistake
Adding loading="lazy" to the above-fold image. This is the single most common cause of poor LCP scores — it delays the largest visible element that is already in the viewport. Never lazy-load above-fold visuals. Only apply lazy loading to images that appear below the fold.
Text Overlay Best Practices
Most banner images have text overlaid — headline, subheading, CTA button. Among the most important hero images best practices is ensuring the underlying visual supports text without competing with it:
- Dark overlay gradient: a CSS linear-gradient from semi-transparent black at the text area is the most reliable technique and works on any underlying image
- Text-safe composition zone: compose or crop the image so one area — left side, center, or the full image when using an overlay — is naturally darker or lower in detail where text will be placed
- Minimum contrast ratio: WCAG AA requires 4.5:1 for normal text and 3:1 for large text — verify your actual contrast ratio using a contrast checker before publishing
- Test at mobile sizes: overlaid text must remain readable on small screens where the banner is compressed and fonts scale down
Mobile Hero Image Rules
One of the most overlooked hero images best practices is mobile cropping. A landscape banner at 1920×800px looks excellent on desktop but occupies only 200px of useful height on a 390px wide mobile screen — barely enough to perceive the image, and overlaid text is often rendered tiny or cropped completely out of view. Mobile requires a fundamentally different crop strategy.
Use our Image Crop tool to create the portrait mobile crop from your desktop banner. Center the primary subject, ensure the headline text zone is preserved, and export at 390×600px WebP under 100KB to meet mobile performance best practices.
UX: What Makes a Hero Image Convert
From a user experience standpoint, the banner image has one measurable job: make the visitor want to scroll. These characteristics define effective visuals based on research and A/B test data — and represent the UX layer of hero images best practices:
- Immediately communicates the page topic
- Authentic people with real expressions
- Subject looks toward or points at CTA
- Emotional tone matches brand promise
- Enough negative space for readable text
- High sharpness — no motion blur
- Consistent with overall brand visual style
- Separate portrait crop for mobile screens
- Generic stock: fake smiles, handshakes
- Unrelated to the page’s actual offer
- Low contrast making text unreadable
- Busy background competing with headline
- Autoplay video that damages LCP scores
- Carousel/slider that distracts from CTA
- Oversized unoptimized file destroying speed
- Landscape crop served directly to mobile
According to Nielsen Norman Group research on images as web content, users form an initial credibility judgment from the primary visual in under 50ms — before reading any text on the page. This makes the visual quality and authenticity of your banner one of the highest-leverage UX decisions on the entire site.
Video Heroes: Why to Avoid Them
Video hero backgrounds peaked around 2018–2020 and have declined steadily since — for concrete performance and UX reasons that conflict directly with current best practices. A typical looping background video adds 5–20MB of page weight versus 150–200KB for a well-optimized static banner. This pushes LCP past the 4-second “poor” threshold on most mobile connections.
Additionally, most mobile browsers block autoplay for video with audio, and many users have “reduce motion” accessibility preferences active. A video that does not autoplay on mobile — which now accounts for the majority of web traffic — provides zero benefit over a high-quality still image and actively harms both performance and accessibility compliance.
If Motion Is Important to Your Brand
Use a CSS animation or a Lottie (JSON) animation over a static banner image instead of a background video. CSS animations add near-zero page weight. Lottie files are typically 10–50KB for complex animations. Both fully support the prefers-reduced-motion accessibility setting. Neither harms LCP — making them the performance-safe alternative to video backgrounds.
Hero Images Best Practices Checklist
Use this checklist to verify every hero images best practices requirement before publishing any new landing page or homepage:
- Format: WebP — not JPG or PNG ✓
- Desktop file size: Under 200KB ✓
- Mobile file size: Under 100KB ✓
- Desktop dimensions: 1920×800px ✓
- Mobile dimensions: 390×600px portrait crop ✓
- Preload tag:
<link rel="preload">in <head> ✓ - No lazy loading: loading=”lazy” NOT applied to banner ✓
- Width and height attributes: Both defined to prevent CLS ✓
- Alt text: Descriptive and keyword-aware — not empty ✓
- Mobile crop: Portrait version served via HTML <picture> element ✓
- Text contrast: WCAG AA minimum — 3:1 ratio for large text ✓
- LCP score: Under 2.5s on PageSpeed Insights mobile test ✓
🏆 Optimize Your Hero Image in Under 2 Minutes
Convert to WebP, compress under 200KB, and crop the mobile portrait version — all free, browser-based, zero uploads to any server.
