PNG file uploaded from Element X Android shows as GIF in Element Web

[babolivier]

Steps to reproduce

1. Open Element X Android (version 0.2.3)
2. Upload a PNG file (I've only tried in an encrypted room, but I believe I've seen it in unencrypted rooms recently too)
3. Show the room in Element Web

Outcome

What did you expect?

The image is shown without the "GIF" bit on its upper right corner.

What happened instead?

The image is shown with the "GIF" bit on its upper right corner. The full event sent by Element X Android (after decryption) is:

{
  "content": {
    "body": "sticker_face.png",
    "file": {
      "hashes": {
        "sha256": "0uLfzzYWro/qkQb51j7kZhleA4lIGq52/3OJRoFOeRY"
      },
      "iv": "0KQ/WCgxQrkAAAAAAAAAAA",
      "key": {
        "alg": "A256CTR",
        "ext": true,
        "k": "8GFwdb8OkVqmaYNV2tc6SagOIwWH5fv2ztXB6imM-2I",
        "key_ops": [
          "encrypt",
          "decrypt"
        ],
        "kty": "oct"
      },
      "url": "mxc://abolivier.bzh/ZGRHfcuIepVJDsQCvwpNsjVO",
      "v": "v2"
    },
    "info": {
      "h": 2069,
      "mimetype": "image/png",
      "size": 1579868,
      "thumbnail_file": {
        "hashes": {
          "sha256": "b3FJZr2QsK67NCc/W0TGZfz0+U1zj2OHmzUUTLA46lo"
        },
        "iv": "OIdy2syoBbMAAAAAAAAAAA",
        "key": {
          "alg": "A256CTR",
          "ext": true,
          "k": "o35Lfo-UX8216XQ8Cz1Bezk7cda-oJYcCHsoQ9E09Cc",
          "key_ops": [
            "encrypt",
            "decrypt"
          ],
          "kty": "oct"
        },
        "url": "mxc://abolivier.bzh/SWSQJlyshkKPHjRdtqFmcXYF",
        "v": "v2"
      },
      "thumbnail_info": {
        "h": 689,
        "mimetype": "image/jpeg",
        "size": 29342,
        "w": 498
      },
      "w": 1496,
      "xyz.amorgan.blurhash": "KDB._#V@0f~VR*IV0eozn%"
    },
    "msgtype": "m.image"
  },
  "room_id": "!tfKoffUGXAVlVWhNYJ:abolivier.bzh",
  "type": "m.room.message"
}

I'm not fully sure whether this belongs on the Element Web repo or on the Element X Android one. It only happens when I send the image from Element X Android, but Element Web is the only client I see recognising it as a GIF (Element Android (not X) does not show the play icon it shows for GIFs).

I've wondered for a bit whether this might just be #24015, but it looks like a different issue since my image is sent with the image/png MIME type.

Operating system

Arch Linux

Browser information

Firefox 118.0.2

URL for webapp

app.element.io

Application version

Element version: 1.11.47, Olm version: 3.2.14

Homeserver

abolivier.bzh

Will you send logs?

Yes

[babolivier]

I've also uploaded logs from Element X Android, if it helps.

[Half-Shot]

I've also seen this one. Let me know if you need additional debugging.

[bmarty]

Looks like image/png are considered as animated image here:

https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/utils/Image.ts#L21C3-L21C3

export function mayBeAnimated(mimeType?: string): boolean {
    // AVIF animation support at the time of writing is only available in Chrome hence not having `blobIsAnimated` check
    return ["image/gif", "image/webp", "image/png", "image/apng", "image/avif"].includes(mimeType!);
}

It's coming from this PR: matrix-org/matrix-react-sdk#8158 but the GIF hover effect is only (IIUC) using mayBeAnimated and not blobIsAnimated which dig deeper in the file content.

[t3chguy]

Looks like image/png are considered as animated image here:

Its considered potentially animated (may be animated) - the mime type of APNG is https://en.wikipedia.org/wiki/APNG any of image/vnd.mozilla.apng, image/apng, image/png

[bmarty]

Yes, sorry, I took a shortcut: image/png are considered as potentially animated images and so the GIF hover is rendered, even the file is not animated. I believe than generally image/png are not animated.

Also the code does not handle the case image/vnd.mozilla.apng.

Edit Also: animated => GIF is not correct (since here it's PNG). Maybe replace by a play button?

[HarHarLinks]

potentially animated

while technically correct, this is causing confusion for users when the image is not in fact animated upon hover (or similar "start playback" interaction). it would be better if element tried to inspect a received png to see if it is animated and only then falling back to this default assumption that it might be.

Maybe replace by a play button?

I still like the different UX semantics of an animated image vs a video. i fear that the label "GIF" that we have gotten used to while technically incorrect still meets that expectation. compare to several "gif" sites such as giphy et al, or buttons in composers of e.g. discord, or buttons in (virtual) keyboards such as gboard.