Images can be included in Instant Articles to illustrate the story for readers.

Images are specified using the standard HTML <figure> element, which wraps an <img> element and its associated annotations. The <figure> element representing the image must be included standalone within the body of the article and not enclosed within a <p> element.

The recommended resolution is 2048x2048 pixels. Images can be up to 8MB in size.


Name Description Definition


Any panoramic image will automatically render as a 360 photo.

If you'd like to disable your Instant Article from automatically rendering panoramic photos as 360, add the attribute data-fb-disable-360 in the <img> element .


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

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


Species the geographic location for this image.

Add a <script> element with the class op-geotag within your <figure> element representing the image. 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 image.

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

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

Note: These attributes do not work with 360 degree photos.

Source [required]

The URL link to the image resource.

Add an <img> tag with a src attribute pointing to either an absolute or relative URL. Relative URLs are relative to the domain of the canonical URL specified for your article.


Basic image

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.

  <img src="" />

360 Degree Image

If you'd like to disable your Instant Article from automatically rendering panoramic photos as 360, add the tag data-fb-disable-360.

  <img src="" data-fb-disable-360 />

Note: The aspect-fit, aspect-fit-only, fullscreen, and non-interactive data-mode attributes will not work with 360 videos.

Image with caption

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

  <img src="" />
  <figcaption>This image is amazing</figcaption>

Image with location

You can add location context to an image in your article by adding a JSON <script> with the op-geotag class attached within the <figure> representing the image. 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] 
      "properties": {
        "title": "Jessore, Bangladesh",
        "radius": 750000,
        "pivot": true,
        "style": "satellite",

Image with attribution

You can add attribution to your image to provide additional context to the original source of the image. Use a <cite> element within the <figcaption> element that defines the caption for the image.

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