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.

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 next page 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.

Supported image formats

✅ We support testing on responsive <picture> elements with <source> and <img> children with srcset attributes.

Example:

<picture>
    <source srcset="https://chartbeat.com/large.jpg, https://chartbeat.com/large-retina.jpg 2x" media="(min-width: 1200px)">
    <source srcset="https://chartbeat.com/medium.jpg, https://chartbeat.com/medium-retina.jpg 2x" media="(min-width: 976px)">
    <source srcset="https://chartbeat.com/small.jpg, https://chartbeat.com/small-retina.jpg 2x" media="(min-width: 576px)">
    <img srcset="https://chartbeat.com/mobile.jpg" alt="A picture">
</picture>

✅ We support testing on responsive <img> elements with src and srcset attributes.

Example:

<img src="https://chartbeat.com/image.jpg" srcset="https://chartbeat.com/image1x.jpg 1x, https://chartbeat.com/image2x.jpg 2x">

✅ We support testing on non-responsive <img> elements with a single src attribute defined on page load.

Example:

<img src="https://chartbeat.com/image.jpg">

✅ 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:

<img data-src="https://chartbeat.com/image.jpg">
<img data-img-sm="https://chartbeat.com/image1.jpg" data-img-lg="https://chartbeat.com/image2.jpg">

Unsupported image formats

❌ 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:

<!-- Unsupported -->
<article> 
  <img src="image.jpg">
  <a href="test.com/article1">
    <h3>Headline Text</h3>
  <a>
</article>

<!-- Supported -->
<article> 
  <a href="test.com/article1">
    <img src="image.jpg">
  </a>
  <a href="test.com/article1">
    <h3>Headline Text</h3>
  <a>
</article>

<!-- Also supported -->
<article> 
  <a href="test.com/article1">
    <img src="image.jpg">
    <h3>Headline Text</h3>
  <a>
</article>

❌ We do not support testing for <picture> tags that do not properly have an <img> element as a child.

Example:

<picture><div class="background-css-image-here"></div></picture>

❌ We do not support testing images that use the background-image CSS property.

Example:

<div style="background-image: url('image.jpg');"></div>

❌ 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.

Partial homepage compatibility

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.

Next steps

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".