{"id":915,"date":"2021-05-21T08:04:06","date_gmt":"2021-05-21T08:04:06","guid":{"rendered":"https:\/\/vwo.com\/product-updates\/?p=915"},"modified":"2023-10-27T07:39:35","modified_gmt":"2023-10-27T07:39:35","slug":"ab-test-with-responsive-images-to-load-campaign-pages-faster","status":"publish","type":"post","link":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/","title":{"rendered":"AB Test with Responsive Images to Load Campaign Pages Faster"},"content":{"rendered":"\n

Visitors browse your website on different devices- from handhelds with small screens that people keep in their pockets to oversized monitors used with desktop computers. Through the years, smartphones have been packing more pixels in their screens with every iteration- a trend that looks to continue. Modern websites are not designed for a single screen size- they respond<\/strong> and adapt<\/strong> based on the screen of the visitor\u2019s device.<\/p>\n\n\n\n

\"Devices<\/figure>\n\n\n\n

Regarding how images are shown on different screens, having a single largest possible image is not an optimal way to do things. A high-quality image looks great on a high-resolution screen, but this may not be needed for low-resolution screens. A smaller image can do the job and load much faster on these devices.<\/p>\n\n\n\n

Enter \u2018srcset\u2019 for images<\/h2>\n\n\n\n

If not a single large image, but a set of images<\/strong> of different sizes is made available for every image on the website, the most optimal ones can be used for each situation. This is what an image\u2019s srcset<\/em> helps achieve. <\/p>\n\n\n\n

The srcset<\/em> is an image attribute that defines which image (from the set) is to be selected for each scenario (based on the screen size). So when the page loads, the browser selects the image as per this condition for that device\u2019s screen size. When the page has many images, the impact adds up to load the page as quickly as possible for that device.<\/p>\n\n\n\n

How srcset works<\/h2>\n\n\n\n

For any image, the srcset<\/em> attribute lets you define a list of images along with size descriptions for each. It is also mandatory to define the src attribute- this is needed for browsers that do not have srcset<\/em> support (which means things will work conventionally here- based on a single image). Treat this as the default image size in situations where the entire set is unavailable.<\/p>\n\n\n\n

The markup should be something like this for four responsive image sizes in the set:<\/p>\n\n\n\n

<img \n   srcset=\"\n      url size,\n      url size,\n      url size,\n      url size\" \n   src=\"default url\" \n><\/code><\/pre>\n\n\n\n
Using responsive images in VWO<\/h2>\n\n\n\n
When you are testing<\/a> or rolling<\/a> out changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset<\/em> defined correctly. It cannot be a single large image that kills how quickly the page has been designed to load.<\/p>\n\n\n\n
When creating the experience using the Visual Editor, select the image to change and click \u2018Change Image\u2019<\/strong>. You should be able to change the default image source in the following dialogue. Just below that option, \u2018Responsive sizes<\/strong>\u2019 shows the different sizes for which the old image\u2019s srcset<\/em> has been defined. You need to replace each image in the set with the new image for that size. \u20181x\u2019 represents the normal size and \u20182x\u2019 is usually defined for the image that is twice the size of the normal image. The set for the image on your website could be different.<\/p>\n\n\n\n
\"Image\"
The option to upload responsive images when changing images for a campaign<\/figcaption><\/figure>\n\n\n\n
While making this change, it is important that only new images are present in the srcset. As a result, the srcset of the original image will be removed completely. There is no chance that the browser can select an older image. If you wish to add responsive sizes for the new image, you can go ahead and add them. For detailed walkthrough of how to modify the srcset<\/em> of an image, do check out this article<\/a>.<\/p>\n\n\n\n
If you do not see the \u2018responsive sizes\u2019 option, it means that the original image did not have an srcset. We recommend that you reach out to your website developer and have the srcset defined for it. Once this is done, you can modify it to add more image sizes in the set using VWO. Ideally, every image on your website should have a srcset defined.<\/p>\n\n\n\n
Pro Tip: <\/strong>If you just have a single large image and want to generate images of different sizes to create a set, you can use this tool<\/a>.<\/p>\n\n\n\n
Thus by properly defining the srcset for images, you can ensure that AB testing does impact how quickly your pages load owing to image changes that you are experimenting with.<\/p>\n","protected":false},"excerpt":{"rendered":"
Visitors browse your website on different devices- from handhelds with small screens that people keep in their pockets to oversized monitors used with desktop computers. Through the years, smartphones have been packing more pixels in their screens with every iteration- a trend that looks to continue. Modern websites are not designed for a single screen…<\/p>\n","protected":false},"author":275,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,5],"tags":[12,13],"feature":[],"industry-type":[],"class_list":["post-915","post","type-post","status-publish","format-standard","hentry","category-testing","category-deploy","tag-client-side-testing","tag-visual-editor"],"acf":[],"yoast_head":"\nAB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates<\/title>\n<meta name=\"description\" content=\"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates\" \/>\n<meta property=\"og:description\" content=\"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Product Updates\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-21T08:04:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T07:39:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg\" \/>\n<meta name=\"author\" content=\"Sathyajith Vijayakumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\"},\"author\":{\"name\":\"Sathyajith Vijayakumar\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"headline\":\"AB Test with Responsive Images to Load Campaign Pages Faster\",\"datePublished\":\"2021-05-21T08:04:06+00:00\",\"dateModified\":\"2023-10-27T07:39:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\"},\"wordCount\":702,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg\",\"keywords\":[\"Client Side Testing\",\"Visual Editor\"],\"articleSection\":[\"VWO Testing\",\"VWO Web Rollouts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\",\"url\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\",\"name\":\"AB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg\",\"datePublished\":\"2021-05-21T08:04:06+00:00\",\"dateModified\":\"2023-10-27T07:39:35+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"description\":\"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/product-updates\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AB Test with Responsive Images to Load Campaign Pages Faster\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#website\",\"url\":\"https:\/\/vwo.com\/product-updates\/\",\"name\":\"VWO Product Updates\",\"description\":\"Just another VWO site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/product-updates\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\",\"name\":\"Sathyajith Vijayakumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g\",\"caption\":\"Sathyajith Vijayakumar\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates","description":"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/","og_locale":"en_US","og_type":"article","og_title":"AB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates","og_description":"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly","og_url":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/","og_site_name":"VWO Product Updates","article_published_time":"2021-05-21T08:04:06+00:00","article_modified_time":"2023-10-27T07:39:35+00:00","og_image":[{"url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg","type":"","width":"","height":""}],"author":"Sathyajith Vijayakumar","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/"},"author":{"name":"Sathyajith Vijayakumar","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"headline":"AB Test with Responsive Images to Load Campaign Pages Faster","datePublished":"2021-05-21T08:04:06+00:00","dateModified":"2023-10-27T07:39:35+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/"},"wordCount":702,"commentCount":0,"image":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg","keywords":["Client Side Testing","Visual Editor"],"articleSection":["VWO Testing","VWO Web Rollouts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/","url":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/","name":"AB Test with Responsive Images to Load Campaign Pages Faster| VWO Product Updates","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg","datePublished":"2021-05-21T08:04:06+00:00","dateModified":"2023-10-27T07:39:35+00:00","author":{"@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"description":"When you are testing or deploying changes, it is important to retain the page\u2019s responsive properties. This means that when you change images for a variation, the new image should also have the srcset defined correctly","breadcrumb":{"@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2021\/05\/devices-mockup.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/product-updates\/ab-test-with-responsive-images-to-load-campaign-pages-faster\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/product-updates\/"},{"@type":"ListItem","position":2,"name":"AB Test with Responsive Images to Load Campaign Pages Faster"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/product-updates\/#website","url":"https:\/\/vwo.com\/product-updates\/","name":"VWO Product Updates","description":"Just another VWO site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/product-updates\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5","name":"Sathyajith Vijayakumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g","caption":"Sathyajith Vijayakumar"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/comments?post=915"}],"version-history":[{"count":6,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/915\/revisions"}],"predecessor-version":[{"id":2389,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/915\/revisions\/2389"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/media?parent=915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/categories?post=915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/tags?post=915"},{"taxonomy":"feature","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/feature?post=915"},{"taxonomy":"industry-type","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/industry-type?post=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}