Inserting and Uploading Images

Images used for your web pages need to be upload to the Images Library. You cannot copy an image from a web page or a document and paste it into your page content.

  • Place your cursor inside the Page Content area and then click on the Insert tab on the ribbon.
  • Click on the arrow under the Picture icon, and select From Computer.


  • In the Select Picture dialog window, click on the Browse button.
    Browse to the location of your image file, click on the file name and select the Open button. 
  • On the Select Picture dialog window, ensure that Images is selected in the "Upload to" field. This will ensure that your image file is uploaded into your Images Library. Click on the OK button to upload and save the image.

The image properties dialog window will open.
Image properties are optional. If you don't need any change, click Cancel to close the window.

With the image is selected, the Picture Tools are displayed on the ribbon. Select its position, add Alt Text and edit other properties if needed.

The image is now appropriately placed on the page and contains alt text as required for accessibility compliance (Read more about alt text below this part).

 

Image placement requirements:

  • You must use one of the 3 following file formats:
    • JPG - for photos
    • GIF - for graphics with solid colors
    • PNG - graphics with solid colors or with a transparent background (e.g. logo, buttons, saved from vector graphics)
  • Your image must be sized
    Avoid using big images for page content because this will slow down the page loading time. Less than 100KB file size is more preferable.
    If you use Photoshop or another image editor software, select the "Save for Web..." option to optimize your images for web use.
  • Images must be uploaded to Images Library
  • Insert  image to the page
  • Position as needed (float left/right)
  • Add Alt text

More About Alt Text…

To comply with Web accessibility standards when placing images and graphics on pages, always remember to alternative text “alt text” for every image placed on a web page.
Here are some general guidelines on the use of alt text:

  • If the image conveys information, or conveys text, then the alt text should convey the same information.
  • If the purpose of the image/graphic is to provide "eye candy" (i.e. visually setting a mood) then alt text should be blank (alt="").
  • If the image is redundant or conveys no information, the alt text should be blank (alt="").
  • If the image is an active link, the alt text should be the function of the image (i.e. what the target of the link is).
  • In all instances of Alt Text, avoid entering “picture of…” or “image of…” or “link to…” etc. as screen reading software already informs the user of this when they encounter an image or link.
  • When images of tables or graphs are placed on page, in addition to alt text, a complete description of the information contained on the table or graph should follow the image.

Uploading images into the Images Library

Upload your images before using them for your web pages.

  • Select Site Contents from the Site Actions dropdown
  • Open the Images Library


  • Click on Upload Document from FILES tab


  • Click on the Browse button to browse to a single image file to upload, or select “Upload Multiple Files…” to upload multiple files in one time


     

    Note: Currently, only Internet Explorer (IE) browser supports multiple files uploading.

Creating image folders

Images of the same category should be organized in a separate folder created under the Images Library.

  • Open the Images Library
  • Click on Documents under Library Tools tab


     
  • Select New Folder
  • Name the new folder
  • Open the new folder
  • Click on "Add new item" link to upload images