Hero Image Web Design Best Practices (2026)

What Is a Hero Image in Web Design — and Why It Is Your Most Important Element

The hero image is the large, dominant visual that occupies the full width of a web page's top section — typically covering the entire above-the-fold area that visitors see before scrolling. It is not merely decorative. The hero is the most expensive real estate on your website: it is the first element loaded, the first content a visitor evaluates, and the primary driver of the three-to-five-second snap judgment that determines whether someone reads further or bounces.

In Google's Core Web Vitals framework, the hero image is almost always the Largest Contentful Paint (LCP) element — the signal Google uses to measure how quickly a page delivers its main content. A slow-loading hero image translates directly into a failing LCP score, which reduces organic search visibility and increases the cost per click of paid campaigns. Every technical decision you make about your hero image — format, compression, preloading, dimensions, srcset — has measurable effects on both user experience and search ranking.

Beyond performance, the hero image sets the emotional register of the entire visit. Research from Nielsen Norman Group shows that web users form a first impression of visual design within 50 milliseconds — faster than conscious thought. A compelling, relevant hero image that immediately signals credibility and relevance to the visitor's intent keeps people on the page. A generic stock image of strangers shaking hands in an office does the opposite: it signals inauthenticity and reduces the perceived trustworthiness of the business, particularly among Canadian consumers who research service providers carefully before making contact.

The hero section typically contains: the background image or video, the H1 headline, a sub-heading, one or two CTA buttons, and optionally a trust bar of logos, star ratings, or client counts. Each element competes for visual attention on a screen that is — for the majority of Canadian visitors — a phone held in portrait orientation. Getting the hero right means optimizing all of these components together, not treating the image as an afterthought selected after the copy and layout are already locked in.

Photo vs. Video vs. AI-Generated Hero Images: Which Format Works Best

The choice between photography, video, and AI-generated visuals is one of the most debated decisions in Canadian web design. The honest answer depends on your business type, audience, performance budget, and willingness to test. Here is what the evidence and professional practice show for each format.

Authentic photography is the highest-trust format for service businesses. Studies from Conversion Rate Experts and Unbounce consistently show that images of real people — actual employees, real customers, real project outcomes — outperform generic stock photography by 30–90% on trust ratings. For a plumbing contractor in Calgary, a photo of a technician on-site in a real home outperforms a purchased image of a generic plumber every time. For a Montreal law firm, a genuine photo of the partner team in the office outperforms a stock photo of a courtroom. The authenticity signal is especially powerful in Canada's service industries, where referrals and trust are the primary conversion drivers.

The limitation of photography is cost and LCP risk. A raw photograph from a professional shoot delivers a file in the 3–15 MB range and requires post-processing: cropping to the correct dimensions, compressing to WebP, and verifying that the focal point survives the responsive crop to mobile portrait orientation. These steps are skipped on most Canadian SMB websites, which is why hero images are the single most common PageSpeed failure in the sector.

Video backgrounds increase time-on-page by an average of 15–25% on desktop when used well. A looping 8–15 second video showing a product in use, a service in action, or a before-and-after transformation can communicate in three seconds what would take three paragraphs of copy to explain. The caveat: video hero sections almost always fail LCP if implemented carelessly. The video itself is never the LCP element — the LCP will be the text H1 or the poster image shown while the video loads. To avoid a slow LCP: always set a compressed hero poster image as the video's poster attribute, so the visible content appears instantly while the video loads in the background. Set the video to autoplay muted loop playsinline and never autoplay audio. Provide a visible pause button to comply with WCAG 2.1 Success Criterion 2.2.2 (Pause, Stop, Hide) and with the expected behaviour of modern web browsers, most of which block autoplay with audio by default.

AI-generated images have become a practical option for Canadian businesses in 2026 through tools including Adobe Firefly, Midjourney, DALL-E 3, Imagen (Google), and Gemini. AI generation fills specific gaps: ecommerce product scenes that would cost CA$3,000 to photograph; architectural visualizations for construction companies; abstract tech imagery for SaaS platforms; niche scenarios where stock libraries have nothing relevant. The realistic limitations are: AI images still struggle with human hands, specific Canadian geography (Calgary skylines, Quebec City architecture), and product accuracy. They also require disclosure in some commercial contexts — the IAB Canada and CRTC are monitoring AI-disclosure standards, and responsible practice is to disclose AI generation in image credits or site terms. For conversion-critical pages, always A/B test AI imagery against real photography before concluding that synthetic visuals perform equally.

Hero Image Dimensions, Format, and Technical Specifications (2026)

Correct dimensions and file specifications are not a design preference — they are a performance requirement. The following specifications reflect industry standard practice for 2026 and the actual rendering requirements of current browsers across desktop and mobile.

Dimensions. Export your hero image at 1920×1080 pixels for the base full-width desktop version. This covers screens up to 1920px wide without upscaling and renders at native quality on 1x screens. For Retina and HiDPI displays (all modern iPhones, MacBooks, and many Android flagships), supply a 2x version at 3840×2160 px via srcset. Many designers incorrectly export only the 1x version, which renders blurry on Retina screens — noticeable on iPhones running iOS 15 and above. For mobile, crop a portrait version at 828×1792 px (iPhone 14 logical canvas) or a 9:16 ratio centred on the focal point.

Format. WebP is the correct choice for hero images in 2026. WebP achieves 25–35% smaller file sizes than JPEG at equivalent visual quality and is supported by 96%+ of Canadian web traffic (Chrome, Safari 14+, Firefox, Edge). For browsers that do not support WebP (Safari 13 and below, less than 2% of traffic), provide a JPEG fallback in a <picture> element. AVIF offers slightly better compression than WebP but has slower encoding and marginally lower browser support — treat it as an optional progressive enhancement rather than a default. PNG should never be used for hero photographs; it produces file sizes 3–6 times larger than WebP for photographic content with no visible quality benefit.

File size targets. Keep the hero image below 150 KB after compression for the version served to typical screen sizes. 100 KB is achievable with WebP at 75–80% quality for most photographic content. Tools: Squoosh (squoosh.app, free), ImageOptim (Mac), or Sharp (Node.js build pipeline). After compression, verify visual quality at 100% zoom on both a standard monitor and a Retina screen. Compression artefacts are most visible in sky gradients, fabric textures, and skin tones — check those areas specifically.

HTML implementation. Set width and height attributes to the intrinsic pixel dimensions — this allows the browser to reserve the correct layout space before the image loads, preventing Cumulative Layout Shift (CLS). Always use loading="eager" (not lazy) on the hero image. Set fetchpriority="high". Add a <link rel="preload" as="image" href="/hero.webp" fetchpriority="high"> in the document <head> so the browser discovers the image resource before parsing the body. These four steps together — eager loading, high fetch priority, explicit dimensions, and head preload — are the most impactful technical changes available for improving hero image LCP, consistently reducing LCP by 0.5–1.5 seconds in PageSpeed testing.

LCP and Core Web Vitals: Making Your Hero Section Pass Google's Performance Threshold

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element above the fold to finish loading. Google's threshold for a "Good" LCP rating is 2.5 seconds. Pages with LCP between 2.5 and 4.0 seconds receive a "Needs Improvement" rating; above 4.0 seconds is "Poor." Google uses real-world Chrome User Experience Report (CrUX) data across the trailing 28 days — not just the laboratory scores from PageSpeed Insights — to inform ranking. A failing LCP score affects your position in organic search results and increases your Smart Bidding costs in Google Ads.

In practice, the hero image or hero video poster is responsible for a failing LCP on more than 70% of Canadian SMB websites audited with PageSpeed Insights. The causes are almost always the same: an uncompressed JPEG or PNG served at the full camera output size, no preloading, lazy loading applied to the LCP element, or a hero delivered via CSS background-image (which Google cannot preload efficiently since it only discovers background-image URLs after CSS parsing is complete). Fix the hero first; the LCP improvement from optimizing every other element on the page combined is typically smaller than the improvement from fixing the hero image alone.

The other two Core Web Vitals relevant to hero sections are Cumulative Layout Shift (CLS) and Interaction to Next Paint (INP). CLS measures unexpected layout movement: if your hero image loads without explicit width and height attributes, the browser cannot reserve space for it and all downstream content shifts down when the image arrives — a CLS failure. Set explicit dimensions on every hero image element. INP measures page responsiveness to user interaction. Overly complex hero animations driven by JavaScript (parallax, canvas effects, WebGL) increase INP by blocking the main thread during loading. Minimize hero JavaScript to simple CSS transitions.

How to audit: run your URL in Google PageSpeed Insights (pagespeed.web.dev) and switch to the Mobile tab. The "Opportunities" section will list specific fixes with estimated time savings. The most common fix for hero images is "Serve images in next-gen formats" (switch to WebP) and "Properly size images" (compress and resize). Running the Lighthouse audit locally using Chrome DevTools gives additional detail including the exact byte size of the LCP element and the time at which it became visible. Target LCP under 1.8 seconds for a comfortable margin above Google's 2.5-second threshold, accounting for variation across real-world network conditions.

Hero Section Copy and CTA: What to Write Above the Fold

The hero image is only as effective as the copy that accompanies it. The visual and the words work as a unit: the image creates emotional resonance and signals relevance; the headline makes the specific value proposition explicit; and the CTA converts the combined impression into an action. Businesses that invest in hero photography without investing in hero copywriting consistently underperform their potential conversion rate.

The H1 headline. Write one sentence that names the specific benefit and the specific audience in plain language. "Emergency HVAC Repair in Ottawa — Nights, Weekends, and Holidays" is more effective than "Your Trusted Heating and Cooling Partner." "Bookkeeping for Canadian Freelancers — Fixed Monthly Price" is more effective than "Professional Accounting Services." The test: if you can replace your business name in the headline with a competitor's name and it still makes sense, the headline is not specific enough. Canadian businesses should include geographic context when targeting local search traffic: city names in the headline improve Quality Score in Google Ads local campaigns and alignment with search intent.

The sub-headline. Add one sentence that extends the headline with a specific credibility hook, a timeline, or a differentiator. "Servicing 1,200+ Ottawa homes since 2014 — licensed, insured, and available 24/7." The sub-headline is the second piece of copy visitors read; it either confirms that they are in the right place or raises a doubt. It does not need to be clever — it needs to be specific and true.

CTA button text. Use action-specific language that names what the visitor gets, not what they do. "Get my free estimate" outperforms "Submit." "Book a 30-minute call" outperforms "Contact us." "See pricing plans" outperforms "Learn more." CTA buttons should be in a colour that appears nowhere else on the page — high contrast against both the hero image and the surrounding text. On mobile, the CTA button must be at least 44×44 pixels in tap target size (Apple's Human Interface Guidelines) and centred in the single-column layout.

Text-on-image contrast. Text overlaid on a hero image must meet WCAG 2.1 Success Criterion 1.4.3: a minimum contrast ratio of 4.5:1 for normal text (under 18pt/24px) and 3:1 for large text (18pt bold/24px bold or larger). Hero images are not solid-colour backgrounds — the contrast ratio must hold across the entire image crop, including its lightest area. The reliable solutions are: (1) apply a dark semi-transparent overlay over the full image (background: rgba(0,0,0,0.50)); (2) place the headline on a solid colour panel rather than directly over the image; or (3) select a hero image with a uniformly dark area where the text lands. Verify contrast with the WebAIM Contrast Checker at webaim.org/resources/contrastchecker/. Failing contrast is the most common accessibility violation on hero sections across Canadian business websites and can expose federally regulated organizations to complaints under the Accessible Canada Act (ACA).

Mobile Hero Image Design: What Changes at 375 Pixels

More than 65% of Canadian web traffic arrives on mobile devices, according to CIRA's annual Internet Factbook. For Google Ads campaigns, mobile traffic is typically 70–80% of clicks. A hero image designed exclusively for a 1440-pixel desktop monitor and then allowed to scale down automatically to mobile — without any responsive customization — is one of the most common and costly web design failures in the Canadian SMB market.

The core problem is aspect ratio. A 1920×1080 hero image at 16:9 displays comfortably on landscape desktop monitors but becomes a thin horizontal sliver on a 375×812-pixel phone screen in portrait orientation. When the image is allowed to scale proportionally, either the hero becomes too short to fill the above-the-fold area meaningfully, or the image is cropped to fill the screen and the focal point — the face, the product, the key visual — is cut off. For a landscaping company in Vaughan whose hero image shows a team standing in front of a finished garden, the automatic mobile crop may show only grass with everyone's faces removed.

The correct solution is a separate mobile crop served via the <picture> element's media attribute. The mobile source should be art-directed: reframe the composition around the focal point, crop vertically to a 9:16 or 4:3 portrait orientation, and verify the crop at 375px, 414px, and 428px screen widths (the three most common iPhone viewports in Canadian traffic, per StatCounter). Many WordPress and Webflow themes include this responsive art-direction capability natively — enable it rather than relying on automatic cropping.

Hero image height on mobile. The mobile hero should fill the visible viewport height without requiring a scroll to see the CTA button. On a 375×812 iPhone viewport, this typically means a hero height of approximately 500–620px CSS — enough for a background image, the H1, sub-headline, and a single button. If the hero extends to 800px on mobile, the CTA button is below the fold and most mobile visitors will not scroll to reach it. Test by loading your page in Chrome's mobile emulator at 375×812 with the DevTools device toolbar and verify that the CTA button is fully visible without scrolling.

Font sizes on mobile heroes. Hero headlines should be a minimum of 28px on mobile, not smaller. Sub-headlines and body copy inside the hero should be 15–17px. Never shrink hero text below 14px to fit a long headline — rewrite the headline instead. Single-column layout is mandatory on mobile: never let the hero headline compete with the image for horizontal space in a two-column arrangement. The image belongs below the fold on mobile or as a full-bleed background, not in a column beside the headline where it compresses both to illegibility.

Accessibility Requirements for Hero Images Under WCAG 2.1

Accessibility is a legal and ethical obligation for most Canadian organizations, not an optional enhancement. The Accessible Canada Act (S.C. 2019, c. 10) requires federally regulated organizations — banks, telecoms, broadcasters, federal departments — to meet accessibility standards for digital content. Ontario's Accessibility for Ontarians with Disabilities Act (AODA) and its Integrated Accessibility Standards Regulation (IASR) require private-sector organizations with 20 or more employees to conform to WCAG 2.0 Level AA on internet websites and web content by January 2021. WCAG 2.1 Level AA is the current best-practice baseline for all Canadian web projects, regardless of legal threshold.

Text alternatives (SC 1.1.1). If your hero image is purely decorative — background photography that does not convey information about your product, service, or team — set alt="" (empty string) on the <img> tag. This tells screen readers to skip the element entirely, which is the correct behaviour for decorative images. If the hero image conveys meaning — shows a specific product, a real team, a service outcome — write descriptive alt text that conveys the same information. "A red maple tree in full autumn colour reflected in a still lake in Algonquin Provincial Park" is appropriate alt text. "Hero banner" or "background image" are not.

Video backgrounds (SC 2.2.2 and 1.4.2). Auto-playing video in the hero must not play audio by default (most browsers block this anyway). If the video contains meaningful audio content (narration, product sounds), a visible play/pause control is required under SC 2.2.2. If audio is present, users must have controls to stop, pause, or mute it (SC 1.4.2). For decorative background videos with no audio, a pause control is still best practice — some users with vestibular disorders or attention conditions are adversely affected by looping video motion.

Reduced motion (WCAG 2.3.3 in WCAG 2.1 AAA, widely adopted as best practice). Any scroll-triggered animation, parallax effect, or animated reveal applied to the hero section must respect the CSS prefers-reduced-motion media query. Users who have enabled "Reduce Motion" in their OS settings (iOS Accessibility > Motion, Windows > Ease of Access > Display) send this preference to the browser, and your CSS should disable animations accordingly. This affects a meaningful share of Canadian users with vestibular disorders, motion sickness, or epilepsy risks. A single CSS rule — @media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } } — handles the majority of cases.

Hero Image Pricing in Canada: Stock, Custom, and AI (2026 CAD)

The cost of hero imagery varies enormously depending on the format, source, and who handles the technical optimization. The table below covers the full range of options available to Canadian businesses in mid-2026, from self-serve stock libraries to commercial photography productions. See the complete Canadian website cost guide for context on how photography fits into overall web design budgets.

The most consistently undervalued investment in this table is the half-day photography session for local service businesses. A CA$1,000 shoot produces authentic images that outperform CA$50 stock photos on trust metrics for years and are fully owned by the business without ongoing licensing constraints. Generic stock photography becomes a liability as AI tools improve visitor ability to recognize non-authentic imagery.

Comparison: Stock vs. Custom Photography vs. AI-Generated Hero Images

The following comparison table summarizes the practical trade-offs across the three main hero image formats. The right choice depends on budget, timeline, and the degree to which your industry depends on trust signals built through authentic visual presence. For a thorough breakdown of what Canadian web design services include, see our web design services guide.

A/B Testing Your Hero Image: What to Test First and How to Run a Valid Experiment

The hero image is the highest-leverage element to A/B test on any page. Small changes to the hero — a different photo, a different colour overlay, a reframed composition — routinely produce 15–40% changes in conversion rate without touching the rest of the page at all. But most A/B tests on hero images are run incorrectly, producing misleading results that lead to wrong decisions.

What to test, in priority order. (1) Photo subject: a real person vs. a product vs. an outcome visualization. For a Toronto real estate agent, testing a portrait photo vs. a luxury property exterior vs. a family in front of a sold sign will reveal which resonates most with the target audience. (2) Image vs. video: does a 10-second looping video increase or decrease conversions compared to a static hero? (3) Overlay darkness: a 40% dark overlay vs. a 60% dark overlay changes both readability and mood. (4) Image composition: person facing the CTA button vs. facing the camera. Images of people whose gaze or body direction points toward the CTA button create visual flow toward the conversion action — an effect documented extensively in eye-tracking studies. (5) Colour grading: warm tones vs. cool tones. Each test should change one variable only; testing composition and colour grading simultaneously makes it impossible to identify which change drove the result.

Minimum sample size for reliable results. For a hero image test where the conversion rate difference between variants is expected to be 20% (e.g., 4% vs. 4.8%), reaching 95% statistical confidence requires approximately 3,800 visitors per variant — roughly 7,600 total. For smaller businesses in markets outside Toronto and Vancouver, reaching this threshold may require 4–6 weeks of traffic even with paid campaigns running. Running the test for one week and calling a winner after 200 visitors is a common mistake that produces results no better than a coin flip. Use a sample size calculator — Optimizely's or Evan Miller's — before starting any test to know the required runtime.

Tools for Canadian businesses in 2026. VWO (Visual Website Optimizer) and AB Tasty are the most commonly used professional A/B testing platforms in Canada. Google Optimize was shut down in September 2023 — it no longer functions and should be removed from any site still referencing it. For smaller budgets, Microsoft Clarity (free) provides heatmaps, scroll maps, and session recordings that reveal qualitative behaviour around the hero section — even if it does not support traditional split testing. For Webflow sites, native A/B testing via split pages is available in paid plans. WordPress sites can use Nelio A/B Testing or WP Experiments.

For full-service web design teams, treating performance and visual impact as equally weighted deliverables — not separate workstreams — consistently produces faster time-to-winning-hero than teams that bolt on testing after launch.

Step-by-Step: How to Build a High-Impact Hero Section From Scratch

The following ordered process reflects how professional Canadian web designers approach a hero section build from brief to live deployment. Skipping steps — particularly strategy, mobile art direction, and performance verification — is the source of most hero section failures in the Canadian SMB market.

1. Define the one conversion goal. Before selecting any image, write one sentence: "The hero section exists to make a [specific visitor type] take [specific action]." A plumbing contractor's hero might read: "The hero section exists to make an Ottawa homeowner call or submit a quote request for emergency plumbing." If the goal is unclear, the hero will be designed to impress rather than to convert.
2. Write the headline and CTA first. Lock the copy before choosing the image. The image must support and amplify the copy, not compete with it. Many designers select images first and then write copy to fit the visual — this produces hero sections where the image and the message feel unrelated.
3. Select or commission the hero image with mobile crop in mind. If using stock photography, choose a horizontal composition with clear subject centering so a portrait crop is feasible. If commissioning photography, brief the photographer to shoot both landscape (16:9) and portrait (9:16) framings at the same session. If using AI generation, generate both aspect ratios simultaneously.
4. Export and compress to WebP below 150 KB. Use Squoosh, Sharp, or ImageOptim. Target quality 75–80% for WebP. Verify visual quality at 100% zoom across skin tones, gradients, and fine textures. Export the mobile crop as a separate file at 828×1792 px.
5. Implement with correct HTML attributes. Use loading="eager", fetchpriority="high", explicit width and height, and descriptive alt text. Add the link rel="preload" tag in <head>. Use a <picture> element with media="(max-width:767px)" to serve the portrait crop on mobile.
6. Apply the contrast overlay. Test the text contrast ratio using the WebAIM Contrast Checker. If the headline text does not achieve 4.5:1 across the lightest area of the image, darken the overlay until it does. Verify on both mobile and desktop crops.
7. Verify performance with PageSpeed Insights. Run the URL in the Mobile tab at pagespeed.web.dev. Target LCP under 1.8 seconds and CLS of 0. Fix any hero-related "Opportunities" before launch. Re-run after each fix to confirm improvement. Do not launch with a failing LCP score on mobile.
8. Test on real devices before launch. Render the page on a physical iPhone (Safari iOS) and a mid-range Android (Chrome Android), not only in desktop browser emulators. Verify that the focal point is visible, the headline is readable, the CTA button is fully tappable, and the page loads within 3 seconds on LTE.

Common Hero Image Mistakes That Hurt Conversions (and How to Fix Each)

The following mistakes appear on the majority of Canadian SMB websites and are responsible for measurable conversion losses. Each is fixable in under a day of work by a competent front-end developer, making them among the highest-ROI web performance tasks available.

Mistake 1: Using a generic stock photo that visitors recognize as inauthentic. The fix: commission a half-day photography session (CA$800–$1,500) and retire the stock image. If budget prevents immediate photography, use an AI-generated image that is specific to your service category and geography rather than a stock image of people shaking hands. Even a well-composed AI image of a recognizable Toronto neighbourhood outperforms a generic stock photo for local trust signals.

Mistake 2: Text over hero image with no contrast overlay. The fix: add a CSS dark overlay at rgba(0,0,0,0.50) minimum and verify contrast ratios with WebAIM Contrast Checker. This takes 15 minutes and eliminates a WCAG 2.1 violation while making the headline readable on every device.

Mistake 3: Setting loading="lazy" on the hero image. This is the single most common LCP-killing mistake in WordPress themes. The fix: change loading="lazy" to loading="eager" and add fetchpriority="high". Many WordPress themes apply lazy loading to all images by default; disable it for the hero element specifically.

Mistake 4: No mobile-specific crop. The fix: export a portrait crop and implement a <picture> element with the portrait source served at max-width: 767px. If the current WordPress or Webflow theme does not support this, set the hero to a fixed-height block with CSS object-fit: cover; object-position: center top; to at least prevent cutting off faces — an improvement over the default horizontal scaling behaviour.

Mistake 5: Delivering a JPEG or PNG hero above 400 KB. The fix: convert to WebP using Squoosh at 75% quality. A 1.2 MB JPEG hero image routinely compresses to 90–120 KB in WebP with no visible quality loss at normal viewing distances, cutting the LCP weight by 85%. This single change moves the majority of failing LCP scores into the passing range on mobile.

Mistake 6: Hero background set as CSS background-image instead of an HTML img element. CSS background-image URLs are discovered only after CSS is parsed and cannot be preloaded efficiently with link rel="preload". The fix: convert the hero background to an HTML <img> element positioned absolutely behind the content, or add a link rel="preload" tag with the exact background-image URL and fetchpriority="high" as a workaround for themes that require CSS background delivery. See our Core Web Vitals guide for implementation detail.

Canadian Business Examples: Hero Sections That Work by Industry

Abstract best-practice advice is more useful when anchored to real sector patterns. The following anonymized examples describe hero section approaches used by Canadian businesses across five industries, based on conversion-tracking data and site audit findings. For additional industry context, see our website examples by industry directory.

Home renovation contractor, Ottawa (anonymized). Hero image: a professional photograph of a completed kitchen renovation — granite countertops, new cabinetry, pot-lights — with the homeowner family visible in the background, slightly out of focus. The focal point passes portrait crop intact. Dark overlay at 55%. Headline: "Kitchen and Bathroom Renovations in Ottawa — Completed in 6 to 12 Weeks." CTA: "Get a free estimate." Result after hero redesign: contact form submissions up 44% in 60 days with the same Google Ads spend. The previous hero was a stock image of a power drill on a white background — authentic outcome photography was the decisive change.

Immigration law firm, Toronto (anonymized). Hero image: a portrait of the lead partner, a woman in professional attire, photographed in the firm's office with warm lighting and a shallow depth of field. The image meets WCAG contrast requirements with a dark-left, lighter-right gradient overlay so the text lands on the dark side. Headline: "Canadian Permanent Residence Applications — 2,400+ Families Helped." CTA: "Book a consultation." The lawyer portrait was A/B tested against a Toronto skyline image; the portrait outperformed by 31% on booking rate. Real faces with credentials — professional photos with bar membership visible in a credential badge — converted significantly better than architecture imagery for this audience.

B2B SaaS company, Vancouver (anonymized). Hero: a short 12-second looping video showing the product dashboard being used by a team in a real office setting. Video poster image is a WebP screenshot of the product at 118 KB, so LCP resolves to the poster image in 1.3 seconds while the video loads. Headline: "Replace Three Tools With One — Project Management for Canadian Professional Services Firms." CTA: "See a 15-minute demo." This hero section is an example where video outperforms photography because the product UI is the hero — showing it in motion communicates its ease of use in a way that no single screenshot can.

Physiotherapy clinic, Calgary (anonymized). Hero image: AI-generated scene of a physiotherapist and patient in a clinic setting. Used because the clinic is newly opened and had no existing photography. Generated with Adobe Firefly, prompted with specific clinic design details (white walls, equipment visible), and reviewed for alignment with the Regulated Health Professions Act requirements in Alberta. Once real photography was commissioned six weeks after launch, it replaced the AI image — the switch increased trust survey scores by 22 points on a 100-point scale among new patient survey respondents. AI was used as an interim bridge, not a permanent solution.

Pre-Launch Hero Image Checklist

Use this checklist before launching any new hero section or hero image update. Each item maps to a documented performance, accessibility, or conversion best practice covered in this guide. A hero section that passes every item in this checklist is substantially better than the Canadian average.

• Hero image is in WebP format and compressed below 150 KB
• loading="eager" and fetchpriority="high" are set on the hero img element
• width and height attributes match the intrinsic image dimensions (prevents CLS)
• A <link rel="preload" as="image" fetchpriority="high"> tag is in <head>
• A mobile-specific portrait crop is served at screen widths below 768px via <picture>
• Text contrast ratio over hero image meets WCAG 2.1 SC 1.4.3 (4.5:1 for normal text, verified with WebAIM)
• Hero alt text is descriptive (or empty for purely decorative backgrounds)
• If using background video: poster image is set, audio is off by default, pause control is visible
• Animations respect prefers-reduced-motion media query
• H1 headline names the specific benefit and target audience plainly
• CTA button is in a colour that appears nowhere else on the page
• On mobile, CTA button is fully visible above the fold at 375×812 px without scrolling
• CTA button tap target is at least 44×44 px on mobile
• PageSpeed Insights Mobile LCP is under 2.5 seconds (target under 1.8 seconds)
• CLS score is 0.00 on PageSpeed Insights (no layout shift from hero image loading)
• Hero section tested on physical iPhone (Safari) and mid-range Android (Chrome)
• If using stock photography: image is licensed for commercial web use
• If using AI-generated imagery: generation method disclosed in site terms or image credits per IAB Canada guidance

Frequently Asked Questions About Hero Images in Web Design