Saving Images
- Images should be cropped to the appropriate size and saved for the Web as a 72dpi JPG, PNG, or GIF file.
- 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.
Naming Images and Using Alt Text
- For accessibility and search engine optimization, images must be named appropriately and contain valuable keywords.
- Images cannot include spaces or special characters and should be all lower case. Use a dash to divide words. For example “my-image.jpg.”
- It is imperative for search engine optimization and to meet accessibility guidelines, that every image to contain an appropriate Alternative Tag with meaningful text and rich keywords.
Image Sizes
Images throughout the site were designed to be a 2:3 (or 4:6) aspect ratio with a few exceptions (see sizing chart below). The idea size for these 2:3 images should be 768 x 512 (or 1536 x 1024 for high definition retina display support).
Image | Size (w x h) | High Resolution (w x h) |
---|---|---|
Standard Image (Highlights, Announcements, News Stories, Posts) | 2:3 ratio (768 x 512) | 2:3 ratio (1536 x 1024) |
Homepage Banner Background | 2100 x 675 | N/A |
Image Billboard | 1200 x 600 | 2400 x 1200 |