Images

Tell your story through images

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.

1:1 image aspect ratio
3:2 image aspect ratio
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
Aspect ratioOne-third & one-halfTwo-thirds & Full
1:1768px : 768pxDon't use
3:2768px : 512pxDon't use
4:3Don't use1024px : 768px
2:1768px : 384px1024px : 512px
Midpage parallax image
Aspect ratioParallax
3:23072px : 2048px
Midpage non-parallax image
Aspect ratioNon-parallax
3:11800px : 600px
Banner images
TypeDesktopTabletMobile
Image Banner1800px : 600px (3:1 aspect ratio)1200px : 400px (3:1 aspect ratio)768px : 512px (3:2 aspect ratio)
Text Overlay1800px : 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)
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 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.