
Copilot Studio inline Base64-encoded images

Context:
Displaying images in conversational AI interfaces like Microsoft Copilot Studio can be challenging due to system sanitization of HTML tags. While rich media enhances user experience, embedding images directly into messages often fails due to platform restrictions. Developers and makers need a reliable workaround to present visual content dynamically within chat flows.
Solution:
A clever method to display images in Copilot Studio is by using inline Base64-encoded images via the data URI scheme. This approach involves encoding the image into Base64 format, embedding it within an <img> tag, and assigning the tag to a variable. Instead of placing the tag directly in the Send message node (which gets sanitized), you store it in a variable as shown in the image. Then, assign this variable to the Send message node. This technique allows any image—charts, icons, screenshots—to be displayed as long as it’s Base64-encoded.
Impact:
This method unlocks a new level of visual interactivity in Copilot Studio, enabling makers to enrich conversations with dynamic imagery. Whether it's showing a product preview, a data visualization, or a user guide, this approach enhances clarity and engagement. It’s a simple yet powerful trick that expands the creative possibilities of Copilot Studio without compromising platform integrity