Images and Videos

Images are graphic files embedded into a web page, such as photos, diagrams, charts, or icons.  Image files should first be uploaded into the Images folder of a subsite and inserted as needed into the web page. Details for both uploading and inserting image files is provided below. 

Uploading an Image File

1. Find the image library you would like to upload your image to.
   
2. Either drage the image to the library or click new document.
   
3. Chose a file from your computer and click Ok
   
4. Fill out Name, Title, and Alt Text Field
   
5. Click Save
   

Inserting an Image File

1. While editing a page, click the Insert tab on the ribbon. 
   
   
2. Click the Picture icon.  
    
3. A menu of options displays.  Click to select the source of your image file:
   FromComputer:  this will upload and insert an image file from your local computer or connected network drive.   Use this option if you want to use a new image file that is not already stored on your Commonwealth agency website. 
   From Address:  this will insert an image from a specific web address but not upload the image file into SharePoint;  if the source file is removed or changes, it may cause the image to not display correctly (or at all).  
   FromSharePoint:  this will allow you to locate an existing image on your Commonwealth agency website and reuse it on your current page.  Use this option if you know the image already exists anywhere within your site.  
   
   
4. Once your image file has been selected, it will be inserted into the web page and the Image tab will appear on the ribbon.  
   
   

Change Image Properties

The Image tab will allow you to change properties about the image.   A few of the more commonly used settings are described below:

Address:  the URL of the image file, whether from within your Commonwealth agency website.

Alt Text:  a description of the image that a browser or screen reader will display.  Please note:  all image files should include Alt Text.  The description does not have to be very long (e.g., "PA Capitol Rotunda"), but should act as an accurate caption.  For more information on Alt Text, please see  Accessibility. This should be filled out in tandem with the Alt Text field in the Image properties.

Image Styles:  types of borders that can be applied around the edge of the inserted image.

Position:  the location of the image within the Content Editor Web Part.  This is useful for applying images with text that may wrap around the image. 

Horizontal / Vertical Size:  this controls the size of the image within the web page.  It will not change the original size of the image.  If you want to adjust the size of the image on the page, increase or decrease the Horizontal Size or Vertical Size fields.  Please note:  make sure that Lock Aspect Ratio is checked when adjusting image size, as it will keep the image in proportion and will not stretch the image in either direction.