The imagery we use inspires and informs our audiences and shows them how we’re shaping the future. Images can be used single images, image essays or slideshows. Refer to the following guidelines to maintain certain standards and consistency in images on your website.
Alt text
Alternative text (alt text) describes the image for those using assistive technologies or people who have turned off the images in their browser. Enter alt text for every image, except profile images and decorative images that add nothing to the text. Instead of adding complementary information as a caption might, alt text should describe the photo itself. Learn more about alternative text for images.
Caption: A campus you have to see to believe
Alt text: People walking through Indiana University’s Sample Gates
Aspect ratio
Aspect ratio is the relationship between the image's width and height. When cropping your photos, consider the context of the photo, the composition of the layout, and how well photos balance visually with the surrounding chunks.
We recommend picking one of the following image aspect ratios:
Deciding what size you want your image
Use the following charts when selecting and sizing your images in Photoshop. Image resolution should be set to 72 dpi.
| Aspect ratio | One-third & one-half size | Two-thirds & full size |
|---|---|---|
| 1:1 | 768 px x 768 px | Don't use |
| 3:2 | 768 px x 512 px | Don't use |
| 4:3 | Don't use | 1024 px x 768 px |
| 2:1 | 768 px x 384 px | 1024 px x 512 px |
| Aspect ratio | Parallax size |
|---|---|
| 3:2 | 3072 px x 2048 px |
| Aspect ratio | Non-Parallax size |
|---|---|
| 3:1 | 1800 px x 600 px |
| Type | Desktop | Tablet | Mobile |
|---|---|---|---|
| Image Banner | 1800 px x 600 px (3:1 aspect ratio) | 1200 px x 400 px (3:1 aspect ratio) | 768 px x 512 px (3:2 aspect ratio) |
| Text Overlay | 1800 px x 600 px (3:1 aspect ratio) | 1200 px x 400 px (3:1 aspect ratio) | 768 px x 512 px (3:2 aspect ratio) |
| Text + Image (50/50) | 1024 px x 512 px (2:1 aspect ratio) | 512 px x 768 px (2:3 aspect ratio) | 768 px x 512 px (3:2 aspect ratio) |
| Video | 1800 px x 600 px (3:1 aspect ratio) | N/A | 768 px x 512 px (3:2 aspect ratio) |
How to prepare images for multiple screen sizes and resolutions
Once you have your image cropped to the proper pixel dimensions and aspect ratio, follow these steps to compress and optimize your images.
STEP 1: Save image from Photoshop
- For CS5 & CS6 - Go to File > Save As.
- For CC - Go to File > Export... > Save for Web (Legacy)
- Make sure your file is properly named with no spaces, capitalization, or special characters. You may separate words with a hyphen, but don't use an underscore.
- For format, select WEBP.
STEP 2: Target File Size
- Using the chart above, determine your target file size.
- In the "Save for Web" dialog, use the "Optimize Menu" to input file size.
- Enter the "Desired file size."
- Use the "2-Up" viewer to review the results.
STEP 3: Optimize with Kraken.io
Kraken is a free online service that compresses images for the web.
- Go to Kraken.io.
- Upload your image for compression.
- Download the new compressed version.
STEP 4: Upload to the WCMS
If you're working within our content management system:
- Go to the proper subfolder in the images folder.
- Select ADD CONTENT > DEFAULT > FILE.
- Upload your file.
- Enter the alt text, which is attached to the image file. Select EDIT > METADATA and enter the alt text in the SUMMARY field. Learn how to write effective alt text in our accessibility guide.