Animated GIF

Animated GIFs are defined using the standard HTML <figure> element, which wraps an <img> element that points to the GIF file. The <figure> element representing the animated GIF must be included standalone within the body of the article and not enclosed within a <p> element.

Note: A GIF must have a minimum height and width of 120px.


Name Description Definition


Descriptive text for your animated GIF. May also include attribution to the originator or creator of this GIF.

Add the Caption element to your <figure> element representing this animated GIF.


Species the geographic location for this animated GIF.

Add a <script> element with the class op-geotag within your <figure> element representing the animated GIF. The point can have a number of properties:

  • title: the name of the point's location
  • radius: the radius of the map boundary
  • pivot: a boolean value indicating whether the point is centered for the geotag view
  • style: the type of map style to use for this location. This property can be set to hybrid or satellite.


Defines the presentation style of the animated GIF.

Add the data-mode attribute to your <figure> element representing the animated GIF with one of the following values:

  • aspect-fit-only: animated GIF is rendered in aspect-fit layout; tapping maintains aspect-fit layout
  • non-interactive: animated GIF is rendered as provided; tap interactions are disabled

Source [required]

The source of the content for your animated GIF.

Add an <img> tag to your <figure> representing the animated GIF with the src attribute pointing to the URL of the GIF file. The Content-Type of the source URL must be an image/gif.


Basic animated GIF

The simplest representation of an animated GIF 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 animated GIF.

  <img src="" />

Animated GIF with caption

You can add a caption to your animated GIF by adding a <figcaption> element within the same <figure> element representing the animated GIF within your article.

  <img src="" />
  <figcaption>This animated GIF is amazing</figcaption>

Animated GIF with location

You can add location context to an animated GIF in your article by adding a JSON <script> with the op-geotag class attached within the <figure> representing the animated GIF. The content of the script must use the GeoJSON format to specify the location.

  <img src="" />
  <script type="application/json" class="op-geotag">  
      "type": "Feature",    
      "geometry": {      
        "type": "Point",
        "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ] 
      "properties": {
        "title": "Jessore, Bangladesh",
        "radius": 750000,
        "pivot": true,
        "style": "satellite",

Animated GIF with attribution

You can add attribution to your animated GIF to provide additional context to the original source of the animated GIF. Use a <cite> element within the <figcaption> element representing the animated GIF.

  <img src=""/>
    <h1>Animated GIF 1 Title</h1>
      Attribution Source