GIF support in images

Release
Renderer status
Tasks status
1.3
🔄 .NET (#2874)🔄 Android (#2875)🔄 iOS (#2876)✔️ TS (#2877)✔️ UWP (#2878)
✔️ Shared (#2872)✔️ Designer (#2873)

Solves requests

• GIFs not supported on Android (#2863)

Summary

GIFs are supported on UWP and HTML, but not on Android or WPF (and potentially not on iOS/ReactNative). This feature would add GIF support universally to all images.

Schema

All locations in Adaptive Cards that accept images should support GIFs...

• Image.url (including when in Person style)

• container/column/etc backgroundImage (including when using repeat options)

• Action.IconUrl

Example

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "GIF in Image element",
            "wrap": true
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://blog.podium.com/wp-content/uploads/2017/07/GIFSBlog_Header.gif",
                            "altText": ""
                        }
                    ],
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "items": [
                        {
                            "type": "Image",
                            "style": "Person",
                            "url": "https://blog.podium.com/wp-content/uploads/2017/07/GIFSBlog_Header.gif",
                            "altText": ""
                        }
                    ],
                    "width": "stretch"
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "GIF in ImageSet",
            "size": "Medium",
            "weight": "Bolder",
            "spacing": "Medium"
        },
        {
            "type": "ImageSet",
            "images": [
                {
                    "type": "Image",
                    "url": "https://blog.podium.com/wp-content/uploads/2017/07/GIFSBlog_Header.gif",
                    "size": "Medium",
                    "altText": ""
                },
                {
                    "type": "Image",
                    "url": "https://blog.podium.com/wp-content/uploads/2017/07/GIFSBlog_Header.gif",
                    "size": "Medium",
                    "altText": ""
                }
            ]
        },
        {
            "type": "TextBlock",
            "spacing": "Medium",
            "size": "Medium",
            "weight": "Bolder",
            "text": "GIF in Container.backgroundImage"
        },
        {
            "type": "Container",
            "minHeight": "40px",
            "backgroundImage": "https://blog.podium.com/wp-content/uploads/2017/07/GIFSBlog_Header.gif"
        },
        {
            "type": "TextBlock",
            "spacing": "Medium",
            "size": "Medium",
            "weight": "Bolder",
            "text": "GIF in Container.backgroundImage with repeat"
        },
        {
            "type": "Container",
            "minHeight": "60px",
            "backgroundImage": {
                "url": "https://media.giphy.com/media/j9EvJ9mne2ljy/giphy.gif",
                "fillMode": "RepeatHorizontally",
                "verticalAlignment": "Center"
            }
        },
        {
            "type": "TextBlock",
            "spacing": "Medium",
            "size": "Medium",
            "weight": "Bolder",
            "text": "GIF in Column.backgroundImage"
        },
        {
            "type": "ColumnSet",
            "minHeight": "50px",
            "columns": [
                {
                    "type": "Column",
                    "backgroundImage": {
                        "url": "https://media.giphy.com/media/j9EvJ9mne2ljy/giphy.gif",
                        "verticalAlignment": "Center"
                    },
                    "width": "stretch"
                },
                {
                    "type": "Column",
                    "backgroundImage": {
                        "url": "https://media.giphy.com/media/j9EvJ9mne2ljy/giphy.gif",
                        "verticalAlignment": "Center"
                    },
                    "width": "stretch"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "GIF in Action",
            "iconUrl": "https://media.giphy.com/media/j9EvJ9mne2ljy/giphy.gif",
            "url": "https://adaptivecards.io"
        }
    ]
}

Host config

N/A

Down level impact

Low. First frame of GIF still appears, but it doesn't animate.

Host burden

None.

Auto-generated task status

• Shared

• Designer

• .NET

• Android

• iOS

• TS

• UWP

Start by reviewing the renderer task status for Shared, Designer, .NET, Android, iOS, TS, and UWP, then compare how each handles the Image.url, backgroundImage, and Action.IconUrl locations. Done means GIFs are supported across the listed renderers and locations, including repeated backgrounds, while preserving the stated low down-level impact.