Important Hints:

• Images to be used on the SOP website should be optimized - smaller file sizes facilitate faster web page loading.
  Please use these guidelines:
  - Maximum image size: 500KB
  
  
• News story image dimensions are 1024px x 682px (72 dpi)
  
  
• All images should have alt text assigned to them to ensure that web content is accessible

If you need help optimizing images, please contact IIT for assistance.

Searching the Media Library

The image of the person / item you wish to use on your web page may already exist in the Media Library.  So before uploading a new image, do a quick search to see if the image you need is already available.

1. If you are in page edit mode, click on the "Add Media" button in the WYSIWYG editor.
   
   
   
2. The Media Library window will appear.  Type a term into the search field located in the upper right corner.
   
   
   Useful search terms include:
     - Division/Program name (pharmsci, ppd, sas, dppd)
     - "Portrait" (for images of students, faculty & staff that are sized for news stories feature images)
     - "Stock image" (brings up stock images of campus scenes)
     - "Student org"
   
   

Adding an image from the Media Library to a web page

1. Position the cursor in the area in the text editor where you want the image to be added.
2. Click on the "Add media" button. Select an image from the library by clicking on it.  Make sure the image has alt text (essential for visitors who use screen readers to easily navigate our website).  The alt text can be a short description of the image - helpful alt text tips available at https://it.wisc.edu/news/how-to-write-effective-alt-text-for-web-images/
   
   
   
   
3. Scroll down to the Attachment Display Settings area. Set the "Link To" field to None, and select a size option.  Thumbnail images are square (150px x 150px).  Other size options may vary depending on which website you are editing.
   
4. Hit the "Insert into page" button.
   
5. The image will be added to the page. 
   Click on it and choose a display mode (align left, align right, align center, no alignment).
   To resize the image, click and drag on a corner.
   
   
6. Save the page.

Uploading a New Image to the Media Library

1. Before adding new images to the Media Library, please make sure they are:
   - 500 kb in size or smaller
   - 8" x 8" at 72 dpi, maximum
   
   This will help to keep website page load speeds faster.
   
   
2. If you are in edit mode on the page you are editing, click on the "Add Media" button.
   
3. In the Media Library window, select the "Upload File" tab.
   
   Then drag the file(s) you wish to upload directly onto the window.  Or click on the "Select Files" button to navigate to the folder on your computer that contains the image.
   
   
4. Add any keywords to the title field that might help others find the image - for example:
   - the division (ppd, sas, pharmsci, etc.)
   - portrait
   - faculty / student / staff / student org
   
   
5. If you want a caption to appear under the image (in all instances), add some caption text.
   
6. Make sure the "Alt Text" field is filled out.  (This is a requirement to ensure our site is accessible.)
   
7. The "Description" field will display text when a visitor hovers over the image.  (We generally leave this blank.)