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
- In the
Select Picture dialog window, click on the
Browse to the location of your image file, click on the file name and select the
- 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)
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
- 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.
[ More info about image accessibility ]
Uploading images into the Images Library
Upload your images before using them for your web pages.
Creating image folders
Images of the same category should be organized in a separate folder created under the
- Open the
- Click on
Library Tools tab
- Name the new folder
- Open the new folder
- Click on "Add new item" link to upload images