Step 9: Add Photos and/or Graphics with Alt-text

Let's now take some time to incorporate a few images into your site. To be honest, working with images in Google Sites is tricky. The interface restricts the size of the image based upon other elements in the section. This is something you will get used to, but it may be a little tricky as you get started. 

First, take some time to search for an image you'd like to include. If you incorporate images of people, be sure to look for images that show people from different races, ethnicities, gender to ensure your students feel represented in the content of your site. Start your search by going to an image repository that shares images with an open license (which means you may re-use them with attribution but without permission). Here are a few options to explore:

Unsplash.com - If you download an image, you will be given the opportunity to "copy" the attribution line for the image. Include that attribution at the bottom of your page that contains the image.

Nappy.co Links to an external site. - Free, high-resolution images of Black and brown people. To attribute an image used from this site, use this template: Photo by @username from nappy.co Links to an external site. (replace @username with the photographer’s username found on the photo page).

The Gender Spectrum Collection -  Links to an external site.Images of trans and non-binary models.  These images may be used without permission, provided you do not use them for commercial purposes and do not modify them. In your attribution line, include "Image provided by The Gender Spectrum Collection, CC-BY-NC-ND."

Follow the steps below:

  1. Download the image to your computer that you'd like to include on your site.
    • Images that are in a horizontal (or landscape) layout will usually work better on your site. If the image is not shared with a Non-Derivative license, you may crop the image in a separate program (like Preview on a Mac) before you upload it. 
  2. Navigate to the page and section where you'd like to include the image. 
  3. Make a spot for the image by adjusting the width of the text box that is currently in that section.
    • Click in the textbox.
    • Click and drag the blue dot on the left or right edge of the textbox until there is ample room for your image.
  4. Double-click in the blank spot where you want your image to be inserted.
  5. In the right column, select the Insert panel.
    • Choose Images
    • Choose Upload
  6. Browse for the image on your computer and select it.
  7. The image will appear on your page. And it may not appear where you wanted it to! 
  8. If you need to relocate the image, simply click and hold your mouse and drag/drop the image into a different location.
  9. To make the image smaller,
    • Click on the image to make the blue dots appear around the edges. 
    • Click and drag a corner to make the image smaller without distorting its dimensions.
  10. Great! You've got your image in place. Now let's make sure it is accessible. Remember, if you add an image that conveys meaning to a viewer, we must include alt-text to ensure it can be accessed by users who are blind. To do so, we add alt-text (short for alternative text) to the image.
    • Click on the image
    • Select the 3 dots at the top
    • Select Add alt text
  11. Add your alt-text. Here's a tip. Do not start your description with "Image of..." or "Photo of.." A screenreader includes that information so adding it is just redundant. Describe what you see as if you are describing it to a person who cannot see it. For example, "A Black student working on a written assignment near a laptop with headphones on."
    1. Note: If the image you are adding is decorative (which can be a tricky decision to make), you may select the box, "This is a decorative image." If that box is selected, a screen reader would skip right past the image.
  12. Add the attribution to the Caption line. Following the attribution guidance from the image site, add a caption below the image. 
    • Select the image
    • Choose the 3 dots at the top
    • Select Add caption
    • Type the caption into the field that appears below the image.
    • You may adjust the text to be centered or keep it left aligned -- your choice!
      Google Site showing an image inserted to the right of a text box with a caption below it that provides attribution to the creator.
  13. Repeat these steps to add one more image to your site.
  14. Alternatively, Canva.com is a great, free graphic design tool that will allow you to create graphics (non-photographic images) for your site. You might want to add that to your list to check out later.

Check your progress

View this 2-minute video to check your progress with this step.