{"id":324,"date":"2020-09-16T11:32:26","date_gmt":"2020-09-16T11:32:26","guid":{"rendered":"https:\/\/vwo.com\/product-updates\/?p=324"},"modified":"2022-01-25T10:21:59","modified_gmt":"2022-01-25T10:21:59","slug":"apply-animation-while-images-load","status":"publish","type":"post","link":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/","title":{"rendered":"Better End-user Experience when A\/B Testing Images"},"content":{"rendered":"\n

Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing<\/a>, you can easily experiment with images using the ‘Change Image’ operation within the Visual Editor<\/a>.<\/p>\n\n\n\n

When experimenting with images, at times, there can be a suboptimal experience for visitors if they are on slow internet speeds, or if the new image size is large. This can lead to flashing the original image for a split second, or delays in loading the new image (and hence showing a blank box for a long time), or a complete change in page layout if the new image is of a different size than the original one.<\/p>\n\n\n\n

\"Without
This is how the page would load without a loader animation<\/figcaption><\/figure>\n\n\n\n

In order to overcome these potential issues and ensure a smooth experience for visitors, we have introduced an option to add a loading state animation for every image you change on the website with Visual Editor.<\/p>\n\n\n\n

\"With
This is how the page would look if a loading animation was added<\/figcaption><\/figure>\n\n\n\n

This can be configured within the change image option in the editor. You can select the speed of the animation along with the primary and secondary colors that will be used. This allows you to set it up in a way that best matches the website.<\/p>\n\n\n\n

\"Changeimage
Applying a loader for an Image Change operation<\/figcaption><\/figure>\n\n\n\n

In case there are multiple image changes in the campaign and you wish to apply a default loader for all of them, you can do so by using the settings within the editor as shown below. You can even apply it for previous image changes in the campaign.<\/p>\n\n\n\n

\"Changeimage
Applying a default loader setting for the current campaign<\/figcaption><\/figure>\n\n\n\n

You can also apply a default setting for all campaigns that will be created in the account. However, you can override this for individual campaigns by using the editor.<\/p>\n\n\n\n

\"Changeimage
Applying a default loader for all campaigns in the account<\/figcaption><\/figure>\n\n\n\n

For step by step guidance on how to configure the loading animation, check out our Knowledge Base article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the ‘Change Image’ operation within the Visual Editor. When experimenting with images, at times, there can be a suboptimal experience for visitors if they are on slow internet speeds, or if…<\/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":[30,12,13],"feature":[],"industry-type":[],"class_list":["post-324","post","type-post","status-publish","format-standard","hentry","category-testing","category-deploy","tag-campaign-settings","tag-client-side-testing","tag-visual-editor"],"acf":[],"yoast_head":"\nApply Animation While Images Load | VWO Product Updates<\/title>\n<meta name=\"description\" content=\"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation\" \/>\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\/apply-animation-while-images-load\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apply Animation While Images Load | VWO Product Updates\" \/>\n<meta property=\"og:description\" content=\"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO Product Updates\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-16T11:32:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-25T10:21:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif\" \/>\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\/apply-animation-while-images-load\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\"},\"author\":{\"name\":\"Sathyajith Vijayakumar\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"headline\":\"Better End-user Experience when A\/B Testing Images\",\"datePublished\":\"2020-09-16T11:32:26+00:00\",\"dateModified\":\"2022-01-25T10:21:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\"},\"wordCount\":346,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif\",\"keywords\":[\"Campaign Settings\",\"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\/apply-animation-while-images-load\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\",\"url\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\",\"name\":\"Apply Animation While Images Load | VWO Product Updates\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif\",\"datePublished\":\"2020-09-16T11:32:26+00:00\",\"dateModified\":\"2022-01-25T10:21:59+00:00\",\"author\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"description\":\"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage\",\"url\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif\",\"contentUrl\":\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/product-updates\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Better End-user Experience when A\/B Testing Images\"}]},{\"@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":"Apply Animation While Images Load | VWO Product Updates","description":"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation","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\/apply-animation-while-images-load\/","og_locale":"en_US","og_type":"article","og_title":"Apply Animation While Images Load | VWO Product Updates","og_description":"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation","og_url":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/","og_site_name":"VWO Product Updates","article_published_time":"2020-09-16T11:32:26+00:00","article_modified_time":"2022-01-25T10:21:59+00:00","og_image":[{"url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif","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\/apply-animation-while-images-load\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/"},"author":{"name":"Sathyajith Vijayakumar","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"headline":"Better End-user Experience when A\/B Testing Images","datePublished":"2020-09-16T11:32:26+00:00","dateModified":"2022-01-25T10:21:59+00:00","mainEntityOfPage":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/"},"wordCount":346,"commentCount":0,"image":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif","keywords":["Campaign Settings","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\/apply-animation-while-images-load\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/","url":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/","name":"Apply Animation While Images Load | VWO Product Updates","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage"},"image":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif","datePublished":"2020-09-16T11:32:26+00:00","dateModified":"2022-01-25T10:21:59+00:00","author":{"@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"description":"Experimenting with images is a vital part of optimizing the website for improved conversions. In VWO Testing, you can easily experiment with images using the \u2018Change Image\u2019 operation","breadcrumb":{"@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/09\/without-loader8.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/vwo.com\/product-updates\/apply-animation-while-images-load\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/product-updates\/"},{"@type":"ListItem","position":2,"name":"Better End-user Experience when A\/B Testing Images"}]},{"@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\/324","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=324"}],"version-history":[{"count":43,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/324\/revisions"}],"predecessor-version":[{"id":932,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/324\/revisions\/932"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/media?parent=324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/categories?post=324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/tags?post=324"},{"taxonomy":"feature","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/feature?post=324"},{"taxonomy":"industry-type","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/industry-type?post=324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}