CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="css3transitions" itemscope itemtype="http://schema.org/WebPage"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="p:domain_verify" content="4b0bedaaf526de17ddf66ffc4d23313f"> <meta name="functionize-project-verification" content="8717e3daac73fde12aac73824ce251de"> <link rel="icon" href="https://www.convert.com/wp-content/uploads/2013/12/favicon-1.ico" type="image/x-icon"> <link rel='preconnect dns-prefetch' href='https://cdn-4.convertexperiments.com' crossorigin> <link rel='preconnect dns-prefetch' href='https://www.convertexperiments.com'> <link rel='preconnect dns-prefetch' href='https://4.track.convertexperiments.com'> <link rel='preconnect dns-prefetch' href='https://apikeys.civiccomputing.com'> <link rel='preconnect dns-prefetch' href='https://cc.cdn.civiccomputing.com'> <link rel='preconnect dns-prefetch' href='https://logs.convertexperiments.com'> <link rel='preconnect dns-prefetch' href='https://measure.convert.com'> <link rel="preconnect dns-prefetch" href="https://www.googletagmanager.com"> <link rel="preconnect" href="https://www.google-analytics.com" crossorigin> <script type="text/javascript" src="//cdn-4.convertexperiments.com/v1/js/1-4.js"></script> <script defer src='https://js.sentry-cdn.com/0f081d8338004482aa6f3f567b3d97dc.min.js' crossorigin="anonymous"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-27764542-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} // Get value of doNotTrack of the browser let checkDNT = navigator.msDoNotTrack || navigator.doNotTrack || window.doNotTrack; // Show Gtag if user have doNotTrack disabled if (checkDNT == '1' || checkDNT == 'yes') { window['ga-disable-UA-27764542-1'] = true; } // dont't track GTM by default gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied' }); gtag('js', new Date()); gtag('config', 'UA-27764542-1', { 'anonymize_ip': true, 'linker': { 'domains': ['convertexperiments.com'], 'accept_incoming': true }, 'custom_map': {'dimension19': 'blog_publish_date'}, 'cookie_flags': 'secure;samesite=none' }); gtag('event', 'blog_publish_date_dimension', {'blog_publish_date': '2021-05-19'}); </script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N62PSB2');</script> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <script data-no-defer="1" data-ezscrex="false" data-cfasync="false" data-pagespeed-no-defer data-cookieconsent="ignore"> var ctPublicFunctions = {"_ajax_nonce":"64dae0d980","_rest_nonce":"7141df2f02","_ajax_url":"\/wp-admin\/admin-ajax.php","_rest_url":"https:\/\/www.convert.com\/wp-json\/","data__cookies_type":"alternative","data__ajax_type":"admin_ajax","data__bot_detector_enabled":"0","data__frontend_data_log_enabled":1,"text__wait_for_decoding":"Decoding the contact data, let us a few seconds to finish. Anti-Spam by CleanTalk","cookiePrefix":"","wprocket_detected":true,"host_url":"www.convert.com"} </script> <script data-no-defer="1" data-ezscrex="false" data-cfasync="false" data-pagespeed-no-defer data-cookieconsent="ignore"> var ctPublic = {"_ajax_nonce":"64dae0d980","settings__forms__check_internal":"0","settings__forms__check_external":"0","settings__forms__force_protection":0,"settings__forms__search_test":"1","settings__data__bot_detector_enabled":"0","settings__comments__form_decoration":"0","settings__sfw__anti_crawler":0,"blog_home":"https:\/\/www.convert.com\/","pixel__setting":"0","pixel__enabled":false,"pixel__url":null,"data__email_check_before_post":"1","data__email_check_exist_post":"0","data__cookies_type":"alternative","data__key_is_ok":true,"data__visible_fields_required":true,"wl_brandname":"Anti-Spam by CleanTalk","wl_brandname_short":"CleanTalk","ct_checkjs_key":"2f36e9b17da6ca171f687e3f4930c381635af6753ca04440baca481f2ceb148c","emailEncoderPassKey":"99bfd086159b2722807d54728a05599c","bot_detector_forms_excluded":"W10=","advancedCacheExists":true,"varnishCacheExists":false,"wc_ajax_add_to_cart":false} </script> <title>26 Tips to A/B Test Images and Increase Conversion Rates</title> <link rel="preload" as="font" href="https://www.convert.com/wp-content/themes/olympus/fonts/maven-pro/MavenPro-Regular.woff2" crossorigin> <link rel="preload" as="font" href="https://www.convert.com/wp-content/themes/olympus/fonts/lato/Lato-Regular.woff2" crossorigin> <meta name="description" content="If you’re looking for ways you can increase your conversion rate, the images on your website are a great place to start. Here are 26 tips & best practices that will help you boost conversions today!" /> <link rel="canonical" href="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="26 Tips To Use Images in Your A/B Tests and Increase Your Conversion Rates" /> <meta property="og:description" content="If you’re looking for ways you can increase your conversion rate, the images on your website are a great place to start. Here are 26 tips & best practices that will help you boost conversions today!" /> <meta property="og:url" content="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/" /> <meta property="og:site_name" content="A/B Testing Software" /> <meta property="article:publisher" content="https://www.facebook.com/convert" /> <meta property="article:modified_time" content="2023-03-28T11:08:30+00:00" /> <meta property="og:image" content="https://www.convert.com/wp-content/uploads/2021/05/26-Tips-To-Use-Images-in-Your-AB-Tests-and-Increase-Your-Conversion-Rates.jpg" /> <meta property="og:image:width" content="800" /> <meta property="og:image:height" content="593" /> <meta property="og:image:type" content="image/jpeg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@convert" /> <meta name="twitter:label1" content="Est. reading time" /> <meta name="twitter:data1" content="41 minutes" /> <meta name="twitter:label2" content="Written by" /> <meta name="twitter:data2" content="Daniel Daines Hutt" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#article","isPartOf":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"},"author":[{"@id":"https://www.convert.com/#/schema/person/d5102e59c17b35ae0d4cabfc45be46b8"}],"headline":"26 Tips To Use Images in Your A/B Tests and Increase Your Conversion Rates","datePublished":"2021-05-19T19:52:08+00:00","dateModified":"2023-03-28T11:08:30+00:00","mainEntityOfPage":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"},"wordCount":7255,"publisher":{"@id":"https://www.convert.com/#organization"},"image":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#primaryimage"},"thumbnailUrl":"https://www.convert.com/wp-content/uploads/2021/05/26-Tips-To-Use-Images-in-Your-AB-Tests-and-Increase-Your-Conversion-Rates.jpg","inLanguage":"en-US","editor":{"@type":"Person","name":"Carmen Apostu","url":"https://www.linkedin.com/in/carmenapostu/"},"video":[{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#video"}]},{"@type":"WebPage","@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/","url":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/","name":"26 Tips to A/B Test Images and Increase Conversion Rates","isPartOf":{"@id":"https://www.convert.com/#website"},"primaryImageOfPage":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#primaryimage"},"image":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#primaryimage"},"thumbnailUrl":"https://www.convert.com/wp-content/uploads/2021/05/26-Tips-To-Use-Images-in-Your-AB-Tests-and-Increase-Your-Conversion-Rates.jpg","datePublished":"2021-05-19T19:52:08+00:00","dateModified":"2023-03-28T11:08:30+00:00","description":"If you’re looking for ways you can increase your conversion rate, the images on your website are a great place to start. Here are 26 tips & best practices that will help you boost conversions today!","breadcrumb":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"]}],"video":[{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#video"}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#primaryimage","url":"https://www.convert.com/wp-content/uploads/2021/05/26-Tips-To-Use-Images-in-Your-AB-Tests-and-Increase-Your-Conversion-Rates.jpg","contentUrl":"https://www.convert.com/wp-content/uploads/2021/05/26-Tips-To-Use-Images-in-Your-AB-Tests-and-Increase-Your-Conversion-Rates.jpg","width":800,"height":593,"caption":"26 Tips To Use Images in Your A/B Tests and Increase Your Conversion Rates"},{"@type":"BreadcrumbList","@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Articles","item":"https://www.convert.com/blog/"},{"@type":"ListItem","position":2,"name":"A/B Testing","item":"https://www.convert.com/blog/category/a-b-testing/"},{"@type":"ListItem","position":3,"name":"26 Tips To Use Images in Your A/B Tests and Increase Your Conversion Rates"}]},{"@type":"WebSite","@id":"https://www.convert.com/#website","url":"https://www.convert.com/","name":"A/B Testing Software","description":"A Visual Website Optimizer Ways to Maximizer High Conversion Rates for eCommerce Agencies","publisher":{"@id":"https://www.convert.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://www.convert.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://www.convert.com/#organization","name":"Convert.com","url":"https://www.convert.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.convert.com/#/schema/logo/image/","url":"https://www.convert.com/wp-content/uploads/2021/01/convert-logo-black-transparent.png","contentUrl":"https://www.convert.com/wp-content/uploads/2021/01/convert-logo-black-transparent.png","width":567,"height":122,"caption":"Convert.com"},"image":{"@id":"https://www.convert.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/convert","https://x.com/convert","https://www.linkedin.com/company/convert-com","http://pinterest.com/convertcom/","https://www.youtube.com/channel/UCb3MRutvDELM_843ZJ-5tww"],"publishingPrinciples":"https://www.convert.com/write-for-us/","ethicsPolicy":"https://www.convert.com/conscious-business/","diversityStaffingReport":"https://www.convert.com/jobs/"},{"@type":"VideoObject","@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#video","name":"26 Tips to A/B Test Images and Increase Conversion Rates","isPartOf":{"@id":"https://www.convert.com/blog/a-b-testing/image-conversion-optimization/#article"},"thumbnailUrl":"https://www.convert.com/wp-content/uploads/2021/05/vjg698u2mvo.jpg","description":"If you’re looking for ways you can increase your conversion rate, the images on your website are a great place to start. Here are 26 tips & best practices that will help you boost conversions today!","uploadDate":"2021-05-19T19:52:08+00:00","width":480,"height":360,"embedUrl":"https://www.youtube.com/embed/vJG698U2Mvo","duration":"PT1M22S","isFamilyFriendly":true,"inLanguage":"en-US"},{"@type":"Person","@id":"https://www.convert.com/#/schema/person/d5102e59c17b35ae0d4cabfc45be46b8","name":"Daniel Daines Hutt","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://www.convert.com/#/schema/person/image/2e0ccbbdb04b44dc92a1e48dfc570ec6","url":"https://www.convert.com/wp-content/uploads/2021/03/Daniel-Daines-Hutt-96x96.png","contentUrl":"https://www.convert.com/wp-content/uploads/2021/03/Daniel-Daines-Hutt-96x96.png","caption":"Daniel Daines Hutt"},"description":"Daniel's goal is to take complex CRO topics and break them down so you not only understand them but take action on them and see more lift from your business. A psychology and behavior nerd, Daniel has a background in content marketing and direct response advertising. He’s had articles in the top 10 of all time on Inbound and Growthhackers. When not writing for Convert, he teaches people how to write more effective content and then leverage it via detailed distribution methods at www.ampmycontent.com","sameAs":["convert-diego"],"url":"https://www.convert.com/author/daniel-daines/"}]}</script> <meta property="og:video" content="https://www.youtube.com/embed/vJG698U2Mvo" /> <meta property="og:video:type" content="text/html" /> <meta property="og:video:duration" content="82" /> <meta property="og:video:width" content="480" /> <meta property="og:video:height" content="360" /> <meta property="ya:ovs:adult" content="false" /> <meta property="ya:ovs:upload_date" content="2021-05-19T19:52:08+00:00" /> <meta property="ya:ovs:allow_embed" content="true" /> <link rel='dns-prefetch' href='//js.hs-scripts.com' /> <link rel='dns-prefetch' href='//plausible.io' /> <link rel="alternate" type="application/rss+xml" title="A/B Testing Software » Feed" href="https://www.convert.com/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://www.convert.com/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='wp-block-library-inline-css' type='text/css'> .is-style-table-card{ box-shadow: 0 4px 8px rgb(133 46 126 / 25%); border-radius: 1rem; padding: 24px; } .is-style-table-card table thead{ background-color: #FFF2F9; color: #770046; } .is-style-table-card table th{ border: 0; text-align: left; } .is-style-table-card table td{ border: 0; } .is-style-table-card table tr{ border-bottom: 1px dashed #d4e0e7; } .is-style-table-card table tr:last-child{ border-bottom: 0; } .wp-block-image.is-style-img-no-dropshadow img{ box-shadow: none; } </style> <style id='co-authors-plus-coauthors-style-inline-css' type='text/css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css' type='text/css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css' type='text/css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link data-minify="1" rel='stylesheet' id='bcct_style-css' href='https://www.convert.com/wp-content/cache/min/1/wp-content/plugins/better-click-to-tweet/assets/css/styles.css?ver=1738761933' type='text/css' media='all' /> <link rel='stylesheet' id='ct_public_css-css' href='https://www.convert.com/wp-content/plugins/cleantalk-spam-protect/css/cleantalk-public.min.css?ver=6.49' type='text/css' media='all' /> <link rel='stylesheet' id='ct_email_decoder_css-css' href='https://www.convert.com/wp-content/plugins/cleantalk-spam-protect/css/cleantalk-email-decoder.min.css?ver=6.49' type='text/css' media='all' /> <link rel='stylesheet' id='ivory-search-styles-css' href='https://www.convert.com/wp-content/plugins/add-search-to-menu/public/css/ivory-search.min.css?ver=5.5.9' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='style-css' href='https://www.convert.com/wp-content/cache/min/1/wp-content/themes/olympus/style.css?ver=1738761903' type='text/css' media='all' /> <link rel='stylesheet' id='jquery.fancybox-css' href='https://www.convert.com/wp-content/themes/olympus/fancybox/dist/jquery.fancybox.min.css?ver=6.7.1' type='text/css' media='all' /> <link data-minify="1" rel='stylesheet' id='css-convert-css' href='https://www.convert.com/wp-content/cache/min/1/wp-content/themes/olympus/css-convert/style.min.css?ver=1738761903' type='text/css' media='all' /> <style id='css-convert-inline-css' type='text/css'> .fieldset-cf7mls-wrapper .fieldset-cf7mls .cf7mls-btns { min-height: auto !important; } .submitting .submit-loader { display: block !important; } .wpcf7-free-text { display: none; } .cf7mls_btns, .fieldset-cf7mls-wrapper .cf7mls-btns .cf7mls_next.action-button, .cf7mls-btns .cf7mls_back.action-button { width: 100%; color: #ffffff; font-weight: bold; margin: 0; padding: 13px 24px; background-color:#06f; }, </style> <link data-minify="1" rel='stylesheet' id='brand-css' href='https://www.convert.com/wp-content/cache/min/1/wp-content/themes/olympus/css-convert/brand.min.css?ver=1738761904' type='text/css' media='all' /> <link rel='stylesheet' id='bsfrt_frontend-css' href='https://www.convert.com/wp-content/plugins/read-meter/assets/css/bsfrt-frontend-css.min.css?ver=1.0.9' type='text/css' media='all' /> <style id='rocket-lazyload-inline-css' type='text/css'> .rll-youtube-player{position:relative;padding-bottom:56.23%;height:0;overflow:hidden;max-width:100%;}.rll-youtube-player:focus-within{outline: 2px solid currentColor;outline-offset: 5px;}.rll-youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0}.rll-youtube-player img{bottom:0;display:block;left:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;-webkit-transition:.4s all;-moz-transition:.4s all;transition:.4s all}.rll-youtube-player img:hover{-webkit-filter:brightness(75%)}.rll-youtube-player .play{height:100%;width:100%;left:0;top:0;position:absolute;background:url(https://www.convert.com/wp-content/plugins/wp-rocket/assets/img/youtube.png) no-repeat center;background-color: transparent !important;cursor:pointer;border:none;}.wp-embed-responsive .wp-has-aspect-ratio .rll-youtube-player{position:absolute;padding-bottom:0;width:100%;height:100%;top:0;bottom:0;left:0;right:0} </style> <script type="text/javascript" data-pagespeed-no-defer src="https://www.convert.com/wp-content/plugins/cleantalk-spam-protect/js/apbct-public-bundle.min.js?ver=6.49" id="ct_public_functions-js"></script> <script type="text/javascript" defer data-domain='convert.com' data-api='https://plausible.io/api/event' data-cfasync='false' src="https://plausible.io/js/plausible.outbound-links.tagged-events.js?ver=2.1.4" id="plausible"></script> <script type="text/javascript" id="plausible-analytics-js-after"> /* <![CDATA[ */ window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://www.convert.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.convert.com%2Fblog%2Fa-b-testing%2Fimage-conversion-optimization%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://www.convert.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.convert.com%2Fblog%2Fa-b-testing%2Fimage-conversion-optimization%2F&format=xml" /> <script class="hsq-set-content-id" data-content-id="blog-post"> var _hsq = _hsq || []; _hsq.push(["setContentType", "blog-post"]); </script> <style> .dialog-container { display: flex; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; } .dialog-container[aria-hidden='true'] { display: none; } .dialog-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(43, 46, 56, 0.9); animation: fade-in 200ms both; } .dialog-content { margin: auto; z-index: 2; position: relative; animation: fade-in 400ms 200ms both, slide-up 400ms 200ms both; max-width: 90%; width: auto; border-radius: 2px; } a[data-a11y-dialog-show] { cursor: zoom-in; } #previewImg { max-height: 90vh; } @keyframes fade-in { from { opacity: 0; } } @keyframes slide-up { from { transform: translateY(10%); } } .dialog-close { position: absolute; top: -24px; right: 0; border: 0; padding: 0; background-color: white; font-weight: bold; font-size: 1.25em; width: 1.2em; height: 1.2em; text-align: center; cursor: pointer; transition: 0.15s; color: black; } </style> <meta name='plausible-analytics-version' content='2.1.4' /> <style type="text/css"> .admin-bar .progress-container-top { background: #121822; height: 12px; } .progress-container-top { background: #121822; height: 12px; } .progress-container-bottom { background: #121822; height: 12px; } .progress-bar { background: #dd275b; height: 12px; width: 0%; } </style> <script id="wpacu-preload-async-css-fallback"> /*! LoadCSS. [c]2020 Filament Group, Inc. MIT License */ /* This file is meant as a standalone workflow for - testing support for link[rel=preload] - enabling async CSS loading in browsers that do not support rel=preload - applying rel preload css once loaded, whether supported or not. */ (function(w){"use strict";var wpacuLoadCSS=function(href,before,media,attributes){var doc=w.document;var ss=doc.createElement('link');var ref;if(before){ref=before}else{var refs=(doc.body||doc.getElementsByTagName('head')[0]).childNodes;ref=refs[refs.length-1]} var sheets=doc.styleSheets;if(attributes){for(var attributeName in attributes){if(attributes.hasOwnProperty(attributeName)){ss.setAttribute(attributeName,attributes[attributeName])}}} ss.rel="stylesheet";ss.href=href;ss.media="only x";function ready(cb){if(doc.body){return cb()} setTimeout(function(){ready(cb)})} ready(function(){ref.parentNode.insertBefore(ss,(before?ref:ref.nextSibling))});var onwpaculoadcssdefined=function(cb){var resolvedHref=ss.href;var i=sheets.length;while(i--){if(sheets[i].href===resolvedHref){return cb()}} setTimeout(function(){onwpaculoadcssdefined(cb)})};function wpacuLoadCB(){if(ss.addEventListener){ss.removeEventListener("load",wpacuLoadCB)} ss.media=media||"all"} if(ss.addEventListener){ss.addEventListener("load",wpacuLoadCB)} ss.onwpaculoadcssdefined=onwpaculoadcssdefined;onwpaculoadcssdefined(wpacuLoadCB);return ss};if(typeof exports!=="undefined"){exports.wpacuLoadCSS=wpacuLoadCSS}else{w.wpacuLoadCSS=wpacuLoadCSS}}(typeof global!=="undefined"?global:this)) </script><noscript><style id="rocket-lazyload-nojs-css">.rll-youtube-player, [data-lazy-src]{display:none !important;}</style></noscript><style id="rocket-lazyrender-inline-css">[data-wpr-lazyrender] {content-visibility: auto;}</style><meta name="generator" content="WP Rocket 3.18" data-wpr-features="wpr_preload_fonts wpr_lazyload_images wpr_lazyload_iframes wpr_automatic_lazy_rendering wpr_minify_css wpr_desktop wpr_preload_links" /></head> <body class="convert_blog-template-default single single-convert_blog postid-16301 wp-embed-responsive olympus header_1" id="16301"> <div id="page-bg"></div> <header class="header_1 light-header"> <div id="menuWrapper" class="grid"> <div class="flex flex-column flex-row--dt flex-wrap items-center relative u-py-24"> <div class="grid__12 grid__2--dt"> <div id="mobileMenu"> <div id="menu" style="width: 28px; height: 28px;" role="button" aria-label="Menu" class=""> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M17.5 6h-15a.5.5 0 010-1h15a.5.5 0 010 1zM17.5 11h-15a.5.5 0 010-1h15a.5.5 0 010 1zM17.5 16h-15a.5.5 0 010-1h15a.5.5 0 010 1z"/> </svg> </div> <div id="closeMenu" class="dn svg-white " style="width: 28px; height: 28px;" role="button" aria-label="Close Menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M10.707 10.5l8.646-8.646a.5.5 0 00-.707-.707L10 9.793 1.354 1.147a.5.5 0 00-.707.707L9.293 10.5.647 19.146a.5.5 0 00.708.707l8.646-8.646 8.646 8.646a.498.498 0 00.708 0 .5.5 0 000-.707L10.709 10.5z"/> </svg> </div> </div> <div id="logo" class="flex"> <a href="/" aria-label="Convert Insights, Inc."> <svg aria-label="Convert Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 33" class="svg-black"><path d="M17.94 24.823h4.699c-.69 2.634-2.007 4.64-3.947 6.018C16.748 32.283 14.308 33 11.365 33c-3.57 0-6.355-1.157-8.36-3.475C1 27.27 0 24.04 0 19.837c0-4.009.968-7.142 2.912-9.397 2-2.319 4.79-3.482 8.36-3.482 3.76 0 6.668 1.13 8.736 3.385 1.127 1.38 1.94 2.978 2.444 4.794h-6.578c-.314-.624-.626-1.092-.936-1.409-.82-.878-1.976-1.317-3.476-1.317-1.382 0-2.508.44-3.383 1.317-1.127 1.254-1.691 3.327-1.691 6.21 0 2.88.564 4.915 1.69 6.107.81 1.002 2.03 1.503 3.664 1.503 1.065 0 1.968-.217 2.724-.657.188-.061.358-.173.514-.329.158-.16.329-.33.52-.517.122-.19.374-.438.748-.752.381-.31.942-.47 1.692-.47" /><path fill-rule="evenodd" clip-rule="evenodd" d="M24.314 25.72c.561 1.912 1.505 3.43 2.818 4.557 1.252 1.127 2.931 1.928 5.029 2.394 2.095.474 4.18.43 6.246-.138 2.314-.502 4.225-1.788 5.735-3.855.681-1.002 1.25-2.222 1.688-3.663.436-1.442.655-3.166.655-5.178 0-2.756-.535-5.165-1.6-7.236-1.124-2.316-2.876-3.95-5.255-4.888-2.066-.756-4.384-.955-6.953-.613-2.569.346-4.667 1.46-6.294 3.34-1.007 1.124-1.74 2.539-2.214 4.232a19.12 19.12 0 00-.7 5.078c0 2.06.28 4.056.845 5.97zm5.549-5.55c-.129-2.853.464-4.998 1.779-6.442.438-.436 1.13-.798 2.068-1.081a4.58 4.58 0 012.815.048c.942.316 1.775 1.033 2.491 2.164.724 1.127 1.081 2.82 1.081 5.078-.06 2.503-.467 4.321-1.22 5.449-.751 1.127-1.617 1.832-2.585 2.117a4.47 4.47 0 01-2.867-.097c-.935-.342-1.594-.763-1.968-1.267-.942-1.124-1.475-3.113-1.594-5.97z" /><path d="M69.311 32.534h-3.285c-.94 0-1.708-.3-2.302-.895-.597-.598-.89-1.362-.89-2.302V16.552c0-1.505-.458-2.604-1.366-3.295a4.928 4.928 0 00-3.054-1.034 4.73 4.73 0 00-3.004 1.034c-.878.69-1.317 1.79-1.317 3.295v15.982h-6.572V17.867c0-4.26 1.107-7.113 3.334-8.558 2.221-1.44 4.677-2.222 7.373-2.351 2.756 0 5.29.723 7.61 2.164 2.318 1.44 3.473 4.358 3.473 8.745v14.667z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M118.667 24.823h-4.698c-.747 0-1.333.159-1.735.47-.408.314-.647.562-.704.752l-.148.147-.372.37a1.33 1.33 0 01-.517.33c-.751.44-1.659.656-2.722.656-1.629 0-2.855-.501-3.666-1.503-.877-.94-1.346-2.383-1.406-4.326h16.249c.064-.123.095-.341.095-.658v-1.034c0-4.134-.999-7.362-3.003-9.684-2.071-2.255-4.982-3.385-8.742-3.385-3.563 0-6.355 1.163-8.357 3.482-1.942 2.255-2.917 5.388-2.917 9.397 0 4.203 1.003 7.433 3.008 9.688 2.004 2.318 4.794 3.475 8.362 3.475 2.945 0 5.388-.718 7.331-2.16 1.936-1.378 3.254-3.384 3.942-6.017zm-6.389-7.335h-9.579c.06-1.628.529-2.88 1.407-3.76.878-.878 2.003-1.317 3.38-1.317 1.504 0 2.662.44 3.48 1.317.751.814 1.186 2.067 1.312 3.76z" /><path d="M120.077 32.533V20.402c0-2.442.362-4.494 1.08-6.157.721-1.66 1.705-2.991 2.96-3.992 1.19-.944 2.583-1.632 4.182-2.07a18.552 18.552 0 014.928-.66H134.168V14.2h-2.158c-1.818 0-3.168.44-4.04 1.311-.879.882-1.318 2.262-1.318 4.142v12.88h-6.575zM145.907 32.533c-2.062.121-4.304.093-6.713-.095-2.414-.188-3.614-1.723-3.614-4.606V.187h3.381c.81 0 1.533.317 2.158.943.627.627.941 1.38.941 2.258v4.229h3.846v1.317c0 .937-.31 1.706-.933 2.304a3.163 3.163 0 01-2.257.894h-.655v13.913c0 1.063.621 1.598 1.878 1.598h1.967v4.89h.001z" /><path opacity=".5" d="M71.839 8.985l-1.47 3.61 3.073 6.95 3.341-8.689-4.944-1.871z" fill="inherit"/><path opacity=".75" d="M80.39 8.316l-5.478 14.438 3.073 7.085 7.617-19.517-5.211-2.006z" fill="inherit"/><path d="M96.025 10.322L94.42 1.098l-7.35 5.614 2.005.802-9.754 25.266h5.612L94.02 9.52l2.005.802zM149.906 3.124c-1.492 0-2.7 1.226-2.7 2.715 0 1.5 1.208 2.714 2.7 2.714a2.715 2.715 0 000-5.43zm0 4.904a2.176 2.176 0 01-2.178-2.19c0-1.204.969-2.189 2.178-2.189a2.19 2.19 0 010 4.379zm1.198-.887c-.577-1.062-.544-1.007-.577-1.05.261-.154.425-.46.425-.81 0-.57-.327-.931-1.1-.931h-.861a.132.132 0 00-.13.131v2.715c0 .077.054.131.13.131h.425a.133.133 0 00.131-.131v-.909h.348l.512.975c.022.043.076.065.12.065h.457c.109 0 .164-.098.12-.186zm-1.198-1.478h-.359v-.7h.294c.348 0 .424.131.424.35 0 .23-.13.35-.359.35z" /></svg> </a> </div> </div> <div class="grid__12 grid__10--dt omega"> <div id="navigation"> <nav class="flex flex-wrap items-center justify-space-between--dt"> <ul id="menu-main" class="menu themeple_megemenu" role="menu"><li role="menuitem" id="menu-item-2882" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/" >Features</a></li> <li role="menuitem" id="menu-item-2883" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/pricing/" >Pricing</a></li> <li role="menuitem" id="menu-item-5172" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/why-convert-agency/" >For Agencies</a></li> <li role="menuitem" id="menu-item-5458" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/demo/" >Request a Demo</a></li> <li role="menuitem" id="menu-item-18993" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#" aria-haspopup="true" aria-expanded="false">Company</a> <ul class="sub-menu non_mega_menu"> <li role="menuitem" id="menu-item-18995" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/about/" >About Us</a></li> <li role="menuitem" id="menu-item-19000" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/blog/" >Blog</a></li> <li role="menuitem" id="menu-item-18998" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/academy/" >Academy</a></li> <li role="menuitem" id="menu-item-18999" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/gdpr/" >GDPR</a></li> </ul> </li> </ul> <ul class="menu u-pt-80 u-tb-pt-0"> <li><a href="https://app.convert.com/">Login</a></li> <li> <a id="header-freetrial-button" href="#subscribeFreeTrial" class="button button-white-ghost signup_link">Try For Free</a> </li> </ul> </nav> </div> </div> </div> </div> </header> <div class="top_wrapper"> <div class="header_page"> <div class="container"> <div class="row-fluid"> <div class="breadcrumbss"> <ul class="page_parents pull-right"> <li><a href="https://www.convert.com">Home</a>-</li> <li><a href="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/">5 Ways Digital Marketers Use Call Tracking to Grow Their Business</a></li> </ul> </div> </div> </div> </div> <section id="content" data-livechat-status="off"> <div id="blogs" class="max-w-7xl px-6 lg:px-24 mx-auto mb-20 font-oxygen lg:grid lg:grid-cols-12 lg:gap-6" style="transform: translate(0, 80px)"> <div class="lg:col-span-8"> <article id="post-16301" class="normal brand-color-dark-black u-mb-56 post-16301 convert_blog type-convert_blog status-publish has-post-thumbnail hentry blogcategory-a-b-testing post_editors-carmen"> <div class="post_format_standart"> <div class="blog-content group"> <div > <a href='/blog/' class='text-slate-700 text-small'>Blog</a><span class='text-slate-700 text-small px-2'>/</span><a href='/blog/category/a-b-testing/' class='text-blue-800 inline-block text-small'>A/B Testing</a> </div> <h1 class="text-4xl pt-3"> 26 Tips To Use Images in Your A/B Tests and Increase Your Conversion Rates</h1> <div class="pt-6 text-sm flex flex-wrap lg:flex-nowrap items-center"> <div class="flex items-center relative mr-3"> <div class="flex"> <img data-src="https://www.convert.com/wp-content/uploads/2021/03/Daniel-Daines-Hutt-96x96.png" alt="Daniel Daines Hutt" class="rounded-full border border-slate-100" width="36" height="36" style="transform: translateX();"> </div> <div class="pl-6 md:pl-2"> By <a href="https://www.convert.com/author/daniel-daines/" title="Posts by Daniel Daines Hutt" class="author url fn" rel="author">Daniel Daines Hutt</a> <div class="text-slate-500"> May 19, 2021 · <span class="bsf-rt-reading-time"><span class="bsf-rt-display-label" prefix="Reading Time"> </span> <span class="bsf-rt-display-time" reading_time="30"></span> <span class="bsf-rt-display-postfix" postfix="mins"></span></span> </div> </div> </div> <div class="mt-6 lg:mt-0"> <a href="https://notbyai.fyi" target="_blank" rel="noopener noreferrer"> <img data-src="https://www.convert.com/wp-content/themes/olympus/img/Written-By-Human-Not-By-AI-Badge-white.svg" alt="Written By Human Not By AI" width="131" height="42"> </a> </div> </div> <div id="bsf_rt_marker"></div> <p>Images are one of the most important aspects of selling online.</p> <p>It doesn’t matter if it’s physical products, software, or even services. Having images on your site can help you connect with your audience and give context to ideas and offers.</p> <p>The problem?</p> <p>Far too many websites use images as an afterthought. They try to replicate their competitors’ designs with placeholder shots and stock photos, without any strategy as to why and how to best use their image.</p> <p>In this guide, we’re going to walk you through 26 tips, best practices, and test ideas that you can use to improve your conversion rate—all by focusing on image optimization.</p> <h2 class="wp-block-heading" id="h-what-is-image-optimization"><strong>What Is Image Optimization?</strong></h2> <p>If you’ve been around marketing and CRO for a while, you might think of image optimization as improving your image loading speed. The fact is, it can mean different things in different industries.</p> <p>Sure, loading speed is important in CRO, but it’s not what we’re referring to today. Instead, we’re talking about tests and improvements you can implement to improve an image’s effect on the end goal for your page.</p> <p>The weird thing is most CROs don’t focus on the image. In fact, image optimization seems to be more of a focus in the UX or PPC space.</p> <p><a href="https://uxmag.com/articles/evaluating-the-usability-of-web-photos">UX designers</a> use images to tie together design ideas and improve the on-page user experience.</p> <p><a href="https://www.ampmycontent.com/ad-design/">Paid advertisers focus on the image</a> first, as it’s the initial touchpoint that gets the audience’s attention. Improving the images CTR is the biggest lift they can optimize for before they then test other things.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/ad-example.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="601" height="737" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20601%20737'%3E%3C/svg%3E" alt="image optimization PPC" class="wp-image-16302" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/ad-example.jpg 601w, https://www.convert.com/wp-content/uploads/2021/05/ad-example-245x300.jpg 245w" data-lazy-sizes="(max-width: 601px) 100vw, 601px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/ad-example.jpg" /><noscript><img decoding="async" width="601" height="737" src="https://www.convert.com/wp-content/uploads/2021/05/ad-example.jpg" alt="image optimization PPC" class="wp-image-16302" srcset="https://www.convert.com/wp-content/uploads/2021/05/ad-example.jpg 601w, https://www.convert.com/wp-content/uploads/2021/05/ad-example-245x300.jpg 245w" sizes="(max-width: 601px) 100vw, 601px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.ampmycontent.com/ad-design/">In PPC, the image is the first touchpoint that affects conversions.</a></figcaption></figure></div> <p>We don’t seem to test images as much in CRO, yet it can directly affect our results…</p> <h3 class="wp-block-heading"><strong>What Kind of Impact Can Images Have on Optimization?</strong></h3> <p>Our brains are hardwired to save energy.</p> <p>When given a task, we’ll always look for the easiest way to achieve it. <a href="https://scholarsmine.mst.edu/masters_theses/5128/">This is why we scan a page in 2.6 seconds</a>, looking for key focal points to help us understand the content, and get some context before we spend too much time or effort.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/2.6-secs.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="910" height="886" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20910%20886'%3E%3C/svg%3E" alt="web design eye tracking" class="wp-image-16303" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/2.6-secs.jpg 910w, https://www.convert.com/wp-content/uploads/2021/05/2.6-secs-300x292.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/2.6-secs-36x36.jpg 36w" data-lazy-sizes="(max-width: 910px) 100vw, 910px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/2.6-secs.jpg" /><noscript><img decoding="async" width="910" height="886" src="https://www.convert.com/wp-content/uploads/2021/05/2.6-secs.jpg" alt="web design eye tracking" class="wp-image-16303" srcset="https://www.convert.com/wp-content/uploads/2021/05/2.6-secs.jpg 910w, https://www.convert.com/wp-content/uploads/2021/05/2.6-secs-300x292.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/2.6-secs-36x36.jpg 36w" sizes="(max-width: 910px) 100vw, 910px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://scholarsmine.mst.edu/masters_theses/5128/">First impressions count…</a></figcaption></figure></div> <p>We’re basically looking for signs to see if it’s worth reading or not, and that’s why images are so important. They help us scan and understand the page faster, decreasing the chance that we bounce off.</p> <p>It’s not just that first touchpoint though.</p> <p><a href="https://www.convert.com/blog/growth-marketing/how-to-effectively-use-images-for-better-conversion/">Images help us learn</a>, remember, connect ideas, answer questions, reduce complexity, visualize, and have emotional connections with the content on the page.</p> <p>This can all lead to:</p> <ul class="wp-block-list"> <li>Lower bounce rate,</li> <li>Further page read,</li> <li>Better user experience,</li> <li>Faster speed to association and understanding,</li> <li>Building of desire,</li> <li>And higher CTR.</li> </ul> <h3 class="wp-block-heading"><strong>Expected Vs Unexpected Results</strong></h3> <p>Now, before we go through the ideas below, remember that you always need to <strong>test</strong> to see how they work for you.</p> <p>A test that gives a lift for one company can cause a drop for others. The irony, of course, is that things that *should* give lift don’t always work.</p> <h4 class="wp-block-heading">Example</h4> <p>I ran a paid traffic campaign a few years back to A/B test 2 images, but by accident, I added a 3rd and went away camping for the weekend before I realized.</p> <p>(Facebook allows you to upload multiple images to test at once while keeping the body copy the same.) The first 2 images hinted at the end results promised on the page, an angle that should have driven the most attention. The 3rd image was a random background that we made that just</p> <p>happened to show one of our ‘About Page’ headshots.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake.png" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1024" height="768" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20768'%3E%3C/svg%3E" alt="image choice unexpected win" class="wp-image-16304" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-1024x768.png 1024w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-300x225.png 300w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-930x698.png 930w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake.png 1152w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-1024x768.png" /><noscript><img decoding="async" width="1024" height="768" src="https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-1024x768.png" alt="image choice unexpected win" class="wp-image-16304" srcset="https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-1024x768.png 1024w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-300x225.png 300w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake-930x698.png 930w, https://www.convert.com/wp-content/uploads/2021/05/example-ad-mistake.png 1152w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.ampmycontent.com/ad-design/">Which do you think won?</a></figcaption></figure></div> <p>The thing is the ‘mistake’ image got almost double the CTR of the control and the hypothesized treatment.</p> <p>(The fact that the image had a human face on it may have appealed more to people.)</p> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p>We can’t always know what will work, so use these ideas as inspiration. Always test for yourself.</p> </div> </div> <h2 class="wp-block-heading"><strong>26 A/B Tests, Checks, And Tips To Improve Your Conversion Rate With Images</strong></h2> <h3 class="wp-block-heading"><strong>#1: Check How Your Audience Responds To The Image</strong></h3> <p>Before you make any changes to your images, assess how your audience is responding to your page.</p> <p>What are they actually doing on the page?</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/initial-results.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="505" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20505'%3E%3C/svg%3E" alt="A/B test report Convert Experiences" class="wp-image-16305" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/initial-results.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/initial-results-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/initial-results-930x470.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/initial-results.jpg" /><noscript><img decoding="async" width="1000" height="505" src="https://www.convert.com/wp-content/uploads/2021/05/initial-results.jpg" alt="A/B test report Convert Experiences" class="wp-image-16305" srcset="https://www.convert.com/wp-content/uploads/2021/05/initial-results.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/initial-results-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/initial-results-930x470.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com/blog/a-b-testing/learn-from-a-b-tests/">Are they clicking or bouncing off?</a></figcaption></figure></div> <p>Heatmap the page to see where your users are focusing. If you can afford it, it might be worth running eye-tracking tests also.</p> <p><strong>Sidenote:</strong></p> <p>We integrate with Hotjar and other <a href="https://www.convert.com/blog/optimization/heatmap-session-replay-tools-comparison/">heatmap tools</a> directly in the Convert Experiences app.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="770" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20770'%3E%3C/svg%3E" alt="Convert Experiences Hotjar integration" class="wp-image-16306" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2-300x231.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2-930x716.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2.jpg" /><noscript><img decoding="async" width="1000" height="770" src="https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2.jpg" alt="Convert Experiences Hotjar integration" class="wp-image-16306" srcset="https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2-300x231.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/integration-Hotjar-screenshot2-930x716.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com/integrations/hotjar-integration/">You can learn how here.</a></figcaption></figure></div> <p>OK, so now you know how your audience is interacting with your page and images, let’s walk through some improvements and ideas…</p> <h4 class="wp-block-heading"><strong>Are They Seeing Your Image But Not Paying Attention?</strong></h4> <p>Have you ever heard of <strong>inattention or ‘change’ blindness</strong>?</p> <p>It’s a phenomenon where if people are focusing on one thing, they often miss out on major changes in their own view.</p> <p>The best example of this is the Gorilla test. In the video, people are asked to count how many times the players in white t-shirts are passing the basketball.</p> <figure class="wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper"> <div class="rll-youtube-player" data-src="https://www.youtube.com/embed/vJG698U2Mvo" data-id="vJG698U2Mvo" data-query="feature=oembed" data-alt="selective attention test"></div><noscript><iframe title="selective attention test" width="1200" height="900" src="https://www.youtube.com/embed/vJG698U2Mvo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript> </div></figure> <p>Because of this, 50% of the people who watched the video failed to see someone in a gorilla suit walk onto the middle of the field of view, beat their chest, and then walk off. All because the audience’s focus is drawn to a different location and color pattern.</p> <p>They’re looking for the ball, blue jeans, and white t-shirts and ignore everything else.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/FOCUS.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="478" height="219" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20478%20219'%3E%3C/svg%3E" alt="Gorilla test internet user focal point" class="wp-image-16308" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/FOCUS.jpg 478w, https://www.convert.com/wp-content/uploads/2021/05/FOCUS-300x137.jpg 300w" data-lazy-sizes="(max-width: 478px) 100vw, 478px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/FOCUS.jpg" /><noscript><img decoding="async" width="478" height="219" src="https://www.convert.com/wp-content/uploads/2021/05/FOCUS.jpg" alt="Gorilla test internet user focal point" class="wp-image-16308" srcset="https://www.convert.com/wp-content/uploads/2021/05/FOCUS.jpg 478w, https://www.convert.com/wp-content/uploads/2021/05/FOCUS-300x137.jpg 300w" sizes="(max-width: 478px) 100vw, 478px" /></noscript></a><figcaption class="wp-element-caption"><a href="http://www.theinvisiblegorilla.com/gorilla_experiment.html">Source</a></figcaption></figure></div> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p>Just because you have images doesn’t mean that people are paying attention to them, so look at your heatmaps to <a href="https://www.convert.com/hypothesis-generator/">form a hypothesis</a>.</p> </div> </div> <p>In this example for my blog, I can see that people are not clicking on the CTA.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="679" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20679'%3E%3C/svg%3E" alt="heatmap eye tracking example" class="wp-image-16309" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS-300x204.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS-930x631.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS.jpg" /><noscript><img decoding="async" width="1000" height="679" src="https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS.jpg" alt="heatmap eye tracking example" class="wp-image-16309" srcset="https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS-300x204.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/NO-CLICKS-930x631.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.ampmycontent.com/perfect-podcast-pitch/">Are they paying attention to your CTA?</a></figcaption></figure></div> <p>It could be that the button is just not large or clear enough to draw their attention, or perhaps, they just don’t understand that it’s a button to click on.</p> <p><br>More on this in a second, but for now we can see that people are not paying attention to the image or the CTA.</p> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>[WEBINAR]</b><a href="https://www.convert.com/academy/visual-attention-tracking-users-looking-theyre-supposed/"> Visual Attention Tracking: Are Your Users Looking Where They’re Supposed To?</a></p> </div> </div> <h4 class="wp-block-heading"><strong>Do They Know What They Should Be Clicking On?</strong></h4> <p>If your image contains a visual CTA to click on, do they realize this and are they doing it?</p> <p>There’s a concept called <strong>perceived affordances</strong>, coined in 1988 by a <a href="https://www.amazon.com/Design-Everyday-Things-Revised-Expanded/dp/0465050654">UX designer called Don Norman.</a></p> <p>The idea is this. If you want people to take a specific action (such as clicking a button), they need to be able to perceive, understand and interpret what the object is and what they need to do with it.</p> <p>We often look for similarities between something we have experienced before in the real world, to then teach us how to interact with something similar online.</p> <h5 class="wp-block-heading">Example</h5> <p>A button on a keyboard has shape, texture, and shadow. From experience, we know that we can press down or click on it.</p> <p>Because people are used to seeing these ‘affordances’, designers applied them to their CTA buttons online. The problem is that a few years back people went overboard on this and you would have buttons with large shadows or exaggerated features just popping out of the screen.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/scammy-button.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="440" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20150'%3E%3C/svg%3E" alt="button image A/B test example" class="wp-image-16310" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/scammy-button.jpg 440w, https://www.convert.com/wp-content/uploads/2021/05/scammy-button-300x102.jpg 300w" data-lazy-sizes="(max-width: 440px) 100vw, 440px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/scammy-button.jpg" /><noscript><img decoding="async" width="440" height="150" src="https://www.convert.com/wp-content/uploads/2021/05/scammy-button.jpg" alt="button image A/B test example" class="wp-image-16310" srcset="https://www.convert.com/wp-content/uploads/2021/05/scammy-button.jpg 440w, https://www.convert.com/wp-content/uploads/2021/05/scammy-button-300x102.jpg 300w" sizes="(max-width: 440px) 100vw, 440px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.shutterstock.com/image-vector/buy-now-red-threedimensional-square-button-222237040">Source</a></figcaption></figure></div> <p>This styling was used by a lot of less trustworthy sites, so there’s been a move away from this. The thing is we seem to have dialed it back too far and a lot of people are now using buttons that seem flat.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="440" height="151" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20440%20151'%3E%3C/svg%3E" alt="flat button image A/B test example" class="wp-image-16311" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now.jpg 440w, https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now-300x103.jpg 300w" data-lazy-sizes="(max-width: 440px) 100vw, 440px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now.jpg" /><noscript><img decoding="async" width="440" height="151" src="https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now.jpg" alt="flat button image A/B test example" class="wp-image-16311" srcset="https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now.jpg 440w, https://www.convert.com/wp-content/uploads/2021/05/flat-buy-now-300x103.jpg 300w" sizes="(max-width: 440px) 100vw, 440px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://livefreecreative.co/5-tips-for-hosting-a-backyard-bbq/buy-now-button-brawny-red/">Source</a></figcaption></figure></div> <p>In the example above, there’s no shadow or depth to help us understand that we can click on it, which may well be affecting the CTR. Compare that to Amazon that has a slight shade below, and even a light source on the top of the button to help make it stand out.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/affordance.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="630" height="319" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20630%20319'%3E%3C/svg%3E" alt="button image example Amazon" class="wp-image-16312" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/affordance.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/affordance-300x152.jpg 300w" data-lazy-sizes="(max-width: 630px) 100vw, 630px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/affordance.jpg" /><noscript><img decoding="async" width="630" height="319" src="https://www.convert.com/wp-content/uploads/2021/05/affordance.jpg" alt="button image example Amazon" class="wp-image-16312" srcset="https://www.convert.com/wp-content/uploads/2021/05/affordance.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/affordance-300x152.jpg 300w" sizes="(max-width: 630px) 100vw, 630px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://upload.wikimedia.org/wikipedia/commons/8/81/Amazon_1-Click_option.png">Source</a></figcaption></figure></div> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p>If you use a CTA on or near your image, then it could be that your CTA design needs to be more intuitive so your user understands how to use it.</p> </div> </div> <h3 class="wp-block-heading"><strong>#2: Make Sure The Image (And Page) Are Speed Optimized</strong></h3> <p>So now that you know how your page performs, let’s walk through some basic checks before you make sweeping changes.</p> <h4 class="wp-block-heading"><strong>Are Your Images And Page Loading Fast Enough To Keep Your Audience’s Attention, Or Are They So Slow That It’s Causing The Audience To Bounce Off Your Page?</strong></h4> <p>Image and page speed optimization is not the main goal when we talk about optimizing your images for lift, but it is one of the first things you should look into before changing anything else.</p> <p>Why?</p> <p>Because images can be quite resource-heavy. The more you have and the higher the quality, the longer it takes for your page to load. It may not seem like much, but if your page takes longer than 3 seconds to load, then you’ll start to lose a segment of your audience before they even see the page.</p> <p>In fact, the time it takes for your page to load has a direct correlation with bounce rate <a href="https://www.convert.com/blog/optimization/ranking-factor-mobile-site-speed/">and will even affect your rankings in search engines</a>, so speeding upload time is highly recommended.</p> <p>(We actually had this happen to one of our pages recently. An update elsewhere had affected the page load of <a href="https://www.convert.com/hypothesis-generator/">our hypothesis generator tool</a>, causing it to load only a few seconds slower, but it increased the page’s bounce rate by 5%).</p> <p>If you’ve never done any work to improve your site loading speed, <a href="https://kinsta.com/learn/speed-up-wordpress/">then speed it up now</a>. It makes zero sense to test new images if the page is not even loading up.</p> <p>What if your page is usually fast loading?</p> <p>Run a quick check to see if that’s still the case. Things can happen to affect your speed that you might not be aware of. You can do this by running the page through <a href="https://developers.google.com/speed/pagespeed/insights">Google’s site speed tool</a> and then fix any issues.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="506" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20506'%3E%3C/svg%3E" alt="Google Site Speed page evaluation" class="wp-image-16313" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test-930x471.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test.jpg" /><noscript><img decoding="async" width="1000" height="506" src="https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test.jpg" alt="Google Site Speed page evaluation" class="wp-image-16313" srcset="https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/sitespeed-test-930x471.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.convert.com%2Fhypothesis-generator%2F">After finding the issue, we fixed the load speed + bounce rate.</a></figcaption></figure></div> <h3 class="wp-block-heading"><strong>#3: Find Out If The Image Is Compromised</strong></h3> <p>If the page is loading fast, the next check is to see if the image is functioning properly…</p> <h4 class="wp-block-heading"><strong>Is The Page Loading Fast, But The Image Is Now Pixelated?</strong></h4> <p>It could be that some plugins have updated and changed core settings that can affect your image.</p> <h5 class="wp-block-heading">Example</h5> <p>I recently saw a drop in conversions on my own site and wasn’t sure why. It turned out that a new website speed plugin had decided to speed up my images by lowering their quality. This meant we now had a pixelated CTA image, which fewer people clicked on.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/pixelated.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="750" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20750'%3E%3C/svg%3E" alt="pixelated image test" class="wp-image-16314" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/pixelated.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/pixelated-300x225.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/pixelated-930x698.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/pixelated.jpg" /><noscript><img decoding="async" width="1000" height="750" src="https://www.convert.com/wp-content/uploads/2021/05/pixelated.jpg" alt="pixelated image test" class="wp-image-16314" srcset="https://www.convert.com/wp-content/uploads/2021/05/pixelated.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/pixelated-300x225.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/pixelated-930x698.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.ampmycontent.com/paid-content-promotion">Are your images pixelated?</a></figcaption></figure></div> <p>I fixed the image quality and the conversion rate went back up to the baseline almost immediately.</p> <p>(Be sure to clear your cache as you might be seeing a saved version.)</p> <p><strong>Remember:</strong></p> <p>Just because the page and images are loading fine on your PC doesn’t mean your audience has the same experience.</p> <h4 class="wp-block-heading"><strong>Is The Image Loading Up Or Is It Showing A Broken Link?</strong></h4> <p>Check for broken images from corrupt files, CDN delivery issues, or plugins causing stuff to be weird.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="516" height="289" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20516%20289'%3E%3C/svg%3E" alt="broken image example" class="wp-image-16315" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe.jpg 516w, https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe-300x168.jpg 300w" data-lazy-sizes="(max-width: 516px) 100vw, 516px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe.jpg" /><noscript><img decoding="async" width="516" height="289" src="https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe.jpg" alt="broken image example" class="wp-image-16315" srcset="https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe.jpg 516w, https://www.convert.com/wp-content/uploads/2021/05/broken-imaghe-300x168.jpg 300w" sizes="(max-width: 516px) 100vw, 516px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.creative-blend.co.uk/wp-content/uploads/2019/09/broken-img-alt-text.jpg">Source</a></figcaption></figure></div> <p>These are incredibly basic things to check, but because we assume they are all always working, we often forget how important they are.</p> <h3 class="wp-block-heading"><strong>#4: Make Sure The Image Is Actually Showing</strong></h3> <p>Test that your audience can actually see your image AND your copy on desktop and on different devices.</p> <h4 class="wp-block-heading"><strong>Is Your Copy And Image Being Forced Below The Fold?</strong></h4> <p>Your goal with <a href="https://blog.convert.com/boost-conversion-with-one-image.html">a hero image</a> is to give your value proposition combined with a compelling image right there on the screen when the page loads.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/above-the-fold.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20508'%3E%3C/svg%3E" alt="hero image above the fold Convert.com" class="wp-image-16316" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/above-the-fold.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/above-the-fold-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/above-the-fold-930x472.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/above-the-fold.jpg" /><noscript><img decoding="async" width="1000" height="508" src="https://www.convert.com/wp-content/uploads/2021/05/above-the-fold.jpg" alt="hero image above the fold Convert.com" class="wp-image-16316" srcset="https://www.convert.com/wp-content/uploads/2021/05/above-the-fold.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/above-the-fold-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/above-the-fold-930x472.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com">Are your Hero shot details ‘above the fold’?</a></figcaption></figure></div> <p>The thing is not every site designer remembers to keep everything ‘above the fold’. Maybe they design the page based on their own monitor preferences and not their standard users, or perhaps they just forgot to create <a href="https://www.convert.com/blog/growth-marketing/ecommerce-adaptive-design/">responsive versions.</a></p> <p>This can cause the layout to be skewed, hiding important elements and making the user either bounce off or scroll down to learn more.</p> <h5 class="wp-block-heading">Example</h5> <p>If we had done this, then our home page might have looked like this.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20508'%3E%3C/svg%3E" alt="unresponsive hero image Convert.com" class="wp-image-16317" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold-930x472.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold.jpg" /><noscript><img decoding="async" width="1000" height="508" src="https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold.jpg" alt="unresponsive hero image Convert.com" class="wp-image-16317" srcset="https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/copy-hidden-below-the-fold-930x472.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com/mobile-ab-testing/">Make sure your content is viewable on all devices.</a></figcaption></figure></div> <p>So do a quick check:</p> <p>If your image takes up the entire screen before scrolling, <em>but your copy does most of the work and it’s not appearing above the fold</em>, then reduce the size of the image, consider bringing it alongside the text or make the design responsive for different screen sizes.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="782" height="653" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20782%20653'%3E%3C/svg%3E" alt="test layouts for different devices" class="wp-image-16318" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized.jpg 782w, https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized-300x251.jpg 300w" data-lazy-sizes="(max-width: 782px) 100vw, 782px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized.jpg" /><noscript><img decoding="async" width="782" height="653" src="https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized.jpg" alt="test layouts for different devices" class="wp-image-16318" srcset="https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized.jpg 782w, https://www.convert.com/wp-content/uploads/2021/05/mobile-optimized-300x251.jpg 300w" sizes="(max-width: 782px) 100vw, 782px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com/mobile-ab-testing/">You can even test specific layouts for different devices.</a></figcaption></figure></div> <h4 class="wp-block-heading"><strong>Image Size Is Inconsistent Across Different Devices</strong></h4> <p>Not every image is a hero shot that takes up the whole page. Sometimes we’ll be using product shots or other images inside of our content.</p> <p>If the image does the heavy lifting but is too small to see (even on a desktop), or it’s not optimized for mobile devices, then adjust the image to fit.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="584" height="621" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20584%20621'%3E%3C/svg%3E" alt="A/B test images for different devices" class="wp-image-16319" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive.jpg 584w, https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive-282x300.jpg 282w" data-lazy-sizes="(max-width: 584px) 100vw, 584px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive.jpg" /><noscript><img decoding="async" width="584" height="621" src="https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive.jpg" alt="A/B test images for different devices" class="wp-image-16319" srcset="https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive.jpg 584w, https://www.convert.com/wp-content/uploads/2021/05/mobile-reponsive-282x300.jpg 282w" sizes="(max-width: 584px) 100vw, 584px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://assets.website-files.com/57464494c80302ee21bb395b/5750c3993c241ee12e02f92d_responsivedesign.png">It’s not just your Hero shot that needs to be responsive.</a></figcaption></figure></div> <p>Product images increase sales but only if the audience can see them.</p> <h4 class="wp-block-heading"><strong>Are They Scrolling Far Enough To Even See The Image?</strong></h4> <p>Another simple fix. If the image is being shown on the page, but it’s lower down than most people are scrolling to, just bring it up higher.</p> <p>Seems simple, but this can help keep scanners on the page before they leave.</p> <h5 class="wp-block-heading">Example</h5> <p>When checking out the heatmap for one of my own products, I already know that the CTA button isn’t being clicked on.</p> <p>When I check the scroll depth, I see that only 62% of my audience is even getting as far as the CTA, which is weird as I designed it to be shown above the fold…</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="550" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20550'%3E%3C/svg%3E" alt="A/B test images qualitative tests" class="wp-image-16320" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH-300x165.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH-930x512.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH.jpg" /><noscript><img decoding="async" width="1000" height="550" src="https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH.jpg" alt="A/B test images qualitative tests" class="wp-image-16320" srcset="https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH-300x165.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/SCROLL-DEPTH-930x512.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.convert.com/integrations/hotjar-integration/">Qualitative tests can help you find simple issues.</a></figcaption></figure></div> <p>Aha!</p> <p>When I load up the page via a non-cached device, I can see that I have a broken header image that’s causing the header size to increase. This is pushing my CTA button below the fold, causing 38% of my audience to miss it!</p> <p>Fixing this would bring my CTA back up the screen so that 100% of my audience would actually see it. I could also look at tweaking the design <a href="https://www.ampmycontent.com/perfect-podcast-pitch/">by bringing the CTA button alongside the HERO shot, so that it draws more attention</a>, like so:</p> <div class="wp-block-image"> <figure class="aligncenter size-large is-resized"><a href="https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20843%20412'%3E%3C/svg%3E" alt="A/B test images test example" class="wp-image-16321" width="843" height="412" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img-300x147.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img-930x456.jpg 930w" data-lazy-sizes="(max-width: 843px) 100vw, 843px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img.jpg" /><noscript><img decoding="async" src="https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img.jpg" alt="A/B test images test example" class="wp-image-16321" width="843" height="412" srcset="https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img-300x147.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/Perfect-Podcast-Pitch-New-Hero-Shot-test-img-930x456.jpg 930w" sizes="(max-width: 843px) 100vw, 843px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.ampmycontent.com/perfect-podcast-pitch/">Now 100% of my audience will see the CTA.</a></figcaption></figure></div> <p>It still needs to be tested but notice how it draws focus to the CTA by bringing it up the page?</p> <p>I’m almost certain when I test this that I will see a lift.</p> <h4 class="wp-block-heading"><strong>Beware of ‘Blinkers’</strong></h4> <p>Be aware of how people are accustomed to seeing content on a screen and place your image either central or off-center, but never at the far edges.</p> <p>People get used to having a header at the top and filler in the sidebars, so they focus their vision off-center, working their way left to right, top to bottom, but they usually blinker out the content that’s on the far edges.</p> <p>This is called <a href="https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/">an ‘F’ pattern.</a></p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/f-pattern.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="943" height="821" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20943%20821'%3E%3C/svg%3E" alt="F-pattern A/B test images" class="wp-image-16322" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/f-pattern.jpg 943w, https://www.convert.com/wp-content/uploads/2021/05/f-pattern-300x261.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/f-pattern-930x810.jpg 930w" data-lazy-sizes="(max-width: 943px) 100vw, 943px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/f-pattern.jpg" /><noscript><img decoding="async" width="943" height="821" src="https://www.convert.com/wp-content/uploads/2021/05/f-pattern.jpg" alt="F-pattern A/B test images" class="wp-image-16322" srcset="https://www.convert.com/wp-content/uploads/2021/05/f-pattern.jpg 943w, https://www.convert.com/wp-content/uploads/2021/05/f-pattern-300x261.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/f-pattern-930x810.jpg 930w" sizes="(max-width: 943px) 100vw, 943px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/">People ignore the sides of the screen.</a></figcaption></figure></div> <p>If the images don’t get the attention you want, try moving them away from the edges of the screen.</p> <h3 class="wp-block-heading"><strong>#5: People Assume Connections Between Things That Are Close Together</strong></h3> <p>Here’s another location tip:</p> <p>People associate <a href="https://www.usertesting.com/blog/gestalt-principles">the distance between objects on a page as being either not connected, connected, or relevant to each other.</a></p> <p>If elements are far apart then we assume they are separate things, but if they’re close together then we assume they are connected.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/proximity-connection.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="936" height="755" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20936%20755'%3E%3C/svg%3E" alt="proximity design principle" class="wp-image-16323" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/proximity-connection.jpg 936w, https://www.convert.com/wp-content/uploads/2021/05/proximity-connection-300x242.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/proximity-connection-930x750.jpg 930w" data-lazy-sizes="(max-width: 936px) 100vw, 936px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/proximity-connection.jpg" /><noscript><img decoding="async" width="936" height="755" src="https://www.convert.com/wp-content/uploads/2021/05/proximity-connection.jpg" alt="proximity design principle" class="wp-image-16323" srcset="https://www.convert.com/wp-content/uploads/2021/05/proximity-connection.jpg 936w, https://www.convert.com/wp-content/uploads/2021/05/proximity-connection-300x242.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/proximity-connection-930x750.jpg 930w" sizes="(max-width: 936px) 100vw, 936px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.usertesting.com/blog/gestalt-principles#:~:text=Principle%20%233%3A%20proximity,that%20are%20spaced%20farther%20apart.&text=Proximity%20is%20so%20powerful%20that,differentiate%20a%20group%20of%20objects.%20Daniel%20Hutt%09%20Assigned%20to%20You%20Carmen%20Apostu%20Carmen%20Apostu%2011:50%20PM%2">We always look for patterns + connections.</a></figcaption></figure></div> <p>This means that if you have an image with text close to the side of it, your audience will assume it’s in reference to the image they are seeing.</p> <p>This is great if you want to bring their attention to your relevant copy, but not if you have another story or offer off to the side, as they are now seeing one thing but reading about another, causing confusion.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="507" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20507'%3E%3C/svg%3E" alt="visual perception design principle" class="wp-image-16324" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion-930x472.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion.jpg" /><noscript><img decoding="async" width="1000" height="507" src="https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion.jpg" alt="visual perception design principle" class="wp-image-16324" srcset="https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/proximity-confusion-930x472.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.usertesting.com/blog/gestalt-principles#:~:text=Principle%20%233%3A%20proximity,that%20are%20spaced%20farther%20apart.&text=Proximity%20is%20so%20powerful%20that,differentiate%20a%20group%20of%20objects.%20Daniel%20Hutt%09%20Assigned%20to%20You%20Carmen%20Apostu%20Carmen%20Apostu%2011:50%20PM%2">Is your page clear to understand or confusing?</a></figcaption></figure></div> <p>If you find that people are not responding then you can try removing any distractions from the side OR bringing the image and its relevant text closer together, so that they associate them easier.</p> <h3 class="wp-block-heading"><strong>#6: Be Aware Of Cultural Differences When Designing Images</strong></h3> <p>People scan content based on past experiences and we need to be aware of this with our image layout.</p> <p>In the West, we scan left to right, meaning our image is almost always in the center or top left with text on the right. Some countries read right to left, meaning you need to flip your layout and images.</p> <p>Keep this in mind for the location of your image, text, and CTA on your page.</p> <p>Also, it’s interesting to learn that people in the East and West view images differently…</p> <p>Take a look at these photos.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/2-cows.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="599" height="219" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20599%20219'%3E%3C/svg%3E" alt="cultural differences image use" class="wp-image-16325" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/2-cows.jpg 599w, https://www.convert.com/wp-content/uploads/2021/05/2-cows-300x110.jpg 300w" data-lazy-sizes="(max-width: 599px) 100vw, 599px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/2-cows.jpg" /><noscript><img decoding="async" width="599" height="219" src="https://www.convert.com/wp-content/uploads/2021/05/2-cows.jpg" alt="cultural differences image use" class="wp-image-16325" srcset="https://www.convert.com/wp-content/uploads/2021/05/2-cows.jpg 599w, https://www.convert.com/wp-content/uploads/2021/05/2-cows-300x110.jpg 300w" sizes="(max-width: 599px) 100vw, 599px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.pnas.org/content/102/35/12629">Source</a></figcaption></figure></div> <p>What do you see?</p> <p>Depending on where you’re from, <a href="https://www.pnas.org/content/102/35/12629">your focus and how you view an image can change.</a></p> <p>In the West, we tend to focus our attention on the object in the foreground, while people in the East focus on the background and its context to the object in the foreground as a whole.</p> <p>This means that your image background can have a large difference in performance, based on where it’s being shown or who it’s being shown to, so take this into account when you are designing or tweaking your creative.</p> <h3 class="wp-block-heading"><strong>#7: Check That The Image Aligns With The Audience, And What You Want Them To Feel</strong></h3> <p>Images are great at communicating ideas or emotions with your audience. Make sure you’re helping them connect the right emotions and ideas to your offer so that you can get them to take the right action.</p> <p>Ask yourself this:</p> <ul class="wp-block-list"> <li>What do YOU want to communicate with your image?</li> <li>How does your image work with your page? Is it to get them to click and learn more? Is it a product shot to help make a decision?</li> <li>How do you want this image to affect your user? To associate with an emotion or use case?</li> <li>What do you want them to do on the page?</li> </ul> <p>Clarity on these answers will help you see if your audience feels the same way.</p> <p>Why does this matter?</p> <p>As the creators of a page and product, we can be guilty of forgetting that our audience might have a knowledge gap that we don’t. What’s obvious for us is not always clear to the end-user.</p> <p>Also, our intent or emotion that we want to convey can sometimes get lost in translation. This is why it’s so important to run focus group tests where possible to get live feedback from your users on how your images affect them.</p> <p>Get clarity on the following questions:</p> <ul class="wp-block-list"> <li><strong>Can users clearly see the content in the image?</strong></li> </ul> <p>Not just image quality, but do they understand what the image is about, and can they see everything in the image?</p> <p>If not, then this can be a sign your image needs improving or you need to show more detail.</p> <ul class="wp-block-list"> <li><strong>Does the image look credible or manipulated?</strong></li> </ul> <p>Trust is a major factor in buying online. If the image looks heavily photoshopped, people may doubt its claims.</p> <p>Can they trust what they are seeing or does it seem fake?</p> <p>Sometimes you can have a product that is so good that it seems too good to be true, and you need to prove it works. Back it up with other trust signals such as testimonials, badges, guarantees, and more.</p> <ul class="wp-block-list"> <li><strong>What message does the image communicate with the audience?</strong></li> </ul> <p>What does your audience think when they see your image? Is it aligned with what you want them to think, or does it make them think of something else?</p> <ul class="wp-block-list"> <li><strong>Does the image result in the desired emotional response?</strong></li> </ul> <p>If it’s not making them feel the right thing, then fewer people will take the action you want, and even worse, some might even be repelled. (More on this in a second)</p> <ul class="wp-block-list"> <li><strong>What ‘user needs’ does the audience need to see in the image? What action do they want to take after seeing the image?</strong></li> </ul> <p>What will the audience use the product/offer for? Can they see how to use it in the images? Can they see what they need in your image to help them make a decision? Do they want to buy, or are they confused and want to leave?</p> <p>Your image can either support your offer or turn people away from it.</p> <h4 class="wp-block-heading">Example</h4> <p><a href="https://uxmag.com/articles/evaluating-the-usability-of-web-photos">In this article on UX design</a>, the author was looking to book a hotel on a website designed to help young families book trips.</p> <p>The problem with this particular hotel is that the images on display were not aligned with the user’s end goal of booking a family-friendly room that’s suitable for very young children. <em>“It looked more like fine dining vs family-friendly.”</em></p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="630" height="417" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20630%20417'%3E%3C/svg%3E" alt="image misaligned with user needs" class="wp-image-16326" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment-300x199.jpg 300w" data-lazy-sizes="(max-width: 630px) 100vw, 630px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment.jpg" /><noscript><img decoding="async" width="630" height="417" src="https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment.jpg" alt="image misaligned with user needs" class="wp-image-16326" srcset="https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/childfriendly-misalignment-300x199.jpg 300w" sizes="(max-width: 630px) 100vw, 630px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://uxmag.com/articles/evaluating-the-usability-of-web-photos">Do your images help your users and meet their needs?</a></figcaption></figure></div> <p>So, in this example, the images actually turned the user away.</p> <p>He wanted to see how good the hotel and room would be for his kids, whereas the hotel wanted to show off its decor. It showed images that would have probably worked well if someone was looking for a luxury stay, but that’s not what the site was advertising or what the user was looking for.</p> <p>(In all honesty, the hotel probably just added their usual pics to a different site with the hopes it would drive sales, never thinking of their different use case.)</p> <p>This is why it’s so important to make sure that your image is aligned to your offer and what you want your audience to feel, think, and visualize so that they take your desired action.</p> <div class="p-0.5 mt-6 bg-gradient-to-r from-pink-700 to-pink-700/80 rounded-lg"> <div class="rounded-lg pl-6 pr-6 pb-6 [&_p]:text-white [&_h2]:text-white text-white"> <blockquote class="wp-block-quote"> <p class="brand-color-white"><em>The best image is not the one that YOU WANT to put there, but the one that will have the biggest impact on the mind and feelings of your viewer. It’s not about what you want to say – it’s what THEY actually see or get from the image</em></p> <p><cite class="brand-color-white">Craig Sullivan, Optimal Visit</cite></p></blockquote> </div> </div> <h3 class="wp-block-heading"><strong>#8: Be Authentic</strong></h3> <p>All of the images on your site should either give further context or help convey emotion to your reader to cause a response.</p> <p>Now, as you might guess, your images will struggle to do this if they seem inauthentic or fake, and <a href="https://cxl.com/blog/stock-photography-vs-real-photos-cant-use/">it’s why I don’t recommend using stock images</a>.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="492" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20492'%3E%3C/svg%3E" alt="inauthentic stock images" class="wp-image-16327" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS-300x148.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS-930x458.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS.jpg" /><noscript><img decoding="async" width="1000" height="492" src="https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS.jpg" alt="inauthentic stock images" class="wp-image-16327" srcset="https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS-300x148.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/DONT-USE-STOCK-PHOTOS-930x458.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.google.com/search?q=stock+thumbs+down&source=lnms&tbm=isch&sa=X&ved=2ahUKEwiVl8mIsL7wAhUuILcAHbgUB-AQ_AUoAXoECAEQAw&biw=1920&bih=969">All these options, but none of them feel ‘real’</a></figcaption></figure></div> <p>It doesn’t matter if your own images are lower quality or only ‘ok’ lighting, they will almost always outperform stock photos because stock images can feel fake, or simply don’t represent reality.</p> <p>People use images to help them make a decision. If the image is of something unrelated or a different product, it can feel untrustworthy.</p> <p>In fact, if you run a customer focus session, you’ll notice that stock photos may frustrate the user because it feels like the images don’t give an accurate representation of your brand or offer.</p> <p>Even worse?</p> <p>If you do find a stock image that works, then you run the risk of using images that multiple sites use.</p> <figure class="wp-block-image size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="819" height="545" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20819%20545'%3E%3C/svg%3E" alt="inauthentic stock images overused model" class="wp-image-16328" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere.jpg 819w, https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere-300x200.jpg 300w" data-lazy-sizes="(max-width: 819px) 100vw, 819px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere.jpg" /><noscript><img decoding="async" width="819" height="545" src="https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere.jpg" alt="inauthentic stock images overused model" class="wp-image-16328" srcset="https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere.jpg 819w, https://www.convert.com/wp-content/uploads/2021/05/stock-photos-used-everywhere-300x200.jpg 300w" sizes="(max-width: 819px) 100vw, 819px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.chatelaine.com/living/entertainment/shrill-crave-canada/">This one model has been used on hundreds of websites.</a></figcaption></figure> <p>This one stock photo model has been used so many times now, that there are entire Reddit threads dedicated to people sharing what new advert they find her in.</p> <p>Sometimes you will even see direct competitors using the exact same model by accident…</p> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p>Always invest in your own imagery where possible. You will almost always see more lift, even if it’s not professionally taken.</p> </div> </div> <p><strong>Sidenote:</strong></p> <p>If you outsource to a professional, be sure to ‘design for your medium’ and have your users’ needs in mind when planning the brief.</p> <p>What do I mean?</p> <p>Well, most traditional photography campaigns are shot for billboards and ads and the shots are usually quite different from what you might want for your website.</p> <h3 class="wp-block-heading"><strong>#9: Improve + Reshoot The Images You Have</strong></h3> <p>Sometimes you can have the right idea and align with the audience, but the images you have need just a little extra oomph and a reshoot could make all the difference.</p> <p>Not necessarily in terms of improving the image quality (although it never hurts), but rather improving the image messaging and capturing what the audience needs.</p> <h4 class="wp-block-heading">Example</h4> <p>Another complaint of the hotel shots in that UX article was that they didn’t give a clear enough picture.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="630" height="415" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20630%20415'%3E%3C/svg%3E" alt="improve product images" class="wp-image-16329" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs-300x198.jpg 300w" data-lazy-sizes="(max-width: 630px) 100vw, 630px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs.jpg" /><noscript><img decoding="async" width="630" height="415" src="https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs.jpg" alt="improve product images" class="wp-image-16329" srcset="https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs.jpg 630w, https://www.convert.com/wp-content/uploads/2021/05/not-clear-to-users-needs-300x198.jpg 300w" sizes="(max-width: 630px) 100vw, 630px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://uxmag.com/articles/evaluating-the-usability-of-web-photos">Why make the pop-out so small?</a></figcaption></figure></div> <p>The image size is bad enough, but it also failed to show enough information for the users’ needs. Could they fit a cot next to the bed or was the space too narrow?</p> <p>This could have been resolved by retaking the shot to include more of the room, perhaps adding a second image from another angle in the room, or even showing a cot next to the bed.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="567" height="520" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20567%20520'%3E%3C/svg%3E" alt="successful use of product image" class="wp-image-16330" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented.jpg 567w, https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented-300x275.jpg 300w" data-lazy-sizes="(max-width: 567px) 100vw, 567px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented.jpg" /><noscript><img decoding="async" width="567" height="520" src="https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented.jpg" alt="successful use of product image" class="wp-image-16330" srcset="https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented.jpg 567w, https://www.convert.com/wp-content/uploads/2021/05/accurate-user-case-represented-300x275.jpg 300w" sizes="(max-width: 567px) 100vw, 567px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.happiestbaby.com/products/snoo-smart-bassinet">This is what they should have shown…</a></figcaption></figure></div> <p>(I mean, it is a booking site for hotel rooms for people with small children. You would think they would include this, right?)</p> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p>If your image idea is aligned with the audience but not getting enough lift, rethink what your audience needs to see in your images to make a decision, then retake your shots with that in mind.</p> </div> </div> <h3 class="wp-block-heading"><strong>#10: Match Your Image To Your Message, To The Audience’s Intent, And To Their Journey</strong></h3> <p>Is your audience bouncing when visiting your page, even though it loads fast?</p> <p>It might be that you have a message-to-page mismatch, in that what drove them to your site does not align with what they find when they get there.</p> <h4 class="wp-block-heading">Example</h4> <p>Let’s say that a user clicked on an advert or searched in Google and landed on your page, but something feels off…</p> <p>In this example, you can see a Facebook page for a company that sells ski and snowboard equipment.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="587" height="542" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20587%20542'%3E%3C/svg%3E" alt="match image to audience intent" class="wp-image-16331" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH.jpg 587w, https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH-300x277.jpg 300w" data-lazy-sizes="(max-width: 587px) 100vw, 587px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH.jpg" /><noscript><img decoding="async" width="587" height="542" src="https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH.jpg" alt="match image to audience intent" class="wp-image-16331" srcset="https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH.jpg 587w, https://www.convert.com/wp-content/uploads/2021/05/MARKET-TO-MESSAGE-MISSMATCH-300x277.jpg 300w" sizes="(max-width: 587px) 100vw, 587px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.facebook.com/ads/library/?active_status=all&ad_type=all&country=US&q=ski&sort_data%5Bdirection%5D=desc&sort_data%5Bmode%5D=relevancy_monthly_grouped&search_type=keyword_unordered&media_type=all">Source</a></figcaption></figure></div> <p>But when you click through to their site, you see that they actually sell outdoor garden furniture:</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/missmatch.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="495" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20495'%3E%3C/svg%3E" alt="match image to audience intent bad example" class="wp-image-16332" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/missmatch.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/missmatch-300x149.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/missmatch-930x460.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/missmatch.jpg" /><noscript><img decoding="async" width="1000" height="495" src="https://www.convert.com/wp-content/uploads/2021/05/missmatch.jpg" alt="match image to audience intent bad example" class="wp-image-16332" srcset="https://www.convert.com/wp-content/uploads/2021/05/missmatch.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/missmatch-300x149.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/missmatch-930x460.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://skibarn.com/">Erm, what?</a></figcaption></figure></div> <p>In this instance, the website has possibly been hacked, or the domain was purchased and then redesigned for a different company.</p> <p>The thing is this can still happen even with a normal ad campaign or even a Google search. People click on one thing but where they land doesn’t match what they clicked.</p> <p>(I can’t tell you the number of times I’ve seen a fancy ski jacket advertised in an advert, to only click through and the landing page to be for a different product instead.)</p> <p>We call this ‘incongruence’.</p> <p>So have a quick think about your own image use:</p> <ul class="wp-block-list"> <li>What does your audience expect to see when they click through to your page?</li> <li>Does your image align with this?</li> <li>Does your page image match your featured image or ads that they might click through from?</li> </ul> <p>It may not be as obvious as serving the totally wrong item, but your image may not be what they are expecting to see and could be causing them to leave.</p> <h3 class="wp-block-heading"><strong>#11: Zoom Zoom!</strong></h3> <p>When shopping online, we lose out on all of our other senses. We can’t taste, we can’t smell and we can’t feel.</p> <p>All we can do is look at the image to get a better idea of the product. The picture quality is incredibly important, especially when selling something where people would care about fine details (anything technical, safety-focused, or very high ticket).</p> <p>Because of this, you need to shoot your images in such high definition that they can be actively zoomed in on and still maintain their quality.</p> <div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe loading="lazy" src="about:blank" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://giphy.com/embed/rZIX9pBx2IvZIHm0pZ"></iframe><noscript><iframe src="https://giphy.com/embed/rZIX9pBx2IvZIHm0pZ" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></noscript></div><p><a href="https://giphy.com/gifs/rZIX9pBx2IvZIHm0pZ">via GIPHY</a></p> <p class="has-text-align-center"><a href="https://gfycat.com/hopefulnarrowjuliabutterfly-futurama-enhance-csi">Make sure your audience can see all they need to.</a></p> <p>This way the audience can look at each point in fine detail, helping you to highlight key user needs or address any concerns they might have with the product.</p> <p><em>“Will this fit? Will this be strong or safe enough”,</em> etc.</p> <h4 class="wp-block-heading">Example</h4> <p><a href="https://www.happiestbaby.com/products/snoo-smart-bassinet">Happiest Baby</a> is a company that clearly understands its users’ needs and shows that in its images.</p> <p>Not only do they cover multiple shots and user cases, but every image can be zoomed in for further detail.</p> <p>Yes, it’s a high ticket product but it’s more than that. Their customers want to make sure that this product is safe for their newborn child and to examine it in fine detail.</p> <div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe loading="lazy" src="about:blank" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://giphy.com/embed/1WSg2QUY2Lka9Ki0Jv"></iframe><noscript><iframe src="https://giphy.com/embed/1WSg2QUY2Lka9Ki0Jv" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></noscript></div><p><a href="https://giphy.com/gifs/1WSg2QUY2Lka9Ki0Jv">via GIPHY</a></p> <p class="has-text-align-center"><a href="https://www.happiestbaby.com/products/snoo-smart-bassinet">Let your audience see those details.</a></p> <p>Every image they have gives peace of mind.</p> <h3 class="wp-block-heading"><strong>#12: Test Action Shots/In Use Shots</strong></h3> <p>Being able to zoom in is great, but visualization is an even more powerful technique.</p> <p>Why?</p> <p>By having shots of the product in use, you can help your audience to not only visualize themselves using the product, but <a href="https://www.ted.com/talks/vilayanur_ramachandran_the_neurons_that_shaped_civilization#t-83589">it actively transfers emotions from the shot to the user.</a></p> <p>Let me explain.</p> <p>The human brain is a fascinating thing with many interesting elements.</p> <p>I want to talk about 3 of these:</p> <ul class="wp-block-list"> <li>the Premotor cortex,</li> <li>the Primary Motor cortex</li> <li>and Mirror Neurons.</li> </ul> <p>The Premotor cortex is the area of the brain that helps you plan out movement, while the Primary motor cortex is what makes that movement happen.</p> <p>Let’s say that you’re about to throw a ball, but at the same time, your brain has electrodes attached to it so we can record which neurons are firing.</p> <p>When you start to think about throwing the ball, the Premotor cortex lights up. It’s contemplating the action and working out what to do. Then when you throw the ball, the Primary motor cortex controls the muscles and now lights up in our readings.</p> <p>If we were to watch someone else throw the ball, our own Premotor cortex would light up just as if we were planning to throw it ourselves.</p> <p>The act of observing the event causes the same neurons to fire— we call these mirror neurons.</p> <p><strong>Why does this matter for image optimization?</strong></p> <p>Well, when your audience sees a photo or video of a snowboarder doing a long carved turn, they can feel similar emotions as if they were doing it themselves.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="563" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20563'%3E%3C/svg%3E" alt="action shot image optimization" class="wp-image-16333" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones-300x170.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones-930x524.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones.jpg" /><noscript><img decoding="async" width="1000" height="563" src="https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones.jpg" alt="action shot image optimization" class="wp-image-16333" srcset="https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones-300x170.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/jeremy-jones-930x524.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://sporttechie-prod.s3.amazonaws.com/jeremy-jones-athletes-voice.png">Use images that drive emotion in your audience.</a></figcaption></figure></div> <p>We mirror the emotion we see in others, which is great if what we’re showing in our image aligns with the emotion they want to experience.</p> <h3 class="wp-block-heading"><strong>#13: Represent Your End User</strong></h3> <p>Having humans in the shot also helps your audience to connect and empathize, but be sure to test multiple models.</p> <p>Why?</p> <p>Well, not everyone will resonate with the person in your shot, especially if they don’t accurately represent the end user. The audience can pick up misconceptions of who the product is for, so test out various models.</p> <p><a href="https://www.amazon.com/Usability-Web-Photos-James-Chudley-ebook/dp/B01E5YNI14/ref=sr_1_1?dchild=1&keywords=usability+of+web+photos&qid=1620628825&sr=8-1">In “Usability of Web Photos”</a>, James Chudley talks about a campaign he ran for a sales page with 3 price points, each including a photo of a different model to represent different types of customers.</p> <p>The test results were confusing because people were buying the cheapest and the most expensive options, but not the ‘best price’ option (which usually converts highest.)</p> <p>They ran some feedback tests and it turns out that the male model used for the best price option looked a lot like Noel Gallagher. They found that the customers were put off by this representation as it didn’t align with the actual users of the product, so it wasn’t converting.</p> <h3 class="wp-block-heading"><strong>#14: Test People + Product Vs. Product Alone</strong></h3> <p>If you can only ever use one image, then you need to test variations.</p> <p>Sometimes, you get more lift with the product alone. Sometimes, you need clearer product shots. Other times, a page can convert better with the product in use. Sometimes, it’s other models using the product.</p> <p>Be sure to test each version to see which works best with your audience.</p> <h3 class="wp-block-heading"><strong>#15: Test Gaze Direction</strong></h3> <p>When using images featuring human models, test the direction they are looking.</p> <p>Studies by <a href="https://academic.oup.com/jcr/advance-article/doi/10.1093/jcr/ucaa063/6050834">the Journal of Consumer Research</a> found that images with people looking in a direction helped bring the audience into the scene and visualize themselves in the moment.</p> <p>These worked well for products where the audience could identify with the image and what was happening in it and also helped to direct the audience’s eyes to a CTA.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="604" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20604'%3E%3C/svg%3E" alt="image optimization test gaze direction" class="wp-image-16334" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience-300x181.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience-930x562.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience.jpg" /><noscript><img decoding="async" width="1000" height="604" src="https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience.jpg" alt="image optimization test gaze direction" class="wp-image-16334" srcset="https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience-300x181.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/eyeline-away-from-audience-930x562.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://i.pinimg.com/originals/17/1e/5e/171e5e74500a33720fdb1b83cbcdea8b.jpg">Pull your audience into the shot.</a></figcaption></figure></div> <p>They work great for lifestyle brands.</p> <p>Whereas images with people looking directly out at the audience and making eye contact and smiling helped to build trust, show competence, openness and worked great for service-based businesses.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="712" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20712'%3E%3C/svg%3E" alt="image optimization test gaze direction" class="wp-image-16335" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT-300x214.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT-930x662.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT.jpg" /><noscript><img decoding="async" width="1000" height="712" src="https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT.jpg" alt="image optimization test gaze direction" class="wp-image-16335" srcset="https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT-300x214.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/TRUST-FACING-OUT-930x662.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/97502043805573.57fd558e5d732.png">And if you need to be trusted, then face the reader and make eye contact.</a></figcaption></figure></div> <h3 class="wp-block-heading"><strong>#16: Test Your Own Images Vs. Supplied Shots</strong></h3> <p>Here’s something that I don’t see that often, but the stores that are using it seem to be market leaders.</p> <p>Let me explain.</p> <p>Imagine you sell a product that 10,000 other retailers all sell. How do you differentiate?</p> <p>Most people adjust the price and race to the margins, but smart retailers appeal to their ideal audience instead.</p> <p>Rather than using the product shots that are supplied and used by all their competitors, they reshoot the products using their own models that represent their own particular audiences, helping the images to connect more effectively.</p> <h4 class="wp-block-heading">Example</h4> <p>North Face has seen a surge of younger customers recently.</p> <p>North Face’s own imagery is aimed at hikers, climbers, and backpackers, and so their core brand imagery doesn’t really align with the 18-25 market.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/north-face.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="511" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20511'%3E%3C/svg%3E" alt="image optimization reshoot customize images" class="wp-image-16336" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/north-face.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/north-face-300x153.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/north-face-930x475.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/north-face.jpg" /><noscript><img decoding="async" width="1000" height="511" src="https://www.convert.com/wp-content/uploads/2021/05/north-face.jpg" alt="image optimization reshoot customize images" class="wp-image-16336" srcset="https://www.convert.com/wp-content/uploads/2021/05/north-face.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/north-face-300x153.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/north-face-930x475.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://thenorthface.com.au/catalog/mens/jackets-and-vests/">Know your audience…</a></figcaption></figure></div> <p>This is why Asos <a href="https://www.asos.com/customer-care/engagement/can-you-give-me-more-information-about-how-to-become-an-asos-model/">reshoots the products they sell using a select group of models that represents their end-user</a>, instead of using the shots provided.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/asos.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="630" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20630'%3E%3C/svg%3E" alt="image optimization customize images" class="wp-image-16337" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/asos.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/asos-300x189.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/asos-930x586.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/asos-220x140.jpg 220w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/asos.jpg" /><noscript><img decoding="async" width="1000" height="630" src="https://www.convert.com/wp-content/uploads/2021/05/asos.jpg" alt="image optimization customize images" class="wp-image-16337" srcset="https://www.convert.com/wp-content/uploads/2021/05/asos.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/asos-300x189.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/asos-930x586.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/asos-220x140.jpg 220w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.asos.com/customer-care/engagement/can-you-give-me-more-information-about-how-to-become-an-asos-model/">Create custom product shots that match your ideal audience.</a></figcaption></figure></div> <p>By doing this they can connect the product to their specific users far more effectively.</p> <p>If you’re selling 3rd party products and competing with other sites, consider this for your own images.</p> <h3 class="wp-block-heading"><strong>#17: Test A Single Image Vs. Sequence Of Images</strong></h3> <p>Sequences of images are good when you want to go into more detail, and take your audience on a “journey” of discovery.</p> <p>This works especially well if the images follow the user’s thought process.</p> <p>It can vary depending on your offer and industry, but it usually is something like:</p> <ul class="wp-block-list"> <li>Hero shot,</li> <li>Product in use,</li> <li>Product shot,</li> <li>Fine detail shots, etc.</li> </ul> <h4 class="wp-block-heading">Example</h4> <p>We talked about <a href="https://www.happiestbaby.com/products/snoo-smart-bassinet">Happiest Baby</a> earlier and how well they know their audience.</p> <p>They have:</p> <ul class="wp-block-list"> <li>A video (with the thumbnail of a hero shot with the product in use),</li> <li>A shot of 2 key features,</li> <li>A whole heap of action shots matching different segments of their audience and different models,</li> <li>Each image can be zoomed in to check on technical aspects.</li> </ul> <div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe loading="lazy" src="about:blank" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://giphy.com/embed/4TeMYZ7ALsrumYr9Gc"></iframe><noscript><iframe src="https://giphy.com/embed/4TeMYZ7ALsrumYr9Gc" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></noscript></div><p><a href="https://giphy.com/gifs/4TeMYZ7ALsrumYr9Gc">via GIPHY</a></p> <p class="has-text-align-center"><a href="https://www.happiestbaby.com/products/snoo-smart-bassinet">Design your sequences to match the users’ decision-making process.</a></p> <p>Sequences work, but it’s important to understand how your audience completes a purchase like this, so you can model it with images.</p> <p>Whatever you do, don’t make the images rotate on their own, instead let the user click through. Multiple studies and tests have shown that <a href="https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/">a rotating carousel of images is almost always far lower conversion than just a single image on its own</a>.</p> <p>So if you use a sequence, show the one image and make it obvious that they can click through for more information or details.</p> <h3 class="wp-block-heading"><strong>#18: Test Company Generated Content Vs. User-Generated Content</strong></h3> <p>User-Generated Content (UGC) is almost like a cheat code for conversions.</p> <p>Not only does it work as a testimonial, a referral, and social proof all in one, but it’s also free content. You simply allow your users to take product shots after purchase and then send them to you. (With bonus points if you set up a system to automate the whole process with follow-up emails). Amazon has been allowing this for years and are still using it and innovating on it today, so you can guess how well it works for them.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="482" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20482'%3E%3C/svg%3E" alt="image optimization user generated content" class="wp-image-16338" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS-300x145.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS-930x448.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS.jpg" /><noscript><img decoding="async" width="1000" height="482" src="https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS.jpg" alt="image optimization user generated content" class="wp-image-16338" srcset="https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS-300x145.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/UGC-REVIEWS-930x448.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.amazon.com/RUNMUS-Surround-Canceling-Compatible-Controller/dp/B07GRM747Y/?_encoding=UTF8&pd_rd_w=wRimV&pf_rd_p=2dbfe895-70fc-42d0-948e-36d5f770d93b&pf_rd_r=CQBX0QDE3BY4XDVA6PHK&pd_rd_r=7ee544a4-d22f-4166-8988-6c54a9d0502e&pd_rd_wg=xVdsD&ref_=pd_gw_unk">Amazon even allows users to upload video reviews now!</a></figcaption></figure></div> <p>Want another example?</p> <p>Boom! By Cindy Joseph is a women’s skincare brand run by a direct response marketer.</p> <p>Their current revenue is in excess of $62 million and they scaled to that point by focusing on paid advertising and referrals.</p> <p>They used to run all kinds of ads but nowadays it’s almost <a href="https://smartmarketer.com/ezras-social-proof-ad-template/">exclusively UGC video testimonials</a>.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="635" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20635'%3E%3C/svg%3E" alt="image optimization user generated content example" class="wp-image-16339" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-300x191.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-930x591.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-220x140.jpg 220w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc.jpg" /><noscript><img decoding="async" width="1000" height="635" src="https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc.jpg" alt="image optimization user generated content example" class="wp-image-16339" srcset="https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-300x191.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-930x591.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/boom-social-proof-ugc-220x140.jpg 220w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://smartmarketer.com/ezras-social-proof-ad-template/">User-generated content is incredibly effective.</a></figcaption></figure></div> <p>Not only does UGC build trust, but it’s also great for converting people who might be on the fence.</p> <p>Affiliate marketers do this VERY well, often creating entire reviews and content guides for products from the ideal audience’s user case and point of view.</p> <div class="default-box mt-6 py-3 px-6 bg-blue-25 dropshadow-light-blue rounded-lg"> <div class="[&_p]:px-0 [&_h2]:px-0 [&_h3]:px-0 [&_h2]:pt-0 [&_h3]:pt-0 space-y-4"> <p><b>Key Takeaway</b></p> <p><a href="https://www.convert.com/blog/growth-marketing/using-user-generated-content-advantage/">Test UGC content</a>, either as the main touchpoint, or as a supplementary image or video, or even on 3rd party sites to drive content to you.</p> </div> </div> <h3 class="wp-block-heading"><strong>#19: Test Static Images Vs. Videos</strong></h3> <p>Videos can often add more lift than single images and do very well as supporting content in product sequences.</p> <p>(<a href="https://tubularinsights.com/video-demos-sales-zappos/">Zappos saw a 30% lift in sales</a> on product pages where the audience watched a supporting video as well as viewed images.)</p> <p>Videos do take more effort to create but they can be incredibly powerful, especially if you keep the following in mind:</p> <ul class="wp-block-list"> <li><strong>Be aware of the video quality.</strong></li> </ul> <p>Not every customer has the same quality system as you. Test your video on multiple devices, focusing on older machines and with the lowest common connections (iPhone 5 + 3G).</p> <ul class="wp-block-list"> <li><strong>Don’t autoplay the video on page load.</strong></li> </ul> <p>This is not only frustrating, but it can also increase page load time and even bounce rate.</p> <ul class="wp-block-list"> <li><strong>Be mindful of where you host the video.</strong></li> </ul> <p>Uploading it to Youtube and embedding it on your page is an easy option, but remember that the end of each Youtube video is a CTA for other content. (Some even auto-play now.) The last thing you want is a video to get people excited for your product or service, and then lose their attention to a different competitor or cat video.</p> <p>You can get around this by self-hosting your videos on platforms like Vimeo and then embedding that on your site. (Vimeo will even allow you to add clickable CTAs at the end of videos for your own product offers.)</p> <h3 class="wp-block-heading"><strong>#20: Test 360 Images</strong></h3> <p>If you’re selling a physical product, consider creating 360-degree images.</p> <p>Although they require a specialized program to create, they can help increase lift in conversions by helping the audience fully inspect the product.</p> <p>In fact, industrial tool company Grainger.com found that 360-degree images of their power tools helped them to see a boost in conversion rate by 47% vs. just standard images.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/360.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="814" height="296" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20814%20296'%3E%3C/svg%3E" alt="image optimization 360 images" class="wp-image-16340" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/360.jpg 814w, https://www.convert.com/wp-content/uploads/2021/05/360-300x109.jpg 300w" data-lazy-sizes="(max-width: 814px) 100vw, 814px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/360.jpg" /><noscript><img decoding="async" width="814" height="296" src="https://www.convert.com/wp-content/uploads/2021/05/360.jpg" alt="image optimization 360 images" class="wp-image-16340" srcset="https://www.convert.com/wp-content/uploads/2021/05/360.jpg 814w, https://www.convert.com/wp-content/uploads/2021/05/360-300x109.jpg 300w" sizes="(max-width: 814px) 100vw, 814px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://snap36.com/wp-content/uploads/2019/04/Grainger_CaseStudy.pdf">360 images can provide more lift and information.</a></figcaption></figure></div> <p>This helps to get past those missing angles issues we covered earlier, while also showing an accurate representation of the product.</p> <p>It’s not just physical products though, hotels and homes can create 360 walkthrough shots.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough-.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="960" height="480" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20960%20480'%3E%3C/svg%3E" alt="image optimization 360 walkthrough shot" class="wp-image-16341" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough-.jpg 960w, https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough--300x150.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough--930x465.jpg 930w" data-lazy-sizes="(max-width: 960px) 100vw, 960px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough-.jpg" /><noscript><img decoding="async" width="960" height="480" src="https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough-.jpg" alt="image optimization 360 walkthrough shot" class="wp-image-16341" srcset="https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough-.jpg 960w, https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough--300x150.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/optimization-360-walkthrough--930x465.jpg 930w" sizes="(max-width: 960px) 100vw, 960px" /></noscript></a></figure></div> <p>Here is a <a href="https://wistia.com/learn/production/360-real-estate-video">360 Real Estate Video Example by the folks over at Wistia</a>.</p> <h3 class="wp-block-heading"><strong>#21: Test CTAs + Information On Top Of Images + Thumbnails</strong></h3> <p>This can work really well for product pages or wider product libraries where a particular item might be going out of stock, and you want to drive attention to it.</p> <p>You can add a simple CTA on the thumbnail to let the audience know it’s running low or if an item is trending, causing them to want to check it.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/cta-images.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1024" height="504" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20504'%3E%3C/svg%3E" alt="image optimization test CTA overlay" class="wp-image-16342" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/cta-images-1024x504.jpg 1024w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-300x148.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-1536x756.jpg 1536w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-930x458.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/cta-images.jpg 1600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/cta-images-1024x504.jpg" /><noscript><img decoding="async" width="1024" height="504" src="https://www.convert.com/wp-content/uploads/2021/05/cta-images-1024x504.jpg" alt="image optimization test CTA overlay" class="wp-image-16342" srcset="https://www.convert.com/wp-content/uploads/2021/05/cta-images-1024x504.jpg 1024w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-300x148.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-1536x756.jpg 1536w, https://www.convert.com/wp-content/uploads/2021/05/cta-images-930x458.jpg 930w, https://www.convert.com/wp-content/uploads/2021/05/cta-images.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://nipkt.com/collections/best-sellers-us">Overlaid CTAs help attract attention.</a></figcaption></figure></div> <p>You can even <a href="https://woocommerce.com/products/custom-stock-status/">set up plugins</a> to do this for you.</p> <h3 class="wp-block-heading"><strong>#22: Test CTA Visibility</strong></h3> <p>If you are adding CTAs on top of your images, be aware that certain fonts or particular colors on specific backgrounds are harder to read, and can lower conversion rates.</p> <p>For example:</p> <ul class="wp-block-list"> <li>Small text</li> <li>Handwritten fonts</li> <li>White fonts on bright backgrounds</li> <li>Red text on blue backgrounds</li> <li>Blue text on red backgrounds</li> <li>Greens on yellows, and yellow on green</li> <li>Red and green, or green on red.</li> </ul> <p>Sometimes it’s just that the CTA is hard to read against the backdrop, but other times it’s because of something called <a href="https://www.interaction-design.org/literature/topics/chromostereopsis">Chromostereopsis.</a> It occurs when certain colors stimulate different receptors in the eye. When you combine specific ones, it makes the image hard to focus on.</p> <p>It’s not just colors though. Take into account how your CTA might look on multiple devices. The screen size difference can drastically alter how easy it is to view your CTA.</p> <p>Luxyhair ran a campaign where <a href="https://guessthetest.com/test/which-hero-image-won-on-desktop-but-lost-on-mobile/">they tested their home page hero shot</a> with a before and after image vs. the control shot of just one person.</p> <p>Interestingly enough, the before and after shot converted best on desktop, but lower on mobile.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="695" height="592" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20695%20592'%3E%3C/svg%3E" alt="image optimization test CTA overlay example" class="wp-image-16343" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST.jpg 695w, https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST-300x256.jpg 300w" data-lazy-sizes="(max-width: 695px) 100vw, 695px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST.jpg" /><noscript><img decoding="async" width="695" height="592" src="https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST.jpg" alt="image optimization test CTA overlay example" class="wp-image-16343" srcset="https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST.jpg 695w, https://www.convert.com/wp-content/uploads/2021/05/MOBILE-LOST-THE-TEST-300x256.jpg 300w" sizes="(max-width: 695px) 100vw, 695px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://guessthetest.com/test/which-hero-image-won-on-desktop-but-lost-on-mobile/">Is your CTA easy to read?</a></figcaption></figure></div> <p>The assumption is that the before-and-after shot was harder to see on a mobile device. Personally, I think it could be a few things.</p> <p>In the new variation, they tested a new model (which we know can affect results), but not only that, the text is much harder to read, as it’s overlaid on a pink backdrop.</p> <p>In this example, it might have been worth testing the font color, adding a darker backdrop, and even testing a rotating image of the model before and after. That way you could read the CTA and see the difference from one version to the next.</p> <h3 class="wp-block-heading"><strong>#23: Test Clickable CTA Overlays In Shoppable Videos + Images</strong></h3> <p>A shoppable video or image is a piece of media with direct interactive components.</p> <p>The audience can see elements in the shot or clip, click on them, and be transported directly to particular products or catalogs.</p> <p>Here’s a shoppable video by Wirewax.com for one of their clients.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="508" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20508'%3E%3C/svg%3E" alt="image optimization test shoppable video image" class="wp-image-16344" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO-930x472.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO.jpg" /><noscript><img decoding="async" width="1000" height="508" src="https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO.jpg" alt="image optimization test shoppable video image" class="wp-image-16344" srcset="https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO-300x152.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/SHOPPABLE-VIDEO-930x472.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.wirewax.com/showcase/gallery#8199813/">With shoppable videos, you can interact with what you see on the screen.</a></figcaption></figure></div> <p>And here’s a <a href="https://taggbox.com/blog/shoppable-images/">plugin by Taggbox</a> that allows you to upload images and then create clickable elements for your users to shop from.</p> <p>Even social media platforms see the power in shoppable media and are allowing specific shoppable ads directly on their platforms.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/social-ad.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="589" height="828" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20589%20828'%3E%3C/svg%3E" alt="image optimization test shoppable video image social media" class="wp-image-16345" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/social-ad.jpg 589w, https://www.convert.com/wp-content/uploads/2021/05/social-ad-213x300.jpg 213w" data-lazy-sizes="(max-width: 589px) 100vw, 589px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/social-ad.jpg" /><noscript><img decoding="async" width="589" height="828" src="https://www.convert.com/wp-content/uploads/2021/05/social-ad.jpg" alt="image optimization test shoppable video image social media" class="wp-image-16345" srcset="https://www.convert.com/wp-content/uploads/2021/05/social-ad.jpg 589w, https://www.convert.com/wp-content/uploads/2021/05/social-ad-213x300.jpg 213w" sizes="(max-width: 589px) 100vw, 589px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.wakeupdata.com/blog/shoppable-product-images">Your audience can click through to any item that they want to buy.</a></figcaption></figure></div> <h3 class="wp-block-heading"><strong>#24: Test Product Shots To Increase Cart Conversion Rate</strong></h3> <p>We focus so much on the image for getting the click and the sale, we forget that we can also use it to help stop abandoned carts. According to <a href="https://www.wordstream.com/blog/ws/2016/03/17/shopping-cart-abandonment">Wordstream</a>, approximately 81% of users abandon carts and don’t complete the sale.</p> <p>Adding the image to the checkout page can help the audience clarify exactly what they are buying and increase cart conversion rate.</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="1000" height="562" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20562'%3E%3C/svg%3E" alt="image optimization test increase cart conversion rate" class="wp-image-16346" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages-300x170.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages-930x523.jpg 930w" data-lazy-sizes="(max-width: 1000px) 100vw, 1000px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages.jpg" /><noscript><img decoding="async" width="1000" height="562" src="https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages.jpg" alt="image optimization test increase cart conversion rate" class="wp-image-16346" srcset="https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages.jpg 1000w, https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages-300x170.jpg 300w, https://www.convert.com/wp-content/uploads/2021/05/product-shots-in-checkout-pages-930x523.jpg 930w" sizes="(max-width: 1000px) 100vw, 1000px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://www.jbhifi.co.nz/Checkout/View-Shopping-Cart/">Lower cart abandonment with product image reminders.</a></figcaption></figure></div> <h3 class="wp-block-heading"><strong>#25: Test Augmented Reality Images</strong></h3> <p>We already know that a great way to get your audience past any ‘what if’ issues is to supply more imagery. More angles, better detail, etc.</p> <p>Some retailers are taking this a step further and creating Augmented Reality shopping experiences.</p> <h4 class="wp-block-heading">Example</h4> <p>Ikea created <a href="https://about.ikea.com/en/newsroom/2018/03/19/ikea-place-app-launches-on-android-allowing-millions-of-people-to-reimagine-home-furnishings-using-ar">‘Ikea Place’</a>, an app that allows users to take screenshots of their rooms, pick items and overlay them directly in the image.</p> <p>Not only does this help people visualize their room, but it also measures the space to see if a product will fit, and then applies the room size to the product image that it imports, scaling the product image based on your room specs!</p> <div class="wp-block-image"> <figure class="aligncenter size-large"><a href="https://www.convert.com/wp-content/uploads/2021/05/ikea-place.jpg" data-a11y-dialog-show="previewDialog"><img decoding="async" width="745" height="623" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20745%20623'%3E%3C/svg%3E" alt="image optimization test AR image" class="wp-image-16347" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/ikea-place.jpg 745w, https://www.convert.com/wp-content/uploads/2021/05/ikea-place-300x251.jpg 300w" data-lazy-sizes="(max-width: 745px) 100vw, 745px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/ikea-place.jpg" /><noscript><img decoding="async" width="745" height="623" src="https://www.convert.com/wp-content/uploads/2021/05/ikea-place.jpg" alt="image optimization test AR image" class="wp-image-16347" srcset="https://www.convert.com/wp-content/uploads/2021/05/ikea-place.jpg 745w, https://www.convert.com/wp-content/uploads/2021/05/ikea-place-300x251.jpg 300w" sizes="(max-width: 745px) 100vw, 745px" /></noscript></a><figcaption class="wp-element-caption"><a href="https://about.ikea.com/en/newsroom/2020/03/19/ikea-to-launch-new-ar-capabilities-for-ikea-place-on-new-ipad-pro">The Ikea Place app allows you to see your products in your home before you buy.</a></figcaption></figure></div> <p><a href="https://www.coastal.com/glasses/virtual-try-on-glasses">Coastal</a> is another brand that uses an AR image tool that allows its users to digitally ‘try on’ glasses.</p> <p>Users turn on their webcam and overlay the different frames on their faces to see how the products would look.</p> <h3 class="wp-block-heading"><strong>#26: Test Segmented Images</strong></h3> <p>Let’s say that you have a product with a broad user base, but you know that specific segments of your audience will buy it for their own reasons.</p> <h4 class="wp-block-heading">Example</h4> <p>You’re a garden homeware store and want to sell more BBQs.</p> <p>Maybe a section of your audience wants to purchase your BBQs to have cookouts and watch sports, but another segment might want to purchase it to create a garden feature instead.</p> <p>By segmenting your images to match your audience, you’ll see a much higher lift, as the image reflects the user’s end goal.<br><br>(Similar to what Asos did with their models, but now we’re actively altering the image based on the user data for an even higher lift from all segments.)</p> <p>The segmentation of the message is incredibly powerful. In fact one of our Convert users applied a test to a segment of his audience, <a href="https://www.convert.com/blog/a-b-testing/testing-with-precision-using-audience-targeting/">causing a 50% lift in conversions.</a></p> <h2 class="wp-block-heading"><strong>Conclusion</strong></h2> <p>So there you have it. Our 26 tips for image optimization to increase your conversion rates.</p> <p>Almost every test that we’ve listed here, from segmentation of audience to layout tweaks and more, can be applied in the Convert Experiences app.</p> <p>If you want to start testing your own images, then click the button below and take a free trial today.</p> <div class="wp-block-image dn db--tb wp-block-image-no-padding"> <figure class="aligncenter size-large"><a class="" href="https://www.convert.com/features/e-commerce-ab-testing/?utm_campaign=BLOG"><img decoding="async" width="1024" height="535" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20535'%3E%3C/svg%3E" alt="Tool Features Ecommerce" class="wp-image-16368" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-1024x535.jpeg 1024w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-300x157.jpeg 300w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-930x486.jpeg 930w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop.jpeg 1200w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-1024x535.jpeg" /><noscript><img decoding="async" width="1024" height="535" src="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-1024x535.jpeg" alt="Tool Features Ecommerce" class="wp-image-16368" srcset="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-1024x535.jpeg 1024w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-300x157.jpeg 300w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop-930x486.jpeg 930w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Desktop.jpeg 1200w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></a></figure></div> <div class="wp-block-image dn--tb wp-block-image-no-padding"> <figure class="aligncenter size-large"><a class="" href="https://www.convert.com/features/e-commerce-ab-testing/?utm_campaign=BLOG"><img decoding="async" width="414" height="809" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20414%20809'%3E%3C/svg%3E" alt="Tool Features Ecommerce" class="wp-image-16369" data-lazy-srcset="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile.jpeg 414w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile-154x300.jpeg 154w" data-lazy-sizes="(max-width: 414px) 100vw, 414px" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile.jpeg" /><noscript><img decoding="async" width="414" height="809" src="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile.jpeg" alt="Tool Features Ecommerce" class="wp-image-16369" srcset="https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile.jpeg 414w, https://www.convert.com/wp-content/uploads/2021/05/Start-Free-Trial-Ecommerce-Mobile-154x300.jpeg 154w" sizes="(max-width: 414px) 100vw, 414px" /></noscript></a></figure></div> <div class="rounded-lg border border-slate-100 py-3 px-6 flex items-center mt-12"> <div id="qrCanvas" class="qr-code mr-2"></div> <div> <span class="mt-0 mb-1 bold text-sm">Mobile reading?</span> <spam class="my-0 text-sm inline-block">Scan this QR code and take this blog with you, wherever you go.</span> </div> </div> <div class="space-y-6 rounded-lg border border-slate-100 py-6 px-6 mt-12"> <div> <div class=" text-slate-500"> Originally published May 19, 2021 - Updated March 28, 2023 </div> </div> <div class="divide-y-2 divide-slate-100 space-y-3"> <details class="group"> <summary class="flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden py-2"> <div> <div class=" font-oxygen text-lg text- text-blue text-normal "> Written By </div> <div class="text-slate-500 text-sm group-open:hidden"> Daniel Daines Hutt </div> </div> <div class="transition group-open:rotate-180 text-slate-500"> <svg fill="none" height="36" width="36" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewbox="0 0 24 24"> <path d="M6 9l6 6 6-6"></path> </svg> </div> </summary> <div class="group-open:animate-fadeIn grid md:grid-cols-3 px-0 md:px-3 gap-x-6 gap-y-6 my-6"> <div> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3C/svg%3E" alt="Daniel Daines Hutt" class="rounded-full border border-slate-100" width="56" height="56" data-lazy-src="https://www.convert.com/wp-content/uploads/2021/03/Daniel-Daines-Hutt-96x96.png"><noscript><img src="https://www.convert.com/wp-content/uploads/2021/03/Daniel-Daines-Hutt-96x96.png" alt="Daniel Daines Hutt" class="rounded-full border border-slate-100" width="56" height="56"></noscript> <div> <a href="https://www.convert.com/author/daniel-daines/" class="inline-block text-sm text-blue-800"> Daniel Daines Hutt </a> <div class=" text- text-slate-500 text-normal "> B2B SaaS content writer </div> </div> </div> </div> </details> <details class="group"> <summary class="flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden py-2"> <div> <div class=" font-oxygen text-lg text- text-blue text-normal "> Edited By </div> <div class="text-slate-500 text-sm group-open:hidden"> Carmen Apostu </div> </div> <div class="transition group-open:rotate-180 text-slate-500"> <svg fill="none" height="36" width="36" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewbox="0 0 24 24"> <path d="M6 9l6 6 6-6"></path> </svg> </div> </summary> <div class="group-open:animate-fadeIn grid md:grid-cols-3 px-0 md:px-3 gap-x-6 gap-y-6 my-6"> <div> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2056%2056'%3E%3C/svg%3E" alt="Carmen Apostu" class="rounded-full border border-slate-100" width="56" height="56" data-lazy-src="https://www.convert.com/wp-content/uploads/2020/06/carmenapostu.jpeg"><noscript><img src="https://www.convert.com/wp-content/uploads/2020/06/carmenapostu.jpeg" alt="Carmen Apostu" class="rounded-full border border-slate-100" width="56" height="56"></noscript> <div> <a href="https://www.linkedin.com/in/carmenapostu/" class="inline-block text-sm text-blue-800" rel="noopener noreferrer" target="_blank"> Carmen Apostu </a> <div class=" text- text-slate-500 text-normal "> Head of Content at Convert </div> </div> </div> </div> </details> </div> </div> </div> </div> </article> </div> <aside class="lg:col-span-4 pl-12 hidden lg:block" id="widgetarea-sidebar"> <div class="space-y-4"> <div> <div class="toc toc-desktop bg-white rounded-lg outline outline-1 outline-blue-100 max-h-[600px] overflow-auto p-3"> <div class="rounded-lg"> <div id="ez-toc-container" class="ez-toc-v2_0_72 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction"> <div class="ez-toc-title-container"> <p class="ez-toc-title ez-toc-toggle" style="cursor:pointer">Sections</p> <span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #0066ff;color:#0066ff" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #0066ff;color:#0066ff" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div> <nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#what-is-image-optimization" title="What Is Image Optimization?">What Is Image Optimization?</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-2" href="#what-kind-of-impact-can-images-have-on-optimization" title="What Kind of Impact Can Images Have on Optimization?">What Kind of Impact Can Images Have on Optimization?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-3" href="#expected-vs-unexpected-results" title="Expected Vs Unexpected Results">Expected Vs Unexpected Results</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-4" href="#example" title="Example">Example</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-5" href="#26-ab-tests-checks-and-tips-to-improve-your-conversion-rate-with-images" title="26 A/B Tests, Checks, And Tips To Improve Your Conversion Rate With Images">26 A/B Tests, Checks, And Tips To Improve Your Conversion Rate With Images</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#1-check-how-your-audience-responds-to-the-image" title="#1: Check How Your Audience Responds To The Image">#1: Check How Your Audience Responds To The Image</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-7" href="#are-they-seeing-your-image-but-not-paying-attention" title="Are They Seeing Your Image But Not Paying Attention?">Are They Seeing Your Image But Not Paying Attention?</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-8" href="#do-they-know-what-they-should-be-clicking-on" title="Do They Know What They Should Be Clicking On?">Do They Know What They Should Be Clicking On?</a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class="ez-toc-link ez-toc-heading-9" href="#example-2" title="Example">Example</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-10" href="#2-make-sure-the-image-and-page-are-speed-optimized" title="#2: Make Sure The Image (And Page) Are Speed Optimized">#2: Make Sure The Image (And Page) Are Speed Optimized</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-11" href="#are-your-images-and-page-loading-fast-enough-to-keep-your-audiences-attention-or-are-they-so-slow-that-its-causing-the-audience-to-bounce-off-your-page" title="Are Your Images And Page Loading Fast Enough To Keep Your Audience’s Attention, Or Are They So Slow That It’s Causing The Audience To Bounce Off Your Page?">Are Your Images And Page Loading Fast Enough To Keep Your Audience’s Attention, Or Are They So Slow That It’s Causing The Audience To Bounce Off Your Page?</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-12" href="#3-find-out-if-the-image-is-compromised" title="#3: Find Out If The Image Is Compromised">#3: Find Out If The Image Is Compromised</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-13" href="#is-the-page-loading-fast-but-the-image-is-now-pixelated" title="Is The Page Loading Fast, But The Image Is Now Pixelated?">Is The Page Loading Fast, But The Image Is Now Pixelated?</a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class="ez-toc-link ez-toc-heading-14" href="#example-3" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-15" href="#is-the-image-loading-up-or-is-it-showing-a-broken-link" title="Is The Image Loading Up Or Is It Showing A Broken Link?">Is The Image Loading Up Or Is It Showing A Broken Link?</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-16" href="#4-make-sure-the-image-is-actually-showing" title="#4: Make Sure The Image Is Actually Showing">#4: Make Sure The Image Is Actually Showing</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-17" href="#is-your-copy-and-image-being-forced-below-the-fold" title="Is Your Copy And Image Being Forced Below The Fold?">Is Your Copy And Image Being Forced Below The Fold?</a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class="ez-toc-link ez-toc-heading-18" href="#example-4" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-19" href="#image-size-is-inconsistent-across-different-devices" title="Image Size Is Inconsistent Across Different Devices">Image Size Is Inconsistent Across Different Devices</a></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-20" href="#are-they-scrolling-far-enough-to-even-see-the-image" title="Are They Scrolling Far Enough To Even See The Image?">Are They Scrolling Far Enough To Even See The Image?</a><ul class='ez-toc-list-level-5' ><li class='ez-toc-heading-level-5'><a class="ez-toc-link ez-toc-heading-21" href="#example-5" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-22" href="#beware-of-blinkers" title="Beware of ‘Blinkers’">Beware of ‘Blinkers’</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-23" href="#5-people-assume-connections-between-things-that-are-close-together" title="#5: People Assume Connections Between Things That Are Close Together">#5: People Assume Connections Between Things That Are Close Together</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-24" href="#6-be-aware-of-cultural-differences-when-designing-images" title="#6: Be Aware Of Cultural Differences When Designing Images">#6: Be Aware Of Cultural Differences When Designing Images</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-25" href="#7-check-that-the-image-aligns-with-the-audience-and-what-you-want-them-to-feel" title="#7: Check That The Image Aligns With The Audience, And What You Want Them To Feel">#7: Check That The Image Aligns With The Audience, And What You Want Them To Feel</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-26" href="#example-6" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-27" href="#8-be-authentic" title="#8: Be Authentic">#8: Be Authentic</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-28" href="#9-improve-reshoot-the-images-you-have" title="#9: Improve + Reshoot The Images You Have">#9: Improve + Reshoot The Images You Have</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-29" href="#example-7" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-30" href="#10-match-your-image-to-your-message-to-the-audiences-intent-and-to-their-journey" title="#10: Match Your Image To Your Message, To The Audience’s Intent, And To Their Journey">#10: Match Your Image To Your Message, To The Audience’s Intent, And To Their Journey</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-31" href="#example-8" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-32" href="#11-zoom-zoom" title="#11: Zoom Zoom!">#11: Zoom Zoom!</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-33" href="#example-9" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-34" href="#12-test-action-shotsin-use-shots" title="#12: Test Action Shots/In Use Shots">#12: Test Action Shots/In Use Shots</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-35" href="#13-represent-your-end-user" title="#13: Represent Your End User">#13: Represent Your End User</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-36" href="#14-test-people-product-vs-product-alone" title="#14: Test People + Product Vs. Product Alone">#14: Test People + Product Vs. Product Alone</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-37" href="#15-test-gaze-direction" title="#15: Test Gaze Direction">#15: Test Gaze Direction</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-38" href="#16-test-your-own-images-vs-supplied-shots" title="#16: Test Your Own Images Vs. Supplied Shots">#16: Test Your Own Images Vs. Supplied Shots</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-39" href="#example-10" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-40" href="#17-test-a-single-image-vs-sequence-of-images" title="#17: Test A Single Image Vs. Sequence Of Images">#17: Test A Single Image Vs. Sequence Of Images</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-41" href="#example-11" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-42" href="#18-test-company-generated-content-vs-user-generated-content" title="#18: Test Company Generated Content Vs. User-Generated Content">#18: Test Company Generated Content Vs. User-Generated Content</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-43" href="#19-test-static-images-vs-videos" title="#19: Test Static Images Vs. Videos">#19: Test Static Images Vs. Videos</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-44" href="#20-test-360-images" title="#20: Test 360 Images">#20: Test 360 Images</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-45" href="#21-test-ctas-information-on-top-of-images-thumbnails" title="#21: Test CTAs + Information On Top Of Images + Thumbnails">#21: Test CTAs + Information On Top Of Images + Thumbnails</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-46" href="#22-test-cta-visibility" title="#22: Test CTA Visibility">#22: Test CTA Visibility</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-47" href="#23-test-clickable-cta-overlays-in-shoppable-videos-images" title="#23: Test Clickable CTA Overlays In Shoppable Videos + Images">#23: Test Clickable CTA Overlays In Shoppable Videos + Images</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-48" href="#24-test-product-shots-to-increase-cart-conversion-rate" title="#24: Test Product Shots To Increase Cart Conversion Rate">#24: Test Product Shots To Increase Cart Conversion Rate</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-49" href="#25-test-augmented-reality-images" title="#25: Test Augmented Reality Images">#25: Test Augmented Reality Images</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-50" href="#example-12" title="Example">Example</a></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-51" href="#26-test-segmented-images" title="#26: Test Segmented Images">#26: Test Segmented Images</a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class="ez-toc-link ez-toc-heading-52" href="#example-13" title="Example">Example</a></li></ul></li></ul></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-53" href="#conclusion" title="Conclusion">Conclusion</a></li></ul></nav></div> </div> </div> <div> <p class="mt-4 mb-1 text-slate-700">Share This Post</p> <div class="shared-counts-wrap my-0 style-icon"><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.convert.com/blog/a-b-testing/image-conversion-optimization/" title="Share on LinkedIn" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button linkedin shared-counts-no-count" data-postid="16301" data-social-network="LinkedIn" data-social-action="Share" data-social-target="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="27.4375" height="32" viewBox="0 0 878 1024"><path d="M199.429 357.143v566.286h-188.571v-566.286h188.571zM211.429 182.286q0.571 41.714-28.857 69.714t-77.429 28h-1.143q-46.857 0-75.429-28t-28.571-69.714q0-42.286 29.429-70t76.857-27.714 76 27.714 29.143 70zM877.714 598.857v324.571h-188v-302.857q0-60-23.143-94t-72.286-34q-36 0-60.286 19.714t-36.286 48.857q-6.286 17.143-6.286 46.286v316h-188q1.143-228 1.143-369.714t-0.571-169.143l-0.571-27.429h188v82.286h-1.143q11.429-18.286 23.429-32t32.286-29.714 49.714-24.857 65.429-8.857q97.714 0 157.143 64.857t59.429 190z"></path></svg></span><span class="shared-counts-label">LinkedIn</span></span></a><a href="https://www.facebook.com/sharer/sharer.php?u=https://www.convert.com/blog/a-b-testing/image-conversion-optimization/&display=popup&ref=plugin&src=share_button" title="Share on Facebook" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button facebook shared-counts-no-count" data-postid="16301" data-social-network="Facebook" data-social-action="Share" data-social-target="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18.8125" height="32" viewBox="0 0 602 1024"><path d="M548 6.857v150.857h-89.714q-49.143 0-66.286 20.571t-17.143 61.714v108h167.429l-22.286 169.143h-145.143v433.714h-174.857v-433.714h-145.714v-169.143h145.714v-124.571q0-106.286 59.429-164.857t158.286-58.571q84 0 130.286 6.857z"></path></svg></span><span class="shared-counts-label">Facebook</span></span></a><a href="https://twitter.com/share?url=https://www.convert.com/blog/a-b-testing/image-conversion-optimization/&text=26%20Tips%20To%20Use%20Images%20in%20Your%20A%2FB%20Tests%20and%20Increase%20Your%20Conversion%20Rates&via=Convert" title="Share on Twitter" target="_blank" rel="nofollow noopener noreferrer" class="shared-counts-button twitter shared-counts-no-count" data-postid="16301" data-social-network="Twitter" data-social-action="Tweet" data-social-target="https://www.convert.com/blog/a-b-testing/image-conversion-optimization/"><span class="shared-counts-icon-label"><span class="shared-counts-icon"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.8944 10.4695L21.3345 2H19.5716L13.1085 9.35244L7.95022 2H1.99936L9.80147 13.1192L1.99936 22H3.76218L10.5832 14.2338L16.0318 22H21.9827L13.8944 10.4695ZM11.4792 13.2168L10.6875 12.1089L4.39789 3.30146H7.10594L12.1833 10.412L12.9717 11.5199L19.5708 20.7619H16.8628L11.4792 13.2168Z" /></svg></span><span class="shared-counts-label">Tweet</span></span></a></div> </div> </div> <div class="rounded-lg border border-slate-100 p-3 mt-6"> <p class="text-sm"> <b class="text-blue">"If you’re looking for improvements to your CRO campaigns, this tool is for you." </b><div>- Adrian G</div> </p> <div class="flex items-center gap-x-2 mt-6"> <p class="text-sm text-slate-700"> A decade mature A/B testing tool. Recommended by experts. Advanced features at self-service, monthly pricing. 4x faster support. </p> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20102%20104'%3E%3C/svg%3E" alt="High Performer Winter 2023" width="102" height="104" data-lazy-src="https://www.convert.com/wp-content/themes/olympus/img/g2c-winter-2023.svg"><noscript><img src="https://www.convert.com/wp-content/themes/olympus/img/g2c-winter-2023.svg" alt="High Performer Winter 2023" width="102" height="104"></noscript> </div> <div class="mt-3"> <a href="#subscribeFreeTrial" class="cta-blog inline-block button my-0 px-6" id="sidebar-freetrial">Try Us Free</a> </div> </div> </div> </aside> </div> </section> <button class="scrollup" aria-label="Scroll Up"> <span class="lnr-chevron-left"></span> </button> </div> <div data-wpr-lazyrender="1" class="footer_wrapper clearfix bg-brand-color-dark-black"> <footer id="footer"> <div> <div class="grid--full"> <div class="u-dt-px-56"> <div class="grid__12 grid__8--dt footer__links u-mt-32"> <div class="sections grid__3--tb"> <div id="text-5" class="widget widget_text"><h3 class="widget-title">Product</h3> <div class="textwidget"></div> </div><div id="nav_menu-2" class="widget widget_nav_menu"><div class=" megamenu_container"><ul id="menu-product" class="menu themeple_megemenu" role="menu"><li role="menuitem" id="menu-item-3769" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/free-trial/" >Free Trial</a></li> <li role="menuitem" id="menu-item-5457" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/demo/" >Request a Demo</a></li> <li role="menuitem" id="menu-item-3074" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/" >Features</a></li> <li role="menuitem" id="menu-item-3075" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/pricing/" >Pricing</a></li> <li role="menuitem" id="menu-item-23446" class="is-page-template-home menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/pricing/app-roadmap/" >App Roadmap</a></li> <li role="menuitem" id="menu-item-19838" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/ab-testing/" >A/B Testing</a></li> <li role="menuitem" id="menu-item-5995" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/integrations/" >Integrations</a></li> <li role="menuitem" id="menu-item-23099" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/full-stack/" >Full-stack Experimentation</a></li> <li role="menuitem" id="menu-item-20789" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/ab-testing/audience-targeting/" >Audience Targeting</a></li> <li role="menuitem" id="menu-item-20791" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/ab-testing/advanced-goals/" >A/B Testing Goals</a></li> <li role="menuitem" id="menu-item-20820" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/ab-testing/api/" >API Access</a></li> <li role="menuitem" id="menu-item-18450" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/shopify-ab-testing/" >Shopify A/B Testing</a></li> <li role="menuitem" id="menu-item-20816" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/shopify-ab-testing/shopify-custom-app/" >Shopify Custom App</a></li> <li role="menuitem" id="menu-item-20232" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/features/split-testing/" >Split Testing</a></li> <li role="menuitem" id="menu-item-5795" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/testimonials/" >Praise</a></li> </ul></div></div> </div> <div class="sections grid__3--tb"> <div id="text-10" class="widget widget_text"><h3 class="widget-title">For CRO Agencies</h3> <div class="textwidget"></div> </div><div id="nav_menu-5" class="widget widget_nav_menu"><div class=" megamenu_container"><ul id="menu-agencies" class="menu themeple_megemenu" role="menu"><li role="menuitem" id="menu-item-5536" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/why-convert-agency/" >Convert For Agencies</a></li> <li role="menuitem" id="menu-item-5537" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/certified-partners/" >Certified Agencies</a></li> <li role="menuitem" id="menu-item-5538" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/become-certified-partner/" >Get Certified</a></li> </ul></div></div> </div> <div class="sections grid__3--tb"> <div id="text-6" class="widget widget_text"><h3 class="widget-title">Resources</h3> <div class="textwidget"></div> </div><div id="nav_menu-3" class="widget widget_nav_menu"><div class=" megamenu_container"><ul id="menu-resources" class="menu themeple_megemenu" role="menu"><li role="menuitem" id="menu-item-3772" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/blog/" >Blog</a></li> <li role="menuitem" id="menu-item-22432" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/partnerships/" >Partnership Programs</a></li> <li role="menuitem" id="menu-item-4147" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/convert-cro-newsletter/" >Newsletter</a></li> <li role="menuitem" id="menu-item-22718" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/academy/monthly-panels/" >Expert Panels</a></li> <li role="menuitem" id="menu-item-5658" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/a-b-testing-tools-comparison/" >Tools Comparison</a></li> <li role="menuitem" id="menu-item-19855" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/how-to-do-privacy-compliant-outreach/" >Our Outbound</a></li> <li role="menuitem" id="menu-item-5714" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/google-optimize-alternative/" >Google Optimize Alternative</a></li> <li role="menuitem" id="menu-item-5578" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/vwo-alternative/" >VWO Alternative</a></li> <li role="menuitem" id="menu-item-14948" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/case-studies/" >Case Studies</a></li> <li role="menuitem" id="menu-item-13339" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/hypothesis-generator/" >Hypothesis Generator</a></li> <li role="menuitem" id="menu-item-15462" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/calculator/" >Duration Calculator</a></li> <li role="menuitem" id="menu-item-22426" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/decision-impact-simulator/" >Decision Impact Simulator</a></li> <li role="menuitem" id="menu-item-21367" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/request-for-information-rfi-pre-filled/" >Convert’s Pre-Filled RFI</a></li> </ul></div></div> </div> <div class="sections grid__3--tb"> <div id="text-7" class="widget widget_text"><h3 class="widget-title">Company</h3> <div class="textwidget"></div> </div><div id="nav_menu-4" class="widget widget_nav_menu"><div class=" megamenu_container"><ul id="menu-company" class="menu themeple_megemenu" role="menu"><li role="menuitem" id="menu-item-5541" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://support.convert.com/hc/en-us" >Support Center</a></li> <li role="menuitem" id="menu-item-21809" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/convert-support/" >Support Team</a></li> <li role="menuitem" id="menu-item-3782" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/about/" >About Us</a></li> <li role="menuitem" id="menu-item-3783" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/conscious-business/" >Conscious Business</a></li> <li role="menuitem" id="menu-item-22641" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/world-map-of-privacy-laws/" >Global Privacy Map</a></li> <li role="menuitem" id="menu-item-4047" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/jobs/" >Jobs</a></li> <li role="menuitem" id="menu-item-5959" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/write-for-us/" >Write For Us</a></li> <li role="menuitem" id="menu-item-5673" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/privacy/" >Privacy</a></li> <li role="menuitem" id="menu-item-18532" class="menu-item menu-item-type-custom menu-item-object-custom"><a href="https://www.convert.com/gdpr/" >GDPR</a></li> <li role="menuitem" id="menu-item-5674" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/security/" >Security</a></li> <li role="menuitem" id="menu-item-3079" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/privacy-notice/" >Privacy Notice</a></li> <li role="menuitem" id="menu-item-16552" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/terms-of-use/" >Terms of Use</a></li> <li role="menuitem" id="menu-item-3784" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://www.convert.com/contact-us/" >Contact Us</a></li> </ul></div></div> </div> </div> <div class="grid__12 grid__4--dt br4 u-mt-32 dropshadow-1" style="background-image: linear-gradient(45deg, #5F2C48,#1E2B3C 15%, #1E2B3C 85%, #214FB3 );"> <div class="flex flex-column flex-row--dt flex-wrap items-center justify-center justify-space-between--tb u-pa-32 md:justify-between"> <div class="u-mb-24 u-dt-mb-0" style="max-width: 180px; width: 100%;"> <svg aria-label="Convert Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 33" class="svg-white"><path d="M17.94 24.823h4.699c-.69 2.634-2.007 4.64-3.947 6.018C16.748 32.283 14.308 33 11.365 33c-3.57 0-6.355-1.157-8.36-3.475C1 27.27 0 24.04 0 19.837c0-4.009.968-7.142 2.912-9.397 2-2.319 4.79-3.482 8.36-3.482 3.76 0 6.668 1.13 8.736 3.385 1.127 1.38 1.94 2.978 2.444 4.794h-6.578c-.314-.624-.626-1.092-.936-1.409-.82-.878-1.976-1.317-3.476-1.317-1.382 0-2.508.44-3.383 1.317-1.127 1.254-1.691 3.327-1.691 6.21 0 2.88.564 4.915 1.69 6.107.81 1.002 2.03 1.503 3.664 1.503 1.065 0 1.968-.217 2.724-.657.188-.061.358-.173.514-.329.158-.16.329-.33.52-.517.122-.19.374-.438.748-.752.381-.31.942-.47 1.692-.47" /><path fill-rule="evenodd" clip-rule="evenodd" d="M24.314 25.72c.561 1.912 1.505 3.43 2.818 4.557 1.252 1.127 2.931 1.928 5.029 2.394 2.095.474 4.18.43 6.246-.138 2.314-.502 4.225-1.788 5.735-3.855.681-1.002 1.25-2.222 1.688-3.663.436-1.442.655-3.166.655-5.178 0-2.756-.535-5.165-1.6-7.236-1.124-2.316-2.876-3.95-5.255-4.888-2.066-.756-4.384-.955-6.953-.613-2.569.346-4.667 1.46-6.294 3.34-1.007 1.124-1.74 2.539-2.214 4.232a19.12 19.12 0 00-.7 5.078c0 2.06.28 4.056.845 5.97zm5.549-5.55c-.129-2.853.464-4.998 1.779-6.442.438-.436 1.13-.798 2.068-1.081a4.58 4.58 0 012.815.048c.942.316 1.775 1.033 2.491 2.164.724 1.127 1.081 2.82 1.081 5.078-.06 2.503-.467 4.321-1.22 5.449-.751 1.127-1.617 1.832-2.585 2.117a4.47 4.47 0 01-2.867-.097c-.935-.342-1.594-.763-1.968-1.267-.942-1.124-1.475-3.113-1.594-5.97z" /><path d="M69.311 32.534h-3.285c-.94 0-1.708-.3-2.302-.895-.597-.598-.89-1.362-.89-2.302V16.552c0-1.505-.458-2.604-1.366-3.295a4.928 4.928 0 00-3.054-1.034 4.73 4.73 0 00-3.004 1.034c-.878.69-1.317 1.79-1.317 3.295v15.982h-6.572V17.867c0-4.26 1.107-7.113 3.334-8.558 2.221-1.44 4.677-2.222 7.373-2.351 2.756 0 5.29.723 7.61 2.164 2.318 1.44 3.473 4.358 3.473 8.745v14.667z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M118.667 24.823h-4.698c-.747 0-1.333.159-1.735.47-.408.314-.647.562-.704.752l-.148.147-.372.37a1.33 1.33 0 01-.517.33c-.751.44-1.659.656-2.722.656-1.629 0-2.855-.501-3.666-1.503-.877-.94-1.346-2.383-1.406-4.326h16.249c.064-.123.095-.341.095-.658v-1.034c0-4.134-.999-7.362-3.003-9.684-2.071-2.255-4.982-3.385-8.742-3.385-3.563 0-6.355 1.163-8.357 3.482-1.942 2.255-2.917 5.388-2.917 9.397 0 4.203 1.003 7.433 3.008 9.688 2.004 2.318 4.794 3.475 8.362 3.475 2.945 0 5.388-.718 7.331-2.16 1.936-1.378 3.254-3.384 3.942-6.017zm-6.389-7.335h-9.579c.06-1.628.529-2.88 1.407-3.76.878-.878 2.003-1.317 3.38-1.317 1.504 0 2.662.44 3.48 1.317.751.814 1.186 2.067 1.312 3.76z" /><path d="M120.077 32.533V20.402c0-2.442.362-4.494 1.08-6.157.721-1.66 1.705-2.991 2.96-3.992 1.19-.944 2.583-1.632 4.182-2.07a18.552 18.552 0 014.928-.66H134.168V14.2h-2.158c-1.818 0-3.168.44-4.04 1.311-.879.882-1.318 2.262-1.318 4.142v12.88h-6.575zM145.907 32.533c-2.062.121-4.304.093-6.713-.095-2.414-.188-3.614-1.723-3.614-4.606V.187h3.381c.81 0 1.533.317 2.158.943.627.627.941 1.38.941 2.258v4.229h3.846v1.317c0 .937-.31 1.706-.933 2.304a3.163 3.163 0 01-2.257.894h-.655v13.913c0 1.063.621 1.598 1.878 1.598h1.967v4.89h.001z" /><path opacity=".5" d="M71.839 8.985l-1.47 3.61 3.073 6.95 3.341-8.689-4.944-1.871z" fill="inherit"/><path opacity=".75" d="M80.39 8.316l-5.478 14.438 3.073 7.085 7.617-19.517-5.211-2.006z" fill="inherit"/><path d="M96.025 10.322L94.42 1.098l-7.35 5.614 2.005.802-9.754 25.266h5.612L94.02 9.52l2.005.802zM149.906 3.124c-1.492 0-2.7 1.226-2.7 2.715 0 1.5 1.208 2.714 2.7 2.714a2.715 2.715 0 000-5.43zm0 4.904a2.176 2.176 0 01-2.178-2.19c0-1.204.969-2.189 2.178-2.189a2.19 2.19 0 010 4.379zm1.198-.887c-.577-1.062-.544-1.007-.577-1.05.261-.154.425-.46.425-.81 0-.57-.327-.931-1.1-.931h-.861a.132.132 0 00-.13.131v2.715c0 .077.054.131.13.131h.425a.133.133 0 00.131-.131v-.909h.348l.512.975c.022.043.076.065.12.065h.457c.109 0 .164-.098.12-.186zm-1.198-1.478h-.359v-.7h.294c.348 0 .424.131.424.35 0 .23-.13.35-.359.35z" /></svg> <span class="brand-color-wash-blue mini dib" style="width: 105%;">Experimentation is Human Nature</span> </div> <div> <ul class="flex items-center u-my-8 u-mx-0 u-pa-0 list-none"> <li class="linkedin u-mr-16"> <a class="dib" href="https://www.linkedin.com/company/convert-com/" target="_blank" rel="noopener noreferrer" aria-label="Follow us Linkedin" style="width:24px; height: 24px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#ffffff"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg> </a> </li> <li class="twitter u-mr-16"> <a class="dib" href="https://twitter.com/Convert" target="_blank" rel="noopener noreferrer" aria-label="Follow us Twitter" style="width:24px; height: 24px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#ffffff"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg> </a> </li> <li class="youtube u-mr-16"> <a class="dib" href="https://www.youtube.com/c/Convertcom" target="_blank" rel="noopener noreferrer" aria-label="Follow us Youtube" style="width:24px; height: 24px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#ffffff"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg> </a> </li> <li class="instagram u-mr-16"> <a class="dib" href="https://www.instagram.com/convertinsightsinc/" target="_blank" rel="noopener noreferrer" aria-label="Follow us Instagram" style="width:24px; height: 24px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#ffffff"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg> </a> </li> <li class="tiktok u-mr-16"> <a class="dib" href="https://www.tiktok.com/@convert.insights" target="_blank" rel="noopener noreferrer" aria-label="Follow us Tiktok" style="width:24px; height: 24px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#ffffff"><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg> </a> </li> </ul> </div> </div> <div class="u-pa-32 brand-color-white"> <div class="u-mb-24 db">2093 PHILADELPHIA PIKE #9985 <br>CLAYMONT, DE 19703, USA</div> <div class="u-mb-4 db">(US) +1-888-666-9711</div> <div class="u-mb-24 db">(UK) +44-808-196-2557</div> <a id="footer-freetrial" href="#subscribeFreeTrial" class="signup_link button button-purple full-width u-mb-0">Start 15-day free trial</a> </div> </div> </div> </div> </div> <div class="bg-brand-color-dark-black u-pt-48 u-pb-24"> <div class="grid center center flex--tb flex-wrap grid items-center justify-center"> <div class="dib"> <div class="u-tb-mr-24 u-mb-24 u-tb-mb-0 flex items-center justify-center"> <div class="relative center"> <div class="h1 brand-color-white" id="treesPlanted" style="font-size: 53px;"> 23331 </div> <img class="absolute" data-src="https://www.convert.com/wp-content/themes/olympus/img/trees.png" alt="Trees Planted" width="122" height="27" style="transform: translate(3.5px, -24px);"> <span class="brand-color-white text-white text-xl">Trees Planted</span> </div> </div> </div> <img class="nolazy" src="https://www.convert.com/wp-content/themes/olympus/img/climate-neutral-certified-badge.png" width="208" height="84" alt="Climate Neutral Certified badge"> </div> </div> <div class="bg-brand-color-dark-black u-py-24"> <div class="grid--full center flex flex-wrap justify-center"> <span class="brand-color-light-gray u-mr-16 small">© 2025, Convert Insights Inc. All rights reserved</span> <a href="/terms-of-use/" class="brand-color-dark-gray u-mr-16 small">Terms of use</a> <a href="/privacy-notice/" class="brand-color-dark-gray u-mr-16 small">Privacy Notice</a> <a href="/opt-out/" class="brand-color-dark-gray small">Opt Out</a> </div> </div> </footer> </div> <div id="subscribeFreeTrial" class="hide br4"> <div class="main-form main-form--light bg-brand-color-white u-pa-0 u-my-0"> <div class="grid grid--npx"> <form class="u-mb-0" method="post" name="mc-embedded-subscribe-form" id="form-free-trial"> <div id="mainFormWrapper" class="flex flex-wrap"> <div id="basicFormWrapper" class="grid__12--nmx u-pa-24 u-tb-pa-48"> <input type="hidden" name="action" value="auth_convert_signup"> <input type="hidden" name="emailAsUsername" value="1"> <input type="hidden" id="planIDField" name="plan_id" data-default-plan="194" autocomplete="off" value="194"> <input type="hidden" name="requireTermsAccept" value="1"> <input type="hidden" name="planSignup" value="1" /> <input type="hidden" name="utm_source" value> <input type="hidden" name="utm_campaign" value> <input type="hidden" name="lead_persona" value> <input type="hidden" name="dnt" value> <input type="hidden" name="url_origin" value> <input type="hidden" id="isSubmitted" name="is_submitted" value> <input type="hidden" id="formAbandonment" name="form_abandonment" value> <input type="hidden" id="tapfiliateReferenceId" name="tapfiliateReferenceId" value> <div style="display: none"> <label for="apbct_skip_this_form">Skip this form</label> <input type="text" name="apbct_skip_this_form" id="apbct_skip_this_form"> </div> <div class="slide grid overflow-hidden" data-slide="first" style="overflow: hidden;"> <div class="freetrial-form__header align-left"> <div style="width: 128px;"> <svg aria-label="Convert Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 153 33" class="svg-black"><path d="M17.94 24.823h4.699c-.69 2.634-2.007 4.64-3.947 6.018C16.748 32.283 14.308 33 11.365 33c-3.57 0-6.355-1.157-8.36-3.475C1 27.27 0 24.04 0 19.837c0-4.009.968-7.142 2.912-9.397 2-2.319 4.79-3.482 8.36-3.482 3.76 0 6.668 1.13 8.736 3.385 1.127 1.38 1.94 2.978 2.444 4.794h-6.578c-.314-.624-.626-1.092-.936-1.409-.82-.878-1.976-1.317-3.476-1.317-1.382 0-2.508.44-3.383 1.317-1.127 1.254-1.691 3.327-1.691 6.21 0 2.88.564 4.915 1.69 6.107.81 1.002 2.03 1.503 3.664 1.503 1.065 0 1.968-.217 2.724-.657.188-.061.358-.173.514-.329.158-.16.329-.33.52-.517.122-.19.374-.438.748-.752.381-.31.942-.47 1.692-.47" /><path fill-rule="evenodd" clip-rule="evenodd" d="M24.314 25.72c.561 1.912 1.505 3.43 2.818 4.557 1.252 1.127 2.931 1.928 5.029 2.394 2.095.474 4.18.43 6.246-.138 2.314-.502 4.225-1.788 5.735-3.855.681-1.002 1.25-2.222 1.688-3.663.436-1.442.655-3.166.655-5.178 0-2.756-.535-5.165-1.6-7.236-1.124-2.316-2.876-3.95-5.255-4.888-2.066-.756-4.384-.955-6.953-.613-2.569.346-4.667 1.46-6.294 3.34-1.007 1.124-1.74 2.539-2.214 4.232a19.12 19.12 0 00-.7 5.078c0 2.06.28 4.056.845 5.97zm5.549-5.55c-.129-2.853.464-4.998 1.779-6.442.438-.436 1.13-.798 2.068-1.081a4.58 4.58 0 012.815.048c.942.316 1.775 1.033 2.491 2.164.724 1.127 1.081 2.82 1.081 5.078-.06 2.503-.467 4.321-1.22 5.449-.751 1.127-1.617 1.832-2.585 2.117a4.47 4.47 0 01-2.867-.097c-.935-.342-1.594-.763-1.968-1.267-.942-1.124-1.475-3.113-1.594-5.97z" /><path d="M69.311 32.534h-3.285c-.94 0-1.708-.3-2.302-.895-.597-.598-.89-1.362-.89-2.302V16.552c0-1.505-.458-2.604-1.366-3.295a4.928 4.928 0 00-3.054-1.034 4.73 4.73 0 00-3.004 1.034c-.878.69-1.317 1.79-1.317 3.295v15.982h-6.572V17.867c0-4.26 1.107-7.113 3.334-8.558 2.221-1.44 4.677-2.222 7.373-2.351 2.756 0 5.29.723 7.61 2.164 2.318 1.44 3.473 4.358 3.473 8.745v14.667z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M118.667 24.823h-4.698c-.747 0-1.333.159-1.735.47-.408.314-.647.562-.704.752l-.148.147-.372.37a1.33 1.33 0 01-.517.33c-.751.44-1.659.656-2.722.656-1.629 0-2.855-.501-3.666-1.503-.877-.94-1.346-2.383-1.406-4.326h16.249c.064-.123.095-.341.095-.658v-1.034c0-4.134-.999-7.362-3.003-9.684-2.071-2.255-4.982-3.385-8.742-3.385-3.563 0-6.355 1.163-8.357 3.482-1.942 2.255-2.917 5.388-2.917 9.397 0 4.203 1.003 7.433 3.008 9.688 2.004 2.318 4.794 3.475 8.362 3.475 2.945 0 5.388-.718 7.331-2.16 1.936-1.378 3.254-3.384 3.942-6.017zm-6.389-7.335h-9.579c.06-1.628.529-2.88 1.407-3.76.878-.878 2.003-1.317 3.38-1.317 1.504 0 2.662.44 3.48 1.317.751.814 1.186 2.067 1.312 3.76z" /><path d="M120.077 32.533V20.402c0-2.442.362-4.494 1.08-6.157.721-1.66 1.705-2.991 2.96-3.992 1.19-.944 2.583-1.632 4.182-2.07a18.552 18.552 0 014.928-.66H134.168V14.2h-2.158c-1.818 0-3.168.44-4.04 1.311-.879.882-1.318 2.262-1.318 4.142v12.88h-6.575zM145.907 32.533c-2.062.121-4.304.093-6.713-.095-2.414-.188-3.614-1.723-3.614-4.606V.187h3.381c.81 0 1.533.317 2.158.943.627.627.941 1.38.941 2.258v4.229h3.846v1.317c0 .937-.31 1.706-.933 2.304a3.163 3.163 0 01-2.257.894h-.655v13.913c0 1.063.621 1.598 1.878 1.598h1.967v4.89h.001z" /><path opacity=".5" d="M71.839 8.985l-1.47 3.61 3.073 6.95 3.341-8.689-4.944-1.871z" fill="inherit"/><path opacity=".75" d="M80.39 8.316l-5.478 14.438 3.073 7.085 7.617-19.517-5.211-2.006z" fill="inherit"/><path d="M96.025 10.322L94.42 1.098l-7.35 5.614 2.005.802-9.754 25.266h5.612L94.02 9.52l2.005.802zM149.906 3.124c-1.492 0-2.7 1.226-2.7 2.715 0 1.5 1.208 2.714 2.7 2.714a2.715 2.715 0 000-5.43zm0 4.904a2.176 2.176 0 01-2.178-2.19c0-1.204.969-2.189 2.178-2.189a2.19 2.19 0 010 4.379zm1.198-.887c-.577-1.062-.544-1.007-.577-1.05.261-.154.425-.46.425-.81 0-.57-.327-.931-1.1-.931h-.861a.132.132 0 00-.13.131v2.715c0 .077.054.131.13.131h.425a.133.133 0 00.131-.131v-.909h.348l.512.975c.022.043.076.065.12.065h.457c.109 0 .164-.098.12-.186zm-1.198-1.478h-.359v-.7h.294c.348 0 .424.131.424.35 0 .23-.13.35-.359.35z" /></svg> </div> <div class="u-dt-mb-0"> <p id="freeTrialTitle" class="h4 brand-color-dark-black u-my-0"> <strong class="pt-1 inline-block">Start your <span id="trialDays" class="h4">15</span>-day free trial now.</strong> <ul class="flex--tb md:flex flex-col u-mx-0 u-tb-my-0 u-pl-0 md:space-x-2 md:flex-row md:items-center justify-"> <li class="text-sm pt-1 flex items-center text-slate-700 brand-color-dark-gray u-mr-4"> <div class="w-4 h-4 mr-1 text-slate-700 brand-color-dark-gray" style="width: 16px; height: 16px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="presentation"> <rect width="256" height="256" fill="none"></rect> <polyline points="88 136 112 160 168 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline> <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle> </svg> </div> No credit card needed </li> <li class="text-sm pt-1 flex items-center text-slate-700 brand-color-dark-gray"> <div class="w-4 h-4 mr-1 text-slate-700 brand-color-dark-gray" style="width: 16px; height: 16px;"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="presentation"> <rect width="256" height="256" fill="none"></rect> <polyline points="88 136 112 160 168 104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline> <circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle> </svg> </div> Access to premium features </li> </ul> </p> </div> </div> <div class="grid"> <div class="freetrial-form__content"> <div id="firstNameSection" class="form-group u-my-16"> <label for="first_name" class="brand-color-black lead-small">First Name <span class="brand-color-pink">*</span></label> <div class="flex flex-wrap items-center relative"> <input type="text" id="first_name" class="u-my-4" name="first_name" required autofocus> </div> </div> <div id="emailSection" class="form-group u-my-16"> <label for="business_email" class="brand-color-black lead-small">Business Email <span class="brand-color-pink">*</span> <span class="brand-color-dark-gray">(Input a valid email address)</span></label> <div class="flex flex-wrap items-center relative"> <input type="email" id="business_email" name="user_email" autocomplete="off" required class="u-my-4"> </div> </div> </div> </div> <div class="grid"> <div id="termsAcceptSection" class="form-group"> <div id="newsletterLabel" class="u-mb-12 brand-color-black dn"> <div class="grid flex"> <div> <input type="hidden" name="newsletter" value="No" /> <input type="checkbox" name="newsletter" value="Yes" id="newsletter" data-jcf='{"checkedClass": "jcf-checked", "wrapNative": false}' /> </div> <div class="relative u-ml-8" style="top: 4px;"> <label for="newsletter" class="cursor-pointer"> I want to receive the Convert Newsletter</label> </div> </div> </div> <div class="u-mb-24"> <div class="grid flex"> <div> <input type="checkbox" name="termsAccept" value="1" id="termsAccept" data-jcf='{"checkedClass": "jcf-checked", "wrapNative": false}' required /> </div> <div class="relative u-ml-8"> <label for="termsAccept" id="tee" class="cursor-pointer"> By submitting this form, you agree to have read and acknowledged our: <a href="/terms-of-use/" target="_blank" rel="noopener noreferrer" class="text-blue-800">terms of use</a>, <a href="/privacy-notice/" target="_blank" rel="noopener noreferrer">privacy notice</a> and <a href="/conscious-business/non-aligned-policy/" target="_blank" rel="noopener noreferrer" class="lnh tooltip-bubble dib text-blue-800" data-tooltip="Convert as a conscious business only works with other conscious brands. Read more details at this link in a new tab">non-aligned customers' policy<span class="brand-color-pink u-ml-4">*</span></a></label> </div> </div> </div> </div> <div class="form-group u-mt-40 dn"> <div> <button class="button button-purple u-ml-0 u-mb-0" data-style="expand-left" id="btn-free-trial-next" type="button" name="button">Continue</button> </div> <div class="center"> <span class="mini brand-color-dark-gray">You can always change your preferences later.</span> </div> </div> </div> </div> </div> <div id="complementFormWrapper" class="dn grid__12--nmx grid__6--nmx--dt bg-brand-color-light-gray items-center u-pa-24 u-tb-pa-36 bl brand-color-light-gray"> <div id="complementForm" class="slide grid hide full-width" data-slide="second"> <div id="complementFormHeaderSection" class="freetrial-form__header"> <div class="brand-color-black h4 bold align-left"> You're Almost Done. </div> </div> <div class="freetrial-form__content"> <div id="companyNameSection" class="form-group u-my-16"> <label for="company_name" class="lead-small">Company Name <span class="brand-color-pink">*</span></label> <div class="flex flex-wrap items-center relative"> <input type="text" id="company_name" required class="u-my-4" name="company_name"> </div> </div> <div id="spendDaysSection" class="spend-days u-mb-24"> <label class="lead-small"> What Job(s) Do You Do at Work? <span class="brand-color-pink">*</span> (Choose Up to 2 Options): </label> <div class="grid u-pt-12"> <div class="grid-colum-2--tb grid-column-gap-24"> <div class="form-group"> <div class="box-radio-button"> <input id="how_spend_your_days_1" type="checkbox" name="how_spend_your_days[]" value="I manage a marketing team" data-option="first" title="I manage a marketing team"> <label for="how_spend_your_days_1" class="radio-button__label">I manage a marketing team</label> </div> </div> <div class="form-group"> <div class="box-radio-button"> <input id="how_spend_your_days_2" type="checkbox" name="how_spend_your_days[]" value="I manage a tech team" data-option="second" title="I manage a tech team"> <label for="how_spend_your_days_2" class="radio-button__label">I manage a tech team</label> </div> </div> <div class="form-group"> <div class="box-radio-button"> <input id="how_spend_your_days_3" type="checkbox" name="how_spend_your_days[]" value="I research and/or hypothesize experiments" data-option="third" title="I research and/or hypothesize experiments"> <label for="how_spend_your_days_3" class="radio-button__label">I research and/or hypothesize experiments</label> </div> </div> <div class="form-group u-mb-0"> <div class="box-radio-button"> <input id="how_spend_your_days_4" type="checkbox" name="how_spend_your_days[]" value="I code & QA experiments" data-option="fourth" title="I code & QA experiments"> <label for="how_spend_your_days_4" class="radio-button__label">I code & QA experiments</label> </div> </div> </div> </div> <div id="howSpendYourDaysMessage" class="brand-color-black dn db--tb u-mt-8 brand-color-copy-gray text-slate-700"> Convert is committed to protecting your privacy. </div> </div> <div id="phoneNumberSection" class="phone-number u-mb-20 hide"> <div class="form-group u-mb-16"> <label for="country" class="lead-small">Country <span class="brand-color-pink">*</span></label> <select name="country" class="c-custom-select u-mb-4" id="country"> </select> </div> </div> <div id="heardFromSection" class="form-group u-my-16"> <label for="heard_from" class="lead-small">Where Did You Hear About Convert (optional)</label> <div class="flex flex-wrap items-center relative"> <input type="text" id="heard_from" class="u-my-4" name="heard_from"> </div> </div> <div id="submitSection"> <input id="recaptchaResponse" type="hidden" name="gRecaptchaResponse" value=""> <button class="button button-purple u-ml-0 u-mb-0 ladda-button" id="btn-free-trial" data-style="expand-left" name="btn_send_free_trail" type="submit"> <span class="ladda-label">START MY FREE TRIAL</span> </button> </div> </div> </div> </div> </div> <div id="successFormWrapper" class="hide u-pa-24 u-tb-pa-48 p-6 md:p-12"> <div class="slide gride" data-slide="third"> <div class="align-left freetrial-form__header u-mb-32"> <div> <p class="h3 brand-color-dark-black u-my-0 bold">Important. Please Read.</p> </div> </div> <div class="freetrial-form__content"> <div id="authSignUpResponse" class=""> <div class="u-pb-28"> <ul class="brand-color-black lead-small list-none u-ma-0 u-pa-0"> <li class="flex items-center align-baseline"> <span class="lnr-checkmark-circle brand-color-green u-mr-4"></span> Check your inbox for the password to Convert’s trial account. </li> <li class="flex items-center align-baseline"> <span class="lnr-checkmark-circle brand-color-green u-mr-4"></span> Log in using the link provided in that email. </li> </ul> </div> <p class="brand-color-dark-black u-mt-0">This sign up flow is built for maximum security. You’re worth it!</p> <button data-fancybox-close="" class="button button-purple">Close Form</button> </div> </div> </div> </div> </form> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function(){ if( document.querySelectorAll('[name^=ct_checkjs]').length > 0 ) { if (typeof apbct_public_sendAJAX === 'function' && typeof apbct_js_keys__set_input_value === 'function') { apbct_public_sendAJAX( { action: 'apbct_js_keys__get' }, { callback: apbct_js_keys__set_input_value }) } } },0) }) </script> <div class="dialog-container" data-a11y-dialog="previewDialog" aria-hidden="true" > <div class="dialog-overlay" data-a11y-dialog-hide></div> <div class="dialog-content" role="document"> <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window" > × </button> <img id="previewImg" src=""> </div> </div> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N62PSB2" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div id="bsf_rt_progress_bar_container" class="progress-container-top"> <div class="progress-bar" id="bsf_rt_progress_bar"></div> </div><script type="text/javascript">/* <![CDATA[ */!function(e,n){var r={"selectors":{"block":"pre.EnlighterJSRAW","inline":"code.EnlighterJSRAW"},"options":{"indent":4,"ampersandCleanup":true,"linehover":true,"rawcodeDbclick":false,"textOverflow":"break","linenumbers":true,"theme":"enlighter","language":"generic","retainCssClasses":false,"collapse":false,"toolbarOuter":"","toolbarTop":"{BTN_RAW}{BTN_COPY}{BTN_WINDOW}{BTN_WEBSITE}","toolbarBottom":""},"resources":["https:\/\/www.convert.com\/wp-content\/plugins\/enlighter\/cache\/enlighterjs.min.css?q+UJsXsyYYlb8At","https:\/\/www.convert.com\/wp-content\/plugins\/enlighter\/resources\/enlighterjs\/enlighterjs.min.js"]},o=document.getElementsByTagName("head")[0],t=n&&(n.error||n.log)||function(){};e.EnlighterJSINIT=function(){!function(e,n){var r=0,l=null;function c(o){l=o,++r==e.length&&(!0,n(l))}e.forEach(function(e){switch(e.match(/\.([a-z]+)(?:[#?].*)?$/)[1]){case"js":var n=document.createElement("script");n.onload=function(){c(null)},n.onerror=c,n.src=e,n.async=!0,o.appendChild(n);break;case"css":var r=document.createElement("link");r.onload=function(){c(null)},r.onerror=c,r.rel="stylesheet",r.type="text/css",r.href=e,r.media="all",o.appendChild(r);break;default:t("Error: invalid file extension",e)}})}(r.resources,function(e){e?t("Error: failed to dynamically load EnlighterJS resources!",e):"undefined"!=typeof EnlighterJS?EnlighterJS.init(r.selectors.block,r.selectors.inline,r.options):t("Error: EnlighterJS resources not loaded yet!")})},(document.querySelector(r.selectors.block)||document.querySelector(r.selectors.inline))&&e.EnlighterJSINIT()}(window,console); /* ]]> */</script><link data-minify="1" rel='stylesheet' id='genesis-custom-blocks__block-featured-snippet-paragraph-pink-css' href='https://www.convert.com/wp-content/cache/min/1/wp-content/themes/olympus/blocks/featured-snippet-paragraph-pink/block.css?ver=1738762491' type='text/css' media='all' /> <link rel='preload' as='style' data-wpacu-preload-it-async='1' onload="this.onload=null;this.rel='stylesheet'" id='wpacu-preload-shared-counts-css' href='https://www.convert.com/wp-content/plugins/shared-counts/assets/css/shared-counts.min.css?ver=1.5.0' type='text/css' media='all' /> <script type="text/javascript" id="leadin-script-loader-js-js-extra"> /* <![CDATA[ */ var leadin_wordpress = {"userRole":"visitor","pageType":"post","leadinPluginVersion":"11.1.82"}; /* ]]> */ </script> <script type="text/javascript" src="https://js.hs-scripts.com/20848441.js?integration=WordPress&ver=11.1.82" id="leadin-script-loader-js-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/lazy-load-js.js?ver=1" id="lazyLoadJS-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/img-blog-preview.js?ver=6.7.1" id="img-blog-preview-js"></script> <script type="text/javascript" id="rocket-browser-checker-js-after"> /* <![CDATA[ */ "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); /* ]]> */ </script> <script type="text/javascript" id="rocket-preload-links-js-extra"> /* <![CDATA[ */ var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/www.convert.com","onHoverDelay":"100","rateThrottle":"3"}; /* ]]> */ </script> <script type="text/javascript" id="rocket-preload-links-js-after"> /* <![CDATA[ */ (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); /* ]]> */ </script> <script type="text/javascript" defer='defer' src="https://www.convert.com/wp-content/themes/olympus/js/jquery.easing.1.3.js?ver=1" id="jquery-easing-1-3-js"></script> <script type="text/javascript" defer='defer' src="https://www.convert.com/wp-content/themes/olympus/fancybox/dist/jquery.fancybox.min.js?ver=1" id="jquery.fancybox-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/jquery.validate.min.js?ver=1" id="jquery.validate-js"></script> <script type="text/javascript" id="main-js-extra"> /* <![CDATA[ */ var themeple_global = {"ajaxurl":"https:\/\/www.convert.com\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/main.js?ver=1" id="main-js"></script> <script type="text/javascript" defer='defer' src="https://www.convert.com/wp-content/themes/olympus/js/main-menu.js?ver=1" id="mainMenu-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/chat-support.js?ver=1738761619" id="chatSupport-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/plan-id-handler.js?ver=1738761619" id="planIdHandler-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/customize-forms-ui.js?ver=1" id="customizeFormsUi-js"></script> <script type="text/javascript" defer='defer' src="https://www.convert.com/wp-content/themes/olympus/js/auth-convert-signup.js?ver=1738761619" id="authConvertSignUp-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/anchor.min.js?ver=1" id="anchor-js-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/anchor-init.js?ver=1" id="anchor-init-js-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/themes/olympus/js/js-qrcode.js?ver=1" id="qrCode-js"></script> <script type="text/javascript" id="icwp-wpsf-notbot-js-extra"> /* <![CDATA[ */ var shield_vars_notbot = {"strings":{"select_action":"Please select an action to perform.","are_you_sure":"Are you sure?","absolutely_sure":"Are you absolutely sure?"},"comps":{"notbot":{"ajax":{"not_bot":{"action":"shield_action","ex":"capture_not_bot","exnonce":"fe579813ae","ajaxurl":"https:\/\/www.convert.com\/wp-admin\/admin-ajax.php","_wpnonce":"7141df2f02","_rest_url":"https:\/\/www.convert.com\/wp-json\/shield\/v1\/action\/capture_not_bot?exnonce=fe579813ae&_wpnonce=7141df2f02"}},"flags":{"skip":false,"required":true}}}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/wp-simple-firewall/assets/dist/shield-notbot.bundle.js?ver=20.1.2&mtime=1736885764" id="icwp-wpsf-notbot-js"></script> <script type="text/javascript" id="ivory-search-scripts-js-extra"> /* <![CDATA[ */ var IvorySearchVars = {"is_analytics_enabled":"1"}; /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/add-search-to-menu/public/js/ivory-search.min.js?ver=5.5.9" id="ivory-search-scripts-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script> <script type="text/javascript" id="ez-toc-js-js-extra"> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0066ff;color:#0066ff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0066ff;color:#0066ff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""}; /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.72-1738670773" id="ez-toc-js-js"></script> <script type="text/javascript" id="shared-counts-js-extra"> /* <![CDATA[ */ var shared_counts = {"social_tracking":"1"}; /* ]]> */ </script> <script type="text/javascript" async='async' defer='defer' src="https://www.convert.com/wp-content/plugins/shared-counts/assets/js/shared-counts.min.js?ver=1.5.0" id="shared-counts-js"></script> <script type="text/javascript" id="bsfrt_frontend-js-extra"> /* <![CDATA[ */ var myObj = {"option":""}; /* ]]> */ </script> <script type="text/javascript" src="https://www.convert.com/wp-content/plugins/read-meter/assets/js/bsf-rt-frontend.min.js?ver=1.0.9" id="bsfrt_frontend-js"></script> <script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://www.convert.com/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script><script>function lazyLoadThumb(e,alt,l){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';if(l){t=t.replace('data-lazy-','');t=t.replace('loading="lazy"','');t=t.replace(/<noscript>.*?<\/noscript>/g,'');}t=t.replace('alt=""','alt="'+alt+'"');return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?"":"&"+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow","accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var exclusions=["nolazy"];var e,t,p,u,l,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)(e=document.createElement("div")),(u='https://i.ytimg.com/vi/ID/hqdefault.jpg'),(u=u.replace('ID',a[t].dataset.id)),(l=exclusions.some(exclusion=>u.includes(exclusion))),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query",a[t].dataset.query),e.setAttribute("data-src",a[t].dataset.src),(e.innerHTML=lazyLoadThumb(a[t].dataset.id,a[t].dataset.alt,l)),a[t].appendChild(e),(p=e.querySelector(".play")),(p.onclick=lazyLoadYoutubeIframe)});</script> <script type="text/javascript"> const deferJS = () => { const element = document.createElement("script"); element.src = "https://www.convert.com/wp-content/themes/olympus/js/defer-external-scripts.js?ver=" + 1738761619; document.body.appendChild(element); } const deferFormAbandon = () => { const element = document.createElement("script"); element.src = "https://www.convert.com/wp-content/themes/olympus/js/form-abandon.js"; document.body.appendChild(element); } const choicesJS = () => { const choicesScript = document.createElement("script"); choicesScript.src = "https://www.convert.com/wp-content/themes/olympus/js/choices-js/choices.js"; document.body.appendChild(choicesScript); const linkTag = document.createElement("link"); linkTag.rel = "stylesheet"; linkTag.href = "https://www.convert.com/wp-content/themes/olympus/js/choices-js/choices.css"; document.head.appendChild(linkTag); } lazyLoadJS.deferScript(customizeFormsUI.init); lazyLoadJS.deferScript(choicesJS); lazyLoadJS.deferScript(deferJS); lazyLoadJS.deferScript(deferFormAbandon); </script> </body> </html>