{"id":98666,"date":"2024-09-03T13:37:27","date_gmt":"2024-09-03T17:37:27","guid":{"rendered":"https:\/\/www.crazyegg.com\/blog\/?p=98666"},"modified":"2026-01-06T15:13:11","modified_gmt":"2026-01-06T23:13:11","slug":"hero-image-best-practices","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/","title":{"rendered":"The Only 5 Hero Image Best Practices That Matter"},"content":{"rendered":"\n<p>There are a ton of generic hero image best practices out there, but we\u2019re not going to subject you to these trivial guidelines since they don\u2019t do anything. Instead, we\u2019re going straight to the good stuff\u2014hero image best practices that DO matter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Start With Your Headline<\/h2>\n\n\n\n<p>Hero images add a unique visual flair to your page, making it easier for visitors to notice your featured product or service once they discover your site.<\/p>\n\n\n\n<p>However, <a href=\"https:\/\/www.crazyegg.com\/blog\/hero-image\/\">hero images<\/a> are only as impactful as the headline that accompanies them, so make sure to start working on your headline first and then move on to the visual parts of your hero section. Getting the headline right can result in up to 30% more customers for your business, which makes prioritizing your copywriting efforts the right thing to do.<\/p>\n\n\n\n<p>During the process of creating a new headline, you\u2019ll also uncover the underlying key principles behind the message you\u2019re trying to convey. These principles will help you in the later stage to produce a visually striking hero image that emphasizes and reinforces your headline\u2019s main ideas.<\/p>\n\n\n\n<p>A world-class headline supported by an exceptional hero image is a winning combination. This headline-first approach will grow your online store, expand your customer base, and turn your leads into loyal brand ambassadors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Textbook hero image headline examples<\/h3>\n\n\n\n<p>Runway, an all-in-one finance management SaaS platform, makes a long-lasting first impression:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"382\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133215\/Runway-Hero-Image.png\" alt=\"\" class=\"wp-image-98668\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133215\/Runway-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133215\/Runway-Hero-Image-300x170.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A bold and sizable typeface dominates the hero section and greets visitors with an emotionally charged headline that turns heads: &#8220;The finance platform you don\u2019t hate.&#8221;<\/li>\n\n\n\n<li>The contrast between static, non-interactable areas and clickable call-to-action (CTA) buttons on the page makes it very easy for new users to navigate the site<\/li>\n\n\n\n<li>The hero image almost takes a backseat to a concise headline that is further complemented by a descriptive copy right below it, emphasizing Runway\u2019s openness to educate and help new users become proficient with its platform<\/li>\n<\/ul>\n\n\n\n<p>Basecamp, a tool for general productivity and communication, features an even simpler approach:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"395\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133249\/Basecamp-Hero-Image.png\" alt=\"\" class=\"wp-image-98670\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133249\/Basecamp-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133249\/Basecamp-Hero-Image-300x176.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A short headline explains everything there is to know about using Basecamp in a single, easily understandable sentence: &#8220;Refreshingly simple project management.&#8221;<\/li>\n\n\n\n<li>The hero shot is represented by a simple, comic-like stick figure drawing, where two characters have a conversation about common project management problems and how Basecamp can help them overcome these hurdles in an efficient way<\/li>\n\n\n\n<li>Every element on the landing page serves a specific purpose, which results in a clutter-free, extremely satisfying user experience (UX) for everyone willing to give the tool a try<\/li>\n<\/ul>\n\n\n\n<p>Technology and computing giant Nvidia is more colorful in its hero image presentation but equally as effective:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"263\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133329\/Nvidia-Hero-Image.png\" alt=\"\" class=\"wp-image-98671\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133329\/Nvidia-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133329\/Nvidia-Hero-Image-300x117.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nvidia\u2019s headline summarizes what\u2019s arguably the most important technological paradigm of the 21st century in two lines of text: &#8220;NVIDIA powers the World\u2019s AI. And yours.&#8221;<\/li>\n\n\n\n<li>Its hero image is designed to showcase a positive sentiment associated with using the company\u2019s products, which is easier to understand from a new user\u2019s perspective compared to something like listing its products\u2019 features and capabilities<\/li>\n\n\n\n<li>A descriptive paragraph below the main headline adds an additional layer of explanation to drive the point home and urge interested parties to learn more<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Get the Visual Weight Right<\/h2>\n\n\n\n<p>In professional photography and image design, <strong>visual weight<\/strong> refers to how much one element in the image pulls your attention compared to other visual elements in that same image. For example, a red square set against a green background will carry a lot of visual weight. Upon looking, you\u2019ll be immediately drawn to the square thanks to the striking contrast in the image\u2019s composition and the lack of other elements in the image.<\/p>\n\n\n\n<p>Hero images aren\u2019t exceptions to this rule.<\/p>\n\n\n\n<p>Throughout their work, some designers will be tempted to go ALL IN on your hero image and make it the star of the show. But then you run the risk of producing a hero image that is simply TOO visually striking for its own good. You want your hero image to differentiate itself from other elements on the page, but you don\u2019t want it to compete with the headline and overshadow your CTA.<\/p>\n\n\n\n<p>To achieve the ideal customer journey, a visitor&#8217;s eyes should naturally hit the headline first, absorb it, and then look at the hero image to hammer that same idea again. You can use a heat map to analyze the users\u2019 behavior on your site, which is closely correlated to the web elements they\u2019re paying the most attention to when browsing through your content.<\/p>\n\n\n\n<p>This will give you a rough estimate of whether your hero image is drawing too much attention and needs to be toned down, or if it\u2019s underdeveloped and needs additional retouches to make it stand out.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hero image examples with the perfect visual weight<\/h3>\n\n\n\n<p>Merrick, one of the most popular pet care brands in the United States, uses a simple image composition to promote its main mission statement and reassure pet owners of the quality of its blends:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"303\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133411\/Merrick-Hero-Image.png\" alt=\"\" class=\"wp-image-98672\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133411\/Merrick-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133411\/Merrick-Hero-Image-300x135.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The copywriting in the headline contains the same starting word as the copywriting in the hero image\u2019s featured product, which further strengthens the main idea behind Merrick\u2019s promotional campaign: &#8220;Real is our recipe&#8221;<\/li>\n\n\n\n<li>The headline is wisely placed in a small rectangular box with a contrasting background, making it easier to notice, read, and understand the text<\/li>\n\n\n\n<li>Several healthy foods surround the product\u2019s brightly colored packaging, signaling keywords such as health, vitality, and longevity to prospective buyers<\/li>\n<\/ul>\n\n\n\n<p>Renowned coffee brand Maxwell House utilizes the power of good copy to get its point across:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"362\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133444\/Maxwell-House-Hero-Image.png\" alt=\"\" class=\"wp-image-98673\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133444\/Maxwell-House-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133444\/Maxwell-House-Hero-Image-300x161.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A weighty, bold, and imposing typeface announces a genius-level headline that\u2019s all but guaranteed to get coffee enthusiasts excited about the brand: &#8220;Good to the Last Drop&#8221;<\/li>\n\n\n\n<li>A stylistic shot of the product in action serves as a complementary addition to the main copy without eclipsing the underlying message that Maxwell House is trying to convey, i.e., the tastiness and richness of its brew<\/li>\n\n\n\n<li>The hero shot is deliberately made simple to avoid confusing and overwhelming incoming visitors\u2014especially those who are new to the site<\/li>\n<\/ul>\n\n\n\n<p>Counsel for Creators offers legal services in Pasadena, CA, and their hero section speaks volumes about their juridical expertise:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"379\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133515\/Counsel-for-Creators.png\" alt=\"\" class=\"wp-image-98674\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133515\/Counsel-for-Creators.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133515\/Counsel-for-Creators-300x168.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The two far ends of the landing page house visually descriptive hero images that drive the users\u2019 attention to the main headline in the middle section; both the headline and the collection of hero images describe a firm that caters to helping individuals and businesses in the creative space<\/li>\n\n\n\n<li>Despite the large number of visual elements on the page, it never feels cluttered or overstimulating for the eye; all of the items and colors serve a very important purpose\u2014to grab the attention of artists, designers, and other ambitious creatives who are looking to get legal assistance<\/li>\n\n\n\n<li>The visual weight is tugging at its strongest in the middle section, influencing leads to follow the headline and eventually convert at the bottom of the page below the secondary copy<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. Clarity Over Cuteness<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.crazyegg.com\/blog\/hero-image-size\/\">Hero images should be interesting to look at<\/a>, but not to a point where their visual configuration overrides the brand\u2019s message because of confusing shapes, overbearing colors, or cryptic copy. The perfect hero image strikes a delicate balance between presentation, uniqueness, and clarity, working together with the page\u2019s layout in a way that\u2019s inviting to users.<\/p>\n\n\n\n<p>Still, there are some exceptions to this rule. If you\u2019re managing something like a cutting-edge fintech startup, or an avant-garde fashion and accessories brand, there\u2019s more room to experiment with the look and feel of your hero image compared to running a traditional ecommerce shop.<\/p>\n\n\n\n<p>Ultimately, the safest bet is to communicate your message as clearly as you can by leveraging a straightforward visual design and sticking to the basics.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples of hero images with the perfect clarity<\/h3>\n\n\n\n<p>Gabe\u2019s Spotless Window Cleaning features a clear and effective messaging:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"377\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133546\/Gabes-Spotless-Windo-Cleaning-Hero-Image.png\" alt=\"\" class=\"wp-image-98675\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133546\/Gabes-Spotless-Windo-Cleaning-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133546\/Gabes-Spotless-Windo-Cleaning-Hero-Image-300x168.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A perfectly aligned hero shot of the company\u2019s team displays professionalism, expertise, and trustworthiness to future clients<\/li>\n\n\n\n<li>All the necessary information to contact a window cleaning expert is clearly shown in the top navigation menu, headline, and CTA, which contributes to an enjoyable UX across the entire site<\/li>\n\n\n\n<li>Several accolades and awards are promptly included in the copy below the main headline, adding an additional level of trust to an already spotless presentation<\/li>\n<\/ul>\n\n\n\n<p>T&amp;E Auto Repair &amp; Sales is following in the same footsteps:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"372\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133617\/TE-Auto-Repor-and-Sales-Hero-Image.png\" alt=\"\" class=\"wp-image-98676\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133617\/TE-Auto-Repor-and-Sales-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133617\/TE-Auto-Repor-and-Sales-Hero-Image-300x165.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A succinct headline, paired with an effective hero close-up of one of T&amp;E\u2019s auto mechanics in action, indicates a service that\u2019s ready to answer your call in a prompt fashion<\/li>\n\n\n\n<li>The simple layout of the page\u2019s above-the-fold area makes it easy to locate the CTA and easily contact the business to get a quote<\/li>\n\n\n\n<li>Overall, the hero section is pleasing to look at and it serves its function very well<\/li>\n<\/ul>\n\n\n\n<p>Salthouse Catering has moved the headline below the hero image for an impactful yet minimalistic website aesthetic:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"381\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133648\/Salthouse-Catering-Hero-Image.png\" alt=\"\" class=\"wp-image-98677\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133648\/Salthouse-Catering-Hero-Image.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133648\/Salthouse-Catering-Hero-Image-300x169.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><strong>We love it because:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The unique dish presentations integrated with the image slider add a special touch to the brand\u2019s online presence<\/li>\n\n\n\n<li>The clever use of orange accents in the menu items and CTA buttons evokes interest and excitement in users, making it more likely for promising leads to convert on the spot<\/li>\n\n\n\n<li>A descriptive headline communicates the firm\u2019s main geographical coverage for people in the vicinity who are ready to buy<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Interweave the Image With Your Brand<\/h2>\n\n\n\n<p>If your marketing budget isn\u2019t at the level that you\u2019d want it to be, sometimes it\u2019s okay to use stock images as hero image stand-ins. Stock images <em>can<\/em> get the job done, but customers will notice that your hero images aren\u2019t original creations and weren\u2019t put together specifically for your business.<\/p>\n\n\n\n<p>And that\u2019s perfectly fine! Founders who run smaller businesses are allowed to use repurposed stock images for as long as the image fits within the objectives of their brand.<\/p>\n\n\n\n<p>When your business grows to the point of becoming a serious contender in your niche, we recommend upgrading your images from stock photos into properly shot, formatted, and optimized hero images. This action will communicate your readiness to innovate and to keep up with the demanding nature of a competitive marketplace, which customers love.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Don\u2019t Worry About A\/B Testing Your Hero Image<\/h2>\n\n\n\n<p>Generally speaking, testing individual elements on your site is a good way to filter out the things that don\u2019t work and focus on the actions that matter in growing your online business. But in this case, A\/B testing your hero image simply won\u2019t have a big enough impact to justify its part in your digital marketing plans.<\/p>\n\n\n\n<p>We\u2019ve run hundreds of A\/B tests over the years, and we\u2019ve never experienced a significant change in our hero image conversion rates\u2014be it on the positive or the negative side of things.<\/p>\n\n\n\n<p>Ultimately, it all boils down to using your personal experience, taste, and judgment to come up with the best hero image for your brand. Once you\u2019re happy with it, publish the hero image and move on to your next project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a ton of generic hero image best practices out there, but we\u2019re not going to subject you to these trivial guidelines since they&#8230;<\/p>\n","protected":false},"author":279,"featured_media":98669,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-98666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Only 5 Hero Image Best Practices That Matter<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Only 5 Hero Image Best Practices That Matter\" \/>\n<meta property=\"og:description\" content=\"There are a ton of generic hero image best practices out there, but we\u2019re not going to subject you to these trivial guidelines since they...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-03T17:37:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T23:13:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png\" \/>\n\t<meta property=\"og:image:width\" content=\"675\" \/>\n\t<meta property=\"og:image:height\" content=\"395\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hiten Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hnshah\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiten Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/\"},\"author\":{\"name\":\"Hiten Shah\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\"},\"headline\":\"The Only 5 Hero Image Best Practices That Matter\",\"datePublished\":\"2024-09-03T17:37:27+00:00\",\"dateModified\":\"2026-01-06T23:13:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/\"},\"wordCount\":1910,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/03133229\\\/unnamed.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/\",\"name\":\"The Only 5 Hero Image Best Practices That Matter\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/03133229\\\/unnamed.png\",\"datePublished\":\"2024-09-03T17:37:27+00:00\",\"dateModified\":\"2026-01-06T23:13:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/03133229\\\/unnamed.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/03133229\\\/unnamed.png\",\"width\":675,\"height\":395},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/hero-image-best-practices\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Only 5 Hero Image Best Practices That Matter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Daily Egg\",\"description\":\"Conversion Rate Optimization Made Easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\",\"name\":\"Hiten Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"caption\":\"Hiten Shah\"},\"description\":\"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\\\/Twitter.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hnshah\\\/\",\"https:\\\/\\\/x.com\\\/hnshah\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/hiten\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Only 5 Hero Image Best Practices That Matter","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"The Only 5 Hero Image Best Practices That Matter","og_description":"There are a ton of generic hero image best practices out there, but we\u2019re not going to subject you to these trivial guidelines since they...","og_url":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2024-09-03T17:37:27+00:00","article_modified_time":"2026-01-06T23:13:11+00:00","og_image":[{"width":675,"height":395,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png","type":"image\/png"}],"author":"Hiten Shah","twitter_card":"summary_large_image","twitter_creator":"@hnshah","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Hiten Shah","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/"},"author":{"name":"Hiten Shah","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6"},"headline":"The Only 5 Hero Image Best Practices That Matter","datePublished":"2024-09-03T17:37:27+00:00","dateModified":"2026-01-06T23:13:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/"},"wordCount":1910,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/","url":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/","name":"The Only 5 Hero Image Best Practices That Matter","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png","datePublished":"2024-09-03T17:37:27+00:00","dateModified":"2026-01-06T23:13:11+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/09\/03133229\/unnamed.png","width":675,"height":395},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/hero-image-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"The Only 5 Hero Image Best Practices That Matter"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Daily Egg","description":"Conversion Rate Optimization Made Easy","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6","name":"Hiten Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","caption":"Hiten Shah"},"description":"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\/Twitter.","sameAs":["https:\/\/www.linkedin.com\/in\/hnshah\/","https:\/\/x.com\/hnshah"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/hiten\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/98666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=98666"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/98666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/98669"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=98666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=98666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=98666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}