Image building block

An image lets you add visual content to a guide step. Images help visitors quickly understand information by showing examples, highlighting features, or illustrating workflows.

You can use images to display product screenshots, add icons next to text, create visual headers, or include GIFs that demonstrate a workflow. Images can also be placed next to other building blocks, such as text or buttons, to create clear and organized guide layouts.

Supported image file types include JPEG, PNG, SVG, and GIF.

After you add an image to a guide step, you can:

• Adjust the image size and spacing. For more information, see Image size and spacing in this article.
• Add a column to place text, a button, or another image next to the image. For more information, see Image layout in this article.
• Add descriptive text for screen readers. For more information, see Image accessibility in this article.

For an overview of all the building blocks, see Guide building blocks overview.

Prerequisites

To add a building block to a guide, you must have permission to create or edit guides.

Add an image building block

You can add an image to a guide step using building blocks. To do this:

1. Go to Guides.
2. Open the guide you want to edit.
3. Select Edit in my app to open the Visual Design Studio.
4. Select View steps, then choose the step you want to edit.

5. Hover over the step you'd like to edit and select Edit step. If the step is blank, select Click to Add Content.

• To add a building block above or below an existing block, hover over the location where you want to add the block and select the Add Row plus (+) icon that appears. 
• To add a text, button, or image building block to the left or right of an existing building block, hover over the building block and select the Add Column plus (+) icon that appears. You can edit the width of building block columns.

6. Select Image from Add Building Block menu. 

Add an image

Once you've added an image building block, the Edit Image Block window allows you to add an image in one of the following ways:

• Select Click to upload image and then choose an image from your computer.
• Enter an Image URL for an image that's hosted elsewhere.

The maximum image size is 30 MB. For good loading times and guide performance, we recommend images that are under 5 MB.

Image layout

You can add a column next to an image in your guide, which allows you to:

• Have two images next to each other.
• Add text to the left or right of the image.
• Add a button to the left or right of the image.

To add a column next to an image in a guide step, hover over an existing image and select the blue plus (+) icon to the left or right of the image. Choose one of the available building blocks and edit it as needed.

Image size and spacing

When you add an image, you can set its size as a percentage relative to the guide container size or based on the image's original resolution:

• To change the relative size of the image, edit the percentage under Fill. The default is 100%.
• To set the image to match the image’s resolution, use the toggle to turn on Actual Image Size.

You can also edit the top, right, bottom, and left margins independently to add and remove space between the image and the image building block. The more space you add to the left and right margins, the smaller the image gets.

Image accessibility

Enter descriptive text in Image Alt Text to provide an accessible name for the image so screen readers can describe it to visitors.