Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

How to Add an Image to a Page

In this exercise you will learn how to insert an image into your web page.

Online Training Instructions

  1. Your should still be logged into the web-training website. For this module you will be editing the web page you worked on earlier.
  2. Expand the classroom folder, find your web page, select it and click edit.
  3. Make sure you are editing the draft version and not the current version. (See step 4 note in the example provided below)
  4. Go to the Main Content Section and in the Cascade editor, place your cursor in front of the line of text that reads: <<<<<Insert your new image here, use the 585 size. This line of text is located beneath the 'My Uploaded Image' heading.
  5. Follow steps 6-18 in the example provided below. Be sure to insert the image that is 585 pixels wide.
  6. Click 'Update Draft' do not click on 'Send to Workflow'
  7. Once you've completed your edits, return to the instructions and click on the link 'Continue Online Editing - Create a Link to a Document' located at the end of the instructions web page.


  • Website content owner has identified you as a web content editor to the webteam
  • Faculty/Staff Network ID - obtain from Division of Information Technology
  • For Cascade Online training:
    • Access to the web-training website
    • Know how to login to a specific webpage
    • Familiar with Cascade interface
  1. Log in to Cascade.
  2. Go to your website, if you’re not there.
  1. In the left pane, click on the web page that you want to add an image to.
visual representation of step 3, choosing the page to add an image to
  1. Click on the ‘Edit’ tab.
    Be sure that you are editing the 'draft' version of your web page.

visual representation of step 4, click edit tab on top menu


Be sure to select draft

  1. Insert your mouse pointer in the section of the editor where you want to add your image.
  2. On the toolbar, look for the icon that looks like a tree.
  3. Hover your mouse over the ‘tree’ icon and make sure it is labeled ‘Insert/Edit Image’.
  4. Click on the ‘Insert/Edit Image’ option.
visual representation of steps 5 and 6, using the add image icon
  1. Make sure the ‘internal’ radio button is selected.
  2. Directly beneath the radio button is the ‘Choose File/Image’ option.
  3. Click [Search] and select ‘Browse’.
visual representation of steps 9 and 11, locating the image to add
  1. In the ‘Choose a File’ dialog box, expand the ‘_uploads’ folder in the left pane.
  2. Expand the images folder and find the image you want to insert into your webpage.
  3. Click on the image.
  4. Then click the ‘confirm’ button.
visual representation of steps 12-15, locating the image
  1. Add the appropriate alternate text* OR check the ‘This is a decorative image’ option.
    * Every time you insert an image in a web page, you should ask yourself this question: What is the function is this image adding to this web page? If it is to make the page 'pretty', you should check 'This is a decorative image'. If the image helps expand the content of the web page, then use the alternative text to let disabled users know what that function is for the web page. To learn more, visit our alternative text webpage.
  2. Click the ‘Insert’ button.

visual representation of steps 16 and 17, adding alt text and inserting the image
  1. You should now see you image inserted into you web page.
  2. Once all edits and updates have been made, select 'Send to Workflow' or 'Update Draft'.
visual representation of step 18, image added to page

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top