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.

Inline content images

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

Midpage parallax

Parallax
3:23072px : 2048px

Banner images

DesktopTabletMobile
Image Banner1800px : 600px (3:1 aspect ratio)1024px : 768px (3:2 aspect ratio)768px : 512px (3:2 aspect ratio)
Text Overlay1800px : 600px (3:1 aspect ratio)1024px : 768px (3:2 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)
Video1800px : 600px (3:1 aspect ratio)N/A768px : 512px (3:2 aspect ratio)
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.