Images

When editing pages using Alt Text Editor, adding images using markdown, for simple use cases, uses the same syntax as demonstrated in the CommonMark spec examples. That is, they look like this:

![](http://yoursite.com/logo.png)

Outside of the world of Confluence, in the cases where markdown is used to render HTML, the label portion of a link (the text between the brackets []) is typically used to specify the alt text for the image.

Alt Text Editor uses the label for this as well as other Confluence-specifc image attributes.

Additionally, as images are close cousins to links, they share the same special syntax for pointing at the image location if that location is hosted on your Confluence site.

Examples

A standard markdown image, using a standard URL

![](http://yoursite.com/logo.png)
<ac:image>
  <ri:url ri:value="http://yoursite.com/logo.png" />
</ac:image>

An image represented by a file 'logo.gif' which is attached to the current page. It uses a Confluence-specific URI for files

![](file://logo.gif)
<ac:image>
  <ri:attachment ri:filename="logo.gif" />
</ac:image>

Version 2 of the image named 'logo.png', which is attached to the 'home' page in the 'images' space.

The image will be aligned center and with various size attributes set.

This image also has the alt text "the logo" specified. Note that the quotes are only needed because the alt text has spaces.

![align=center alt="the logo" layout=center original-height=30 original-width=30 width=100](file://logo.png?page=home&space=images&v=2)
<ac:image>
  <ri:attachment ri:filename="logo.gif" />
</ac:image>

Images are often wrapped by links. This example wraps the above in a link to another page in the same space named 'guide'.

[![align=center alt="the logo" layout=center original-height=30 original-width=30 width=100](file://logo.png?page=home&space=images&v=2)](page://guide)
<p><ac:link>
    <ri:page ri:content-title="guide" />
    <ac:link-body>
      <ac:image ac:align="center" ac:alt="the logo" ac:layout="center" ac:original-height="30" ac:original-width="30" ac:width="100">
        <ri:attachment ri:filename="logo.png" ri:version-at-save="2">
          <ri:page ri:content-title="home" ri:space-key="images" />
        </ri:attachment>
      </ac:image>
    </ac:link-body>
  </ac:link>
</p>