How do I insert an image into my article?

On this page:

Context

• The Knowledge Base and its help system
• MIT community members set up to author articles directly

Answer

You need to attach an image to an article before inserting it. You can attach multiple images at a time from the attach screen or a single image at a time when editing the article from the Insert Image screen. Note that when creating a new article, the Attach link does not display until you click Save the first time.

Supported file formats are gif, jpeg and png. Also, do not use an underscore, _, in your file name as Confluence considers that a special character and will not process your image properly.

Attach images from the attach screen:

1. Navigate to the article.
2. Click on the Attach link in the upper right.

   If you are in edit mode, be sure to save first or you could lose your work.

   Result: The attach screen is displayed.
   

3. Drag and drop files into the square at the right or click the Choose File button to locate the image on your computer.
4. Click on the Attach button.
   Result: The image is attached to the article.

Insert an image into an article.

1. Navigate to the article and click edit then select edit this article.
2. From the editing screen, put your cursor in the location you'd like the image to display.
3. Click the insert image icon.
   
   Result: The Insert Image window pops up.
   
4. The Insert Image window will display available image files already attached to the article. You can also attach more images by clicking the Choose File button.
5. Click on the image you want to insert, and then click Insert.

Result: The code for displaying the image is inserted into your article. Be sure to save your article or the edits could be lost. The code looks something like this:

!image.gif!

1. Add alt text to your image. This is important for accessibility reasons as screen readers and other accessibility devices rely on alt text to understand images. Edit the wiki markup created in the last step to add a title that will serve as alt text.

   !image.gif|alt=image descriptive text goes here!
   

For more information on adding alt text to your images, see: How do I add alt text to images?

Image re-sizing

If the image is too large, you can re-size it before uploading it or edit the wiki markup to display the image at a smaller size.

Original image:

Wiki Markup to make the image display with a width of 100 pixels:

!hermes-logo-header.png|alt=Hermes Logo, width="100"!

Resulting displayed image:

Additional information

• How do I become a contributor to the knowledge base?
• How do I create an article?