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 Chart
| Images | Size (w x h) | Retina Size (w x h) |
|---|---|---|
| Home Page Banner | 1000 x 700 | not supported |
| Home Page Feature | 310 x 195 | 610 x 390 |
| Program (slider and list) | 450 x 285 | 900 x 570 |
| Spark of Inspiration | 150 x 150 | 300 x 300 |
| Partner/Donor | 520 x 360 | |
| Podcast | 310 x 195 | 610 x 390 |
| Blog Post | 310 x 195 | 610 x 390 |
| News | 310 x 195 | 610 x 390 |
| Interior Banner Image (single) | 1920 x 390 | not supported |
| Interior Banner Image (set) | 800 x 600 | not supported |
| Right Column Callout | 280 x 185 | 560 x 370 |
| Mega Menu Callout | 280 x 185 | 560 x 370 |
| Billboard | 618 x | not supported |