By Mehdi HassanThe hero visual is the second thing visitors notice after the headline, and it's often the most expensive part of the first screen to load. Teams choose between a static image, a product screenshot, a short loop and a full video, usually based on taste. A better way is to ask what the visual has to prove, then pick the cheapest format that proves it. This comparison gives a verdict per product type.
Hero image vs video vs screenshot: what are the options?
A SaaS hero visual is usually one of five formats: an illustration or photo, a static product screenshot, an annotated or simplified UI, a short silent product loop, or a full video with sound. Each sits at a different point on two scales: how much it proves and how much it costs to load. The hero section works best when the visual proves the headline's promise at the lowest cost.
Format | Proves | Performance cost | Main risk |
|---|---|---|---|
Illustration or stock photo | Mood, brand | Low | Proves nothing about the product |
Static product screenshot | The product exists and looks like this | Low | Unreadable on phones if not cropped |
Simplified or annotated UI | The key moment of value | Low | Can look fake if over-simplified |
Short silent loop (5 to 15 s) | A workflow or output happening | Medium | Heavy files delay the first screen |
Full video with sound | Story, depth, a person explaining | High as autoplay, low as click-to-play | Few visitors watch it in the hero |
Background brand video | Atmosphere | High | Slow, distracting, rarely persuasive |
When should you use a product screenshot hero?
Use a product screenshot hero when the interface itself is the proof, which is true for most dashboards, analytics tools and B2B workflow software. A real screenshot tells the visitor what they'd be using, which no illustration can. It's also the lightest format to load when it's properly compressed.
The common mistake is showing the full interface at desktop width. On a phone, a wide dashboard becomes a blur of tiny text. Crop to the one panel that proves the headline, enlarge the key number or row, and add one or two short labels if the screen needs explaining. That turns a screenshot into evidence.
Pros
- Shows exactly what the buyer would use
- Light to load as a modern image format
- Easy to update when the product changes
- Works without sound, motion or interaction
Cons
- Goes stale quickly as the product evolves
- Static images can't show a sequence or speed
- Wide UIs need careful cropping for phones
When is a landing page hero video worth it?
A landing page hero video is worth it when the product's value is something happening over time that a still image can't capture: an AI generating output, a workflow moving across steps, or a speed difference. In those cases, a short, silent loop of five to fifteen seconds usually does more than a longer video.
Full videos with narration belong behind a play button, not as autoplay. Most visitors won't watch a two-minute video in the hero, but some want to, and a clear "Watch the 2-minute demo" link serves them without slowing the page for everyone else. Load a lightweight poster image first so the first screen renders quickly, then fetch the video only when needed.
For a deeper comparison of animated formats, our guide to animated product demos covers GIF, video, Lottie and code-based animation. If you're choosing between a video and an interactive demo on a dedicated page, see our product tour page comparison.
What should the hero show for devtools, AI, dashboards and services?
The right hero visual depends on what your buyer needs to see to believe the headline. Developers want to see code and the developer experience. AI buyers want to see real output. Dashboard buyers want to see the data. Services buyers want to see the work and the people.
Product type | Best hero visual | Why | Avoid |
|---|---|---|---|
Developer tools | Code snippet, terminal or editor view | Developers judge by the experience of using it | Marketing illustrations of servers |
AI products | Real input and output, static or a short loop | Buyers are skeptical of claims they can't see | Glowing orbs and abstract neural shapes |
Dashboards and analytics | Cropped, annotated screenshot | The data view is the product | Full-width UI that's unreadable on phones |
Workflow and collaboration | Short loop of a task moving through steps | Value is the sequence | Long videos with music |
Services and agencies | Work samples or real team photography | The work and people are the product | Generic stock photos of handshakes |
Hardware or physical products | High-quality product photography | Buyers want to see the object | Renders that look unlike the real thing |
AI products deserve the most care, because our research found commentators repeatedly naming "magic promise, no proof" as the common failure. A real prompt and the result it produced proves more than any animation. Our roundup of AI product hero sections shows heroes that demo the output.
What does each hero visual cost in performance?
Static images are the cheapest hero visual, silent loops cost more, and autoplay video costs the most. The cost matters because the hero visual is often the largest element on the first screen, and the time it takes to render shapes whether visitors stay. The original SOASTA data in our research found roughly a 7% conversion drop for a 100-millisecond delay, though other tests found smaller effects.
Size the image to its display size
Serve responsive images at the widths the layout actually uses, in a modern format, so phones don't download desktop files.
Load the hero visual with priority
Mark the hero image as high priority and avoid lazy-loading it, since it's visible on load.
Give loops a poster and a small file
Encode short loops in an efficient format, keep them short, mute them and show a poster image until they're ready.
Put long videos behind a click
Load the player only when someone presses play, so visitors who don't watch don't pay for it.
Measure the first screen
Check Largest Contentful Paint for the hero on a mid-range phone, not just on your laptop.
For example, suppose a workflow tool is choosing between a screenshot and a loop
For example, suppose a workflow tool's headline promises "Approvals in one click, not ten emails." A static screenshot of the approval screen shows the interface but not the speed. A ten-second silent loop shows a request arriving, a manager approving it and the requester being notified, which proves the claim.
The team picks the loop, but ships a poster frame of the approval screen first so the hero renders instantly, then starts the loop once it loads. On slow connections, visitors still see a useful screenshot. That's the pattern to copy: the static frame does the job alone, and the motion is a bonus.
Should you use an animated hero section?
Use an animated hero section only when the motion explains something. Subtle entrance animations on text and buttons can make a page feel polished, but they should never delay the headline. Motion that demonstrates the product earns its place; motion that only decorates is a cost without a return.
Keep entrance animations short and make sure the content is readable even if animation fails or the visitor has reduced-motion settings enabled. For launch pages, where a moment of spectacle can make sense, our guide to product launch landing pages covers when to go further. To see how different visuals work on real pages, our landing page teardown rewrites a SaaS hero including its visual.
