Question About Image Size in Adaptive Cards

Question

I have a question regarding the image sizes that can be inserted into an Adaptive Card.

Currently, I am developing a feature that allows a Teams bot to post Adaptive Cards.

I would like to insert an image into the Adaptive Card. However, the url property of the image element only accepts publicly accessible URLs. Due to security concerns, I cannot make the intended image publicly available. Therefore, I am considering using a data URI to insert the image. If there is a better approach, I would appreciate any suggestions.

Regarding data URIs, I have come across multiple comments mentioning size limitations, but I have not been able to find an official explanation. If an official source exists, could you please provide the relevant link?

If there is no official documentation, I would appreciate answers to the following questions:

• What is the maximum image size that can be inserted?
• Does the size limitation apply to the original image size or the encoded data URI size?
• If multiple images are inserted into a single Adaptive Card, does the size limitation apply per image or per Adaptive Card?
• If an image fails to display due to size restrictions, what happens to the Adaptive Card? Will nothing be displayed? Will only the image be missing? Will the alt text be displayed?

Answer 1

石川 敦己 -

1. The maximum allowed size for an Adaptive Card in Microsoft Teams is generally 28KB, which includes text, images, links, etc. This limit applies to the entire card.
2. The size limitation applies to the encoded data URI size, not the original image size.
3. The size limitation applies to the entire Adaptive Card, not per image. Therefore, if you insert multiple images, their combined size must not exceed the limit.
4. If an image fails to display due to size restrictions, the Adaptive Card will still be displayed, but the image will be missing. The alt text will be displayed if it is provided.

Thanks,

Meghana Peddamma

---

If the response is helpful, please click "Accept Answer" and upvote it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.