Images

Images should be high-quality visuals that enhance and elucidate the text content on the page.

For accessibility reasons, images of stylized text (decorative banner headers, word art, etc) are not permitted, except in rare cases as required by accrediting bodies. In those instances, we will make the required images as accessible as possible using alt text, captions, and /or links to disability resources.

Selecting & Saving Images

Saving Images

• Images should be cropped to the appropriate size and saved for the web as a 72dpi JPG, PNG, or GIF file.
• Follow the Image Size guidelines to crop images for specific components.
• As often as possible, supply images at the suggested High DPI size. These images are served on devices with very high pixel densities or resolutions, such as mobile devices (termed "Retina Display" by Apple) or 4K screens. These sizes are typically double the resolution of the standard format. Images saved at the traditional resolution may appear fuzzy or less crisp on these devices.
• To optimize photos for web, in Photoshop choose to Save for Web, and save the image as a JPG Quality High (60).
• Images that are scaled on the page, rather than inserted at the correct size, will increase load time and may stretch out of proportion.
• JPGs are best for photography. PNG is best for images that contain both photography and typography or geometric shapes. PNGs and GIFs can be used where images need transparent backgrounds.

Naming Images and Using Alt Text

• For accessibility and search engine optimization, images must be named appropriately and contain valuable keywords, including the name of the school.
• Images names cannot include spaces or special characters and should be all lower case. Use a dash to divide words. For example “program-science-desales.jpg” or in the case of a person’s profile “profile-name-desales.jpg”
• It is imperative for search engine optimization and to meet accessibility guidelines, that images contain an appropriate Alternative Tag (ALT) with meaningful text and rich keywords. (It is not necessary to place ALT tags on images that are used only for visual decoration.)
• Reference the Content Guidelines for writing appropriate ALT text.

Image Sizes

* – sizes marked with an asterisk are flexible IN HEIGHT. The recommended height is listed.