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.
- If you are in page edit mode, click on the "Add Media" button in the WYSIWYG editor.
![image showing how to find the "Add Media" button in the WYSIWYG editor Screenshot: finding the Add Media button in the WYSIWYG editor](/images/group149/77762/add-media-button.png)
- The Media Library window will appear. Type a term into the search field located in the upper right corner.
![image showing the term search field in the Media Library Screenshot: using the term search field in the Media Library](/images/group149/77762/search-field_media-library.png)
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
- Position the cursor in the area in the text editor where you want the image to be added.
- 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/
![Screenshot: Adding alternative text to an image is essential for accessibility](/images/group149/77762/alt-text-wp-medialib.png)
- 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.
![Screenshot: selecting an image size before inserting it into the page.](/images/group149/77762/img_display_settings-wp-medialib.png)
- Hit the "Insert into page" button.
![Image of the "Insert into page" button in the Media Library Screenshot: using the Insert into Page button in the Media Library](/images/group149/77762/insert-into-page-button.png)
- 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.
![Clicking on the image allows you to select a display mode. Clicking and dragging on a corner will enable you to resize it. Screenshot: changing the display mode and resizing and image](/images/group149/77762/resize-position-image.png)
- Save the page.
Uploading a New Image to the Media Library
- 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.
- If you are in edit mode on the page you are editing, click on the "Add Media" button.
![image showing how to find the "Add Media" button in the WYSIWYG editor Screenshot: finding the "Add Media" button in the WYSIWYG editor](https://kb.wisc.edu/images/group149/77762/add-media-button.png)
- In the Media Library window, select the "Upload File" tab.
![Click on the Upload Files tab in the Media Library window. Screenshot: using the Upload Files tab in the Media Library window.](/images/group149/77762/upload-files.png)
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.
- 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
![Fill in the fields to make the attachment accessible. Screenshot: filling in the fields to make the attachment accessible.](/images/group149/77762/attachment-details.png)
- If you want a caption to appear under the image (in all instances), add some caption text.
- Make sure the "Alt Text" field is filled out. (This is a requirement to ensure our site is accessible.)
- The "Description" field will display text when a visitor hovers over the image. (We generally leave this blank.)