Instant Articles News
by Charlotte Edelson
May 5, 2016
How to Avoid Mistakes When Adding Images

Instant Articles was designed as a visually rich and dynamic format that loads high-quality images quickly. We've seen publishers use a variety of eye-catching images, including photography, gifs and illustrations, to engage readers. When images are implemented incorrectly, they can have the opposite effect, detracting from the reading experience—and delaying the review process.

Below, we've described three common mistakes and outlined how to fix them so you can create more visual reading experiences.

1. Missing Images

The Mistake

If the web version of an article includes images, then the Instant Articles version should include those same images. The reading experience should be consistent across publishing formats.

The Easy Solution

When you're building articles, reference the image formatting documentation to avoid any markup mistakes. Then, before submitting your articles for review, check to make sure that the images in your Instant Articles are the same as those in your web version.

Example

The simplest representation of an image within an Instant Article is to wrap an <img> tag with a <figure>element and have the src attribute point to the URL source of the image.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" /></figure>

Learn about more dynamic image implementations in our developer documentation.

2. Duplicate Images

The Mistake

Images may not be repeated in Instant Articles. We've noticed that this error occurs most frequently when a header image is used again within the body of an article. This can make it seem like the article has loaded incorrectly and creates a broken experience for the reader.

Note: An image that appears within a slideshow in the article is OK to use as the header art.

The Easy Solution

Check your markup and do not include the same image more than once in your articles. If your articles look empty without an image in the body, consider removing the header art. This is a common practice publishers use for stories that are video-only or do not have a lot of text.

Example

Instead of featuring the same image twice, in the header art and in the article body, please remove one. The example below shows an article that does not include header art, rather than repeating the header image.

3. Low Resolution Images

The Mistake

Images that have the tap-to-expand feature enabled must be high resolution and render as such for all screen sizes. Images that render clearly at a smaller size can become soft and pixelated when viewed fullscreen, and some submissions don't pass the initial article review because of this formatting issue. We've seen that readers engage a lot with photos, so we want to ensure that those elements of your article are the best that they can be.

The Easy Solution

Ensure the images you upload render as high resolution by previewing your articles on the Pages Manager App. To fix any images that don't meet this criteria, either replace these images or disable the 'tap to expand' feature by applying the 'non-interactive' tag.

Example

Here is an example of an article with low resolution header art that looks high resolution when viewed inline:

However the poor image quality shows when a reader taps the image and enters fullscreen mode:

For more tips on implementing images, including how to add likes, comments and shares, please read our best practice post.