Images are an important part of every site we build. We use single images and slideshows. Each type allows for image, caption, and attribution.
The right visuals can take your website from ordinary to outstanding. While it takes time and resources to find appropriate, high-quality photos to support your content, the results speak for themselves.
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:
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 | Two-thirds & Full |
|---|---|---|
| 1:1 | 768px : 768px | Don't use |
| 3:2 | 768px : 512px | Don't use |
| 4:3 | Don't use | 1024px : 768px |
| 2:1 | 768px : 384px | 1024px : 512px |
| Aspect ratio | Parallax |
|---|---|
| 3:2 | 3072px : 2048px |
| Aspect ratio | Non-parallax |
|---|---|
| 3:1 | 1800px : 600px |
| Type | Desktop | Tablet | Mobile |
|---|---|---|---|
| Image Banner | 1800px : 600px (3:1 aspect ratio) | 1200px : 400px (3:1 aspect ratio) | 768px : 512px (3:2 aspect ratio) |
| Text Overlay | 1800px : 600px (3:1 aspect ratio) | 1200px : 400px (3:1 aspect ratio) | 768px : 512px (3:2 aspect ratio) |
| Text + Image (50/50) | 1024px : 512px (2:1 aspect ratio) | 512px : 768px (2:3 aspect ratio) | 768px : 512px (3:2 aspect ratio) |
| Video | 1800px : 600px (3:1 aspect ratio) | N/A | 768px : 512px (3:2 aspect ratio) |
<figure class="media image">
<img src="https://placehold.it/768x512" alt="Placeholder Image" />
</figure><figure class="media image">
<img src="https://placehold.it/768x512" alt="Placeholder Image" />
<figcaption>
<span class="caption-text">Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
<span class="caption-credit">Joe Photographer for Indiana University</span>
</figcaption>
</figure>You can use our style and code snippets to improve any website in any content management system. Or you can request a copy of the IU Web Framework, a self-service tool that lets developers build a site in the WCMS.
If you would like to learn more about how we can help you build your website in the Web Framework, contact our Creative & Web Studio.