Add images to articles: Modern Editor

Images, screenshots, and sample files can add examples and detail to your documentation. The process of adding files and images to articles differs a little between the Modern Editor and the Legacy Editor. Here, we walk through how to add images to your articles using the Modern Editor

To add images to your articles in Modern Editor:

1. Open the article in the editor.
2. In the editor control panel, select the Add Image icon (looks like a landscape), or use Ctrl + P:Add Image button
3. You can choose to upload a new image, add an image by URL, or add an existing image from your library.
4. To upload a new image:
   1. Click the icon with the arrow pointing up.
   2. You can drag and drop an image into this pop-up, or click the window to browse to an image for upload.
5. To add an image by URL:
   1. Click the chain links.
   2. Add the URL for the image into the URL field.
   3. Select Insert:

      Add from URL icon/pop-up

6. To add an existing image from your library:
   1. Click the folder icon: Add from Library icon
   2. This will open a pop-up where you can search for files, with the most recent images first. Select the image you'd like to upload, then select Insert File. Sample Add from Library pop-up
7. Once your image is inserted, you can click on it to open a set of controls that will let you change the style, add a caption or alt text, change the alignment, and more:
   Sample image controls
   
   1. Replace: Use the two-arrow icon to select this image for replacement, then use the controls to select or upload the image you'd like to replace it with.
   2. Align: Use these controls to select the alignment for the image. Options include left, right, and none (none typically centers it).
   3. Image Caption: Add a caption to your images, like we have displayed here in the blue bars under the images!
   4. Remove: Remove the image from your content completely.
   5. Insert Link: If you'd like your image to serve as a clickable hyperlink, such as for navigation, use this option to add the hyperlink and behavior.
   6. Display: Choose whether to display the option Inline (which will wrap text) or Break Text (which will put the image on a new line).
   7. Style: Select from several pre-built images styles. By default, all images are given the Responsive Image style to help the image resize on different screen sizes, but you can also choose Rounded (which will round the corners), Circular, and Thumbnail (adds a border).
   8. Alternative Text: Enter the text you'd like displayed if the image can't be loaded or that is used when a screen reader is being used. Refer to Add alternative text to images for more information on using this control.
   9. Change Size: Use these options to adjust the Width and Height by entering a number. You can also click and drag the corner control to resize.
8. Once you've finished inserting and tweaking your images, be sure to Save your edits!

Looking for more philosophical than practical guidance? Check out our Image best practices guide.