Skip to main content
Sign In

University Web Services (UWS)

University Web Services, University of Colorado Denver

 

 
 
 

Insert an Image

SharePoint 2010 Page Concepts


You can insert images into several different locations on the pages of your web site. Different templates and page layouts use different size pictures; there are style guides available to help you determine what size pictures go in which places.

To insert an image in the content of your web site:

  1. Navigate to the page where you want to insert the image
  2. In the Page tab, Edit group, click Edit
  3. Place your cursor at the location in which you want to insert an image
  4. In the Editing Tools, Insert tab, click the drop-down arrow below Picture

    Inserting an image 

  5. From the Picture menu, select one of the following:
      a. From Computer to upload and insert a picture from your computer
          Go to step 6 to insert a picture From Computer

      b. From Address to link to an image on an external web site
          Go to step 11 to insert a picture From Address

      c. From SharePoint to browse to an existing image in the SharePoint site files.
          Go to step 13 to insert a picture From SharePoint


  6. When From Computer is clicked, the Select Picture opens. Click Browse to locate the image you want to insert.

    The Choose File to Upload window opens

  7. Click on the picture you want to insert, and then click Open
  8. In the Upload to field, click the drop-down arrow and then click Images
    Uploading from computer
  9. Click OK

    The Documents window opens

  10. Type a title for the image in the Title field, and then click Save. The title can be the same as the Name

    The image is inserted on the page in the location of your cursor

    Go to step 15


  11. When From Address is clicked, the Select Picture window opens. Type or copy and paste the web address of the external image into the Address field.

  12. In the Alternative text field, type a short description of the image

    NOTE: Adding text in the Alternative text field not only enable SharePoint to display pop-up text when users hover over your image, but it is also essential to describe the image to users with disabilities. Make it a habit to fill out the Alternative text field for every image you insert.

    The image is inserted on the page in the location of your cursor

    Go to step 17


  13. When From SharePoint is clicked, the Select an Asset window opens. Navigate to the file location for the image you want to insert.

    You can select an image from your own site images folder (if you have images specific to your site), or you can use the university's image library. The university's image library is in a folder named Site Collection Images, and can be found in the windows folder view of the Select an Asset window.

    Collections_folder.png 

    Images are organized by size in the Site Collection Images folder. You can determine which size image you need by referring to the style guide for your school or department, if available.

  14. Click on the picture you want to insert, and then click OK

    The image is inserted on the page in the location of your cursor


  15. Put your cursor on the inserted picture to enable the Picture Tools tab

  16. In the Properties group, Alt Text field, type a short description of the image

    NOTE: Adding text in the Alternative Text field is intended to describe the picture to the blind; it is essential to enable users with disabilities to understand the image on your page. Make it a habit to fill out the Alternative Text field for every image you insert.

  17. In Picture Tools, Design tab, click the drop-down arrow under Image Styles, and then click Float Left or Float Right to move your image left or right.

    TIPS: You can make small adjustments to the size of your image by dragging the boxes that appear at the corners of your image. Use this functionality with caution, however, because the more you adjust the size of an image by dragging, the less clear it becomes.

    If you create images in a graphics software application outside SharePoint, like Adobe Photoshop, Fireworks, SnagIt, follow the style guide for your web pages and crop the image to the correct pixel size for the image container on the respective page layout.

    You can also adjust the location of your image by dragging and dropping it to a different location on the page

  18. In the Page tab, Edit group, click Check In to create a permanent version of your changes.

University of Colorado Denver

© The Regents of the University of Colorado, a body corporate. All rights reserved.

All trademarks are registered property of the University. Used by permission only.