Image Compatibility
Customers planning to use our Image Testing add-on should review the below information to determine whether or not Chartbeat Image Testing is compatible with your homepage image markup formats.
Last updated
Was this helpful?
Customers planning to use our Image Testing add-on should review the below information to determine whether or not Chartbeat Image Testing is compatible with your homepage image markup formats.
Last updated
Was this helpful?
Tip: This article is only relevant for customers evaluating our Image Testing add-on. For customers using only our Headline Testing feature, skip ahead to the of this guide.
We support current standards and best practices of displaying images in modern web browsers. Although we will always be working to expand the methods of image display we support, the sheer breadth of variables prevents us from being compatible with every method.
✅ We support testing on responsive <picture> elements with <source> and <img> children with srcset attributes.
Example:
✅ We support testing on responsive <img> elements with src and srcset attributes.
Example:
✅ We support testing on non-responsive <img> elements with a single src attribute defined on page load.
Example:
✅ We support testing on images with lazy load source or source-set attributes for any of the above formats (i.e. data-src or any other attribute names that your website uses for this purpose).
Example:
❌ We do not support testing for <img> elements that are not descendants of an <a> tag (anchor element). Tests can only be initiated on <img> elements that are descendants of an anchor tag linking to the target article.
Example:
❌ We do not support testing for <picture> tags that do not properly have an <img> element as a child.
Example:
❌ We do not support testing images that use the background-image CSS property.
Example:
❌ We do not support testing on responsive <img> elements that have their src attributes dynamically altered by JavaScript.
This can usually be determined by inspecting an <img> element at mobile and desktop breakpoints: if the srcs differ at each breakpoint, JavaScript is dynamically altering the src.
Chartbeat code does not have a way to determine whether this is or is not the case as the markup is indistinguishable from supported elements. In the rare case that your site uses this as well as supported formats, use caution when making a test.
❌ We do not support testing on <picture> or <img> elements that are injected dynamically into the page by JavaScript dependent on user action.
If your site uses both supported and unsupported formats for different positions on your homepage, you will only be able to successfully run image tests on supported formats. You will still be able to run headline tests on positions with unsupported image formats. Inspect your page layouts to confirm if you can run image tests in each section.
Important: The above list of supported and unsupported image formats does not cover all possible image markup formats. Given the variety of methods used to display images across the web, we expect to uncover new image markup formats as we onboard new clients to this feature. As we discover more compatible and incompatible image markups, we will update this document accordingly.
Read through the next article to learn about headline and image flicker, and if necessary, how to prevent it with our optional implementation to prevent flicker, called "flicker control".