Layout & Component Blocks

Image

Overview

The image component is an element that allows you to display an image or graphic. It plays a critical role in enhancing aesthetics, conveying information, and improving engagement. 

Note: most components have minimum and maximum image size requirements, and they also crop image depending on each component’s design. The Image component displays the full image that you upload. 

When to Use

Use when you need to display one standalone image. 

How To

How To

Create an Image Component

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page.
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the Image component from the component list.

Add an Image

  1. Click Add Media button to add an image from the media library or to upload a new image.
  2. Caption: Add any relevant information to the caption to help describe the image.
  3. Click Save to save the image.
Screenshot showcasing the Image editor and the button to upload an image and add a caption

Image Options

The image component accepts two types of images: 

  • Component Image: Image Variable: this is where to upload jpg and png images.
  • SVG: this setting will typically be reserved for icons or other SVG images.
Screenshot of image editor and upload areas: images and svgs

User Experience Best Practices

  • Prioritize Image Quality. Use images that are sharp on all devices and avoid pixelation or stretched images.
  • Optimize for Performance. Ensure images file sizes are optimized for performance. We recommend hero images be around 300KB and on-page/smaller images are around 100KB.  
  • Add descriptive alt text. Ensure alt text that accurately describes the image to screen reader users.
  • Avoid putting important text inside images. Screen readers can’t read text in images. If text is necessary, provide clear and descriptive alt text that conveys the same message. 

Related Components

If you need to use multiple images in a structured layout consider using one of the following components:

  • 50/50: Great pre-built layout to showcase an image with text and optional buttons
  • Carousel: Works as a slideshow
  • Grid Layout: Need to display a gallery? Try using a grid layout component.
  • Featured Cards: Featured cards are a great way to highlight images as tiles linking to relevant content
  • Spotlights: Uses an image to the left and text with accordions on the right