Image files are one of three types of media files that can be uploaded to your page. The other media files include audio files and video files.

The website supports png, gif, jpg, and jpeg files with a maximum file size of 1 MB.

To add an image to your page, in the component tab toward the bottom of the page, select “Add Image”.

After you choose to add an image, you will have the option to “Add Media”. This is used both for files you have on your computer or another location you will need to upload to the site as well as files you have already saved to the website and can find with the media files on the site.

Screenshot of adding media options

Adding New Media

To add a file not yet saved to the website, select “Add Media”, click the “Browse” button, find the image on your computer and click “Open”.

Once you’ve uploaded the file you will have the option to give your image a name. Be sure to name your image a name you’ll remember or be able to search easily. Your file will be saved with all media files in the website, so you won’t have to upload your file again—you’ll just search the media file repository.

Alt Text

Next, you’ll need to give your image “Alternative text” or “Alt text”. Alt text is text that describes the image. Sometimes, web pages cannot load an image, or a visitor is using assistive technology (such as a screen reader) to read the website. Alt text is needed to describe the image in these cases and will show up instead of the photo. Alt text also helps search engines understand what an image is about.

Follow these tips when writing alt text:

  • Be accurate and equivalent in presenting what the image is.
  • Keep it brief and simple. Use the least amount of text needed to convey the image in an equivalent way.
  • Avoid redundancy. There is no need to include “image of” or “a picture of” or “this graphic shows”- just get right to the point and spend your writing time carefully communicating the message.

After you enter alt text, you’ll upload the image to your page by selecting “Create Media” then “Save”.

Adding Existing Media

To add a file already saved to the website, select “Add Media

Since you’ve uploaded your image to the website, it is saved with other uploaded media files.

After you select “Add Media” a window will open displaying all the image files saved to the website. You can browse for your image, or, if you remember the name of your image, you can use the search option to find the file.
 

The media library dialog with an image labelled "drum quilt" selected.

Once you locate your image, click on it so that it is highlighted. Other images will be grayed out. Click the “Insert selected” button.

Be sure to select “Save” at the bottom of your page.

Additional Options: Alignment, Caption, and Credit

You may give your image a caption, which will show underneath the image. However, this is not a required field. If you are using existing media that already has a caption, you may elect to hide it.

Additionally, you are given the option to align your image to the left, right, or none. By selecting align left or right, and given the image has space on the side, any text you add immediately after your image will wrap around the image.

Last, you may give your image credit, which will also show underneath the image. This is not a required field.

Screenshot of image options in Drupal 8

Your image will look like this on the website:

Single red flower floating on water.