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 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.