Landing page hero image test
Compares your current hero image against a real product screenshot and a photo of customers or the team. Static images only.
Authored by Sid Chaudhary
Founder & CEO at Intempt
Agentic workflow
Coming soon1 step Blu runs end to end. It drafts a plan and nothing runs until you approve it.
- 1
Set up the hero image test
Coming soonBlu builds a step
About this recipe
When to use it
The hero image debate - abstract illustration vs. real product screenshot vs. customer/team photo - gets settled by opinion far more often than by data. This tests all three directly.
What it delivers
Tests a landing page hero image across three formats - abstract illustration, real product screenshot, and customer or team photo.
How you prompt this
Describe the outcome in your own words and Blu Agent maps it to this recipe, or run it by name. It drafts a plan first and nothing runs until you approve it.
Tell Blu Agent what you want
“Compares your current hero image against a real product screenshot and a photo of customers or the team. Static images only.”
recipe.md preview
Built from the published catalog. Blu Agent's full step prompts load in your workspace when you run it.
Inputs & outputs
What the recipe needs before it runs, and what it leaves in your workspace.
Inputs
- Nothing declared beyond an Intempt workspace. Blu asks for anything else it needs as it goes.
Outputs
How the recipe runs
Blu follows the steps in order and shows you each one before anything goes live.
- 01Set up the hero image testCreate a CLIENT EXPERIMENT on /experiences titled "Hero Image Test". ═══ PATH 1: Top-level configuration ═══ Experience type: client_experiment Variants: - Control (34%): existing hero image (whatever is currently on the page) - Variant B (33%): static product screenshot: a clean, real product UI screenshot showing the dashboard or core feature - Variant C (33%): customer/team photo: authentic photo of real users or the team using the product (Note: animated variants are out of scope for this recipe. Static images only.) Targeting: - Pages: homepage "/" and key landing pages - Devices: any (note: customer-photo variant should have mobile-cropped versions) - Audience: all visitors - Display frequency: always Primary metric: goal_completed_in_experience where experience_id = <this> (goal: Form submitted on demo / contact / signup, OR User created within session of exposure) Secondary metrics: - Click on on primary CTA (does the hero image affect CTA click-through?) - Bounce rate (does the hero image keep visitors engaged?) - Time-on-page (proxy for engagement) - Scroll-depth-to-50% (does the hero compel visitors to scroll?) Guardrail: bounce rate must not increase >5%; mobile load time must not exceed +200ms (image swaps must use optimized formats: WebP, lazy loading) Schedule: 21 days, 1,500 visitors per variant minimum ═══ PATH 2: Variant HTML content (Visual Editor) ═══ Variant: Control (no DOM changes) Variant: B (product screenshot) HTML target selector: .hero-image (the existing hero image element) Replacement HTML: <picture class="hero-image hero-image--screenshot" data-variant="b" data-image-type="screenshot"> <source media="(min-width: 1024px)" srcset="/hero-screenshots/dashboard-desktop.webp" type="image/webp" /> <source media="(min-width: 768px)" srcset="/hero-screenshots/dashboard-tablet.webp" type="image/webp" /> <img src="/hero-screenshots/dashboard-mobile.webp" alt="[Brand] dashboard showing [key feature]" loading="eager" width="800" height="500" /> </picture> The screenshot should show a real, recognizable product UI: the dashboard, the main feature in use, or a typical user view. Avoid heavily annotated or marketing-overlaid screenshots; clean and authentic outperforms polished. Variant: C (customer/team photo) HTML target selector: .hero-image Replacement HTML: <picture class="hero-image hero-image--photo" data-variant="c" data-image-type="customer-photo"> <source media="(min-width: 1024px)" srcset="/hero-photos/team-desktop.webp" type="image/webp" /> <source media="(min-width: 768px)" srcset="/hero-photos/team-tablet.webp" type="image/webp" /> <img src="/hero-photos/team-mobile.webp" alt="[Customer name] team using [Brand]" loading="eager" width="800" height="500" /> </picture> The photo should be authentic: a real team or customer, not stock photography. If you don't have rights to a real customer photo, use your own team or skip this variant. The Visual Editor allows the user to swap actual image assets and adjust alt-text, sizing, and positioning. Critical: ensure all image variants are properly sized and compressed for fast load: image swaps that hurt page speed will lose regardless of design quality. Taxonomy notes: - 2026 SaaS research strongly favors authentic visuals over stock illustrations. Real product screenshots often outperform abstract illustrations for product-led teams; real customer photos often outperform for service/enterprise teams. - Page-speed monitoring is critical: measure Largest Contentful Paint (LCP) per variant. The winning hero image must also load fast. - A static-image test is the foundation; animated/video heroes (Lottie embeds, MP4 background, etc.) are out of scope for this recipe and can be authored as a future extension once the static winner is determined. - Mobile-specific image variants are essential: desktop hero images cropped down to mobile usually look poor and convert worse than mobile-designed versions.
Install Intempt and run it
- 1
Sign up
Create a free Intempt workspace.
- 2
Connect your data
Add the sources this recipe reads from.
- 3
Ask Blu
Type /hero-static-vs-screenshot-test in Blu once this recipe is live there.
- 4
Review and approve
Blu builds each step and waits for your OK before anything goes live.
Related recipes
Sid ChaudharyDiscovery call qualification fieldsGenerates an AI summary for Discovery calls from meeting data using the qualification framework in the summary recipe.View recipe Sid ChaudharyPost demo nurtureKeeps a demo warm for 90 days with a playbook, a case study, an ROI calculator and a customer story, and pulls the AE in early if they bite.View recipe Sid ChaudharyReturn rate by categoryShows which product categories get returned most, and which ones have got worse since last quarter.View recipe 