Image Placeholder - Usage

Basic Guidelines

The Image-Placeholder is used to reserve space for media content within a layout or component, with a set aspect ratio. It can be used as a quick and easy way to insert an image into a page design without the need to find a specific image.

Replacing the placeholder with an image

Select the Image-Placeholder component and click on the Image in the Fill section of the properties panel.Tip: Hold CMD when selecting the Image-Placeholder. This it will take you straight to its frame, even if it’s nested in another component.

Click on ‘Upload from computer’ to choose an image to replace the placeholder.

Best Practice for Alt text

Alt Text (short for Alternative Text) is a short written description of an image, which explains the content of that image when it can't be viewed for some reason. It’s worth remembering that this is not only relevant for users using screen readers, but also in situations where the user’s internet connection is too poor to pull through images.

Alt text can contain an empty string (no words), however the alt tag itself should never be entirely omitted. If the image imparts or illustrates important information for the user then alt text is appropriate, however, if the image simply adds visual interest to a page then an empty alt attribute is more appropriate.

Alt text should never contain the descriptors "photo of", "picture of" etc. Screen readers will already inform the user that this is an image since the element is an <img> tag.

Avoid having any text as part of an image. If this cannot be avoided, make sure the alt text reflects the exact content on the image.

Some screen readers may cut-off alt text at around 125 characters, so it’s best to try and stick within that limit.

Be specific and succinct by describing the content of the image without editorialising. Avoid making assumptions about what’s happening in the photo. Think how you’d briefly describe the image over the phone.

Alt text — NoneNo alt text is needed as the graphic is purely illustrative.

Alt text — Illustration of a pig money boxThe text doesn’t provide any additional value to the user and thus isn’t needed.

Alt text — Choose customer service Gold 2022.When there is text within an image, the alt text should reflect the exact content.

Alt text — AwardThis provides no additional context to the user and doesn’t improve their experience.