Skip to main content
Site Builder
Indiana University
Content Components

Image

Show a single image or set of related images

Included on:

Content Strategy

Photography best practices

Visit the IU Brand website for guidance on choosing effective images to pair with your page's text content.

Overview

The Image component lets you display either a single image or a set of related images (an "image hub"). It supports captions, attribution, and optimized image sizes for different screen resolutions.

Common uses

  • Break up text with engaging visuals
  • Display a feature image alongside content
  • Showcase a set of related images (e.g., event highlights, project work)
  • Add photography or illustrations that support the page’s tone and topic

Component example

  View in new window

Component fields

Element name Required Multiple
Image type Choose Single image or Image hub.
Yes No
Single image Group containing fields for the Single image option.
Yes No
Large image Image for larger screens (laptop or desktop). 1260×630.
Yes No
Small image Image for mobile devices. 740×370.
Yes No
Alt text Alternative text for accessibility.
Yes No
Image hub Group containing fields for the Image hub option.
Yes No
Image hub teaser Optional. Introductory text above the image hub. Supports bold, italics, links, and line breaks.
No No
Large image orientation Orientation for the large image. Choose Horizontal or Vertical.
Yes No
Horizontal image placement Choose Top or Bottom when the large image is horizontal.
Yes No
Vertical image placement Choose Left or Right when the large image is vertical.
Yes No
Large image Large image for the hub. 1260×630 (horizontal layouts) or 630×1260 (vertical layouts).
Yes No
Large image alt text Alternative text for the large image.
Yes No
Small image (×2) Two smaller images. 630×630 each.
Yes No
Small image alt text (×2) Alternative text for each small image.
Yes No
Caption Optional. Caption beneath the image or image hub.
No No
Attribution Optional. Credit line for the photographer or source.
No No

Accessibility

  • Give each image descriptive alt text
    Alt text should describe the image’s content and purpose. See the IU Knowledge Base for guidance on writing effective alt text.
  • Avoid putting text in images
    Text inside images cannot be read by assistive technologies and may not meet contrast requirements.
  • Avoid redundant captions
    Don’t duplicate alt text in captions. Use captions to provide additional context or attribution instead.

Do

  • Use images to enhance your content and break up text
  • Choose images that fit the tone and topic of the page
  • Use resources like IU Visuals or Adobe Stock to find images
  • Resize and compress images before uploading them to help pages load quickly

Don't

  • Upload images larger than 100 KB—large files slow down page load
  • Overuse images—too many diminish impact and hurt performance
  • Upload images you don’t have rights to—only use approved sources such as IU Visuals, Adobe Stock, or your own work

Related content

  • Choosing Components

  • Learn to Use Site Builder