Selecting & Saving Images
Selecting Images
- Images should be good quality at their largest size. Smaller images should not be scaled up as they will reduce in quality and become pixelated.
- The subject matter of the image should be consistent with the brand and resonate with your audience.
- When using stock photography, be selective about the images used as audiences can distinguish between images that look staged and unnatural and those that look more authentic. Opt for images that look more candid and contain real people.
- Be consistent when selecting images to create a more cohesive, well-branded look on your site. Choose images with similar cropping, color tones, quality and photography or illustration styles.
- Images should not contain text as this information is not accessible for users with visual impairments and can add to a more cluttered appearance.
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 & 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-morning.jpg” or in the case of a person’s profile “profile-name.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
| Type | Size (W x H) | High DPI | Notes |
|---|---|---|---|
| Page Banner | 1920 x 1080 | N/A | Page banners are intended as decoration and should avoid specific subject material as portions of the image may be cut off based on screen resolution. |
| Song | 540 x 540 | 1080 x 1080 | |
| Posts & Events * | 960 x 540* | 1920 x 1080 | Images used in the featured row and on listings will be cropped to a square, edges of the image may be cut off |
| Featured Grid | 540 x 540 | 1080 x 1080 | |
| Footer Badges | 100 x 100 | 200 x 200 | |
| Footer Ministries* | 80 x 50 | 160 x 100 | |
| Square Ads | 540 x 540 | 1080 x 1080 | Ads in sides bars will appear at 300 x 300 while those used in the featured row will display at least 500 x 500 |
| Horizontal Ads | 728 x 90 | Horizontal Ads are used for event sponsors. | |
| DJs & Shows | 300 x 300 | 600 x 600 | |
| Business Impact Partners | 225 x 225 | 450 x 450 |
* – sizes marked with an asterisk are flexible IN HEIGHT. The recommended height is listed.