Images

Tell your story through images

The image caption follows
This image has an aspect ratio of 3:2 and floats left.

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.

The image caption follows
1:1 image aspect ratio
The image caption follows
3:2 image aspect ratio
The image caption follows
2:1 image aspect ratio

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. Target file sizes are included in parenthesis.

Inline content images

One-third & one-halfTwo-thirds & Full
1:1768px : 768px (40kB)Too tall, don't use
3:2768px : 512px (40kB)1024px : 768px (75kB)
2:1768px : 384px (40kB)1024px : 768px (75kB)

Banner and parallax images

Top of Page BannerInline BannerParallax
3:2Too tall; don't useToo tall; don't use3072px : 2048px (225kB)
3:1Desktop: 1800px : 600px (150kB)
Mobile: 960px : 320px (60kB)
1800px : 600px (150kB)Too wide; don't use

Learn how to save images for the web 

Image example

Placeholder Image
Show/hide markup
<figure class="media image">
    <img src="https://placehold.it/768x512" alt="Placeholder Image" />
</figure>

Image with caption example

Placeholder Image
Duis aute irure dolor in repre henderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Joe Photographer for Indiana University
Show/hide markup
<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>

Apply IU style to any site

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 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 Eleanor Berman at IU Communications.