diff --git a/changelog.d/8120.feature b/changelog.d/8120.feature
new file mode 100644
index 0000000000..906ec2b819
--- /dev/null
+++ b/changelog.d/8120.feature
@@ -0,0 +1 @@
+Marks WebP files as Animated and allows them to play
diff --git a/matrix-sdk-android/src/main/java/org/matrix/android/sdk/api/util/MimeTypes.kt b/matrix-sdk-android/src/main/java/org/matrix/android/sdk/api/util/MimeTypes.kt
index 5ec0dedadf..af8ab71a87 100644
--- a/matrix-sdk-android/src/main/java/org/matrix/android/sdk/api/util/MimeTypes.kt
+++ b/matrix-sdk-android/src/main/java/org/matrix/android/sdk/api/util/MimeTypes.kt
@@ -30,6 +30,7 @@ object MimeTypes {
     const val BadJpg = "image/jpg"
     const val Jpeg = "image/jpeg"
     const val Gif = "image/gif"
+    const val Webp = "image/webp"
 
     const val Ogg = "audio/ogg"
 
diff --git a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/factory/MessageItemFactory.kt b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/factory/MessageItemFactory.kt
index 09b91cc4f1..5f8883fdfe 100644
--- a/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/factory/MessageItemFactory.kt
+++ b/vector/src/main/java/im/vector/app/features/home/room/detail/timeline/factory/MessageItemFactory.kt
@@ -528,6 +528,8 @@ class MessageItemFactory @Inject constructor(
         )
 
         val playable = messageContent.mimeType == MimeTypes.Gif
+        // don't show play button because detecting animated webp isn't possible via mimetype
+        val playableIfAutoplay = playable || messageContent.mimeType == MimeTypes.Webp
 
         return MessageImageVideoItem_()
                 .attributes(attributes)
@@ -549,7 +551,7 @@ class MessageItemFactory @Inject constructor(
                         }
                     }
                 }.apply {
-                    if (playable && vectorPreferences.autoplayAnimatedImages()) {
+                    if (playableIfAutoplay && vectorPreferences.autoplayAnimatedImages()) {
                         mode(ImageContentRenderer.Mode.ANIMATED_THUMBNAIL)
                     }
                 }
diff --git a/vector/src/main/java/im/vector/app/features/media/DataAttachmentRoomProvider.kt b/vector/src/main/java/im/vector/app/features/media/DataAttachmentRoomProvider.kt
index 0924532bc2..a0354f3d60 100644
--- a/vector/src/main/java/im/vector/app/features/media/DataAttachmentRoomProvider.kt
+++ b/vector/src/main/java/im/vector/app/features/media/DataAttachmentRoomProvider.kt
@@ -49,7 +49,7 @@ class DataAttachmentRoomProvider(
         return getItem(position).let {
             when (it) {
                 is ImageContentRenderer.Data -> {
-                    if (it.mimeType == MimeTypes.Gif) {
+                    if (it.mimeType == MimeTypes.Gif || it.mimeType == MimeTypes.Webp) {
                         AttachmentInfo.AnimatedImage(
                                 uid = it.eventId,
                                 url = it.url ?: "",
diff --git a/vector/src/main/java/im/vector/app/features/media/ImageContentRenderer.kt b/vector/src/main/java/im/vector/app/features/media/ImageContentRenderer.kt
index baad815df2..876812cea0 100644
--- a/vector/src/main/java/im/vector/app/features/media/ImageContentRenderer.kt
+++ b/vector/src/main/java/im/vector/app/features/media/ImageContentRenderer.kt
@@ -135,7 +135,7 @@ class ImageContentRenderer @Inject constructor(
                     if (mode == Mode.ANIMATED_THUMBNAIL) it
                     else it.dontAnimate()
                 }
-                .transform(cornerTransformation)
+                .optionalTransform(cornerTransformation)
                 .into(imageView)
     }
 
@@ -167,7 +167,7 @@ class ImageContentRenderer @Inject constructor(
         }
 
         req
-                .fitCenter()
+                .optionalFitCenter()
                 .into(target)
     }
 
@@ -211,7 +211,7 @@ class ImageContentRenderer @Inject constructor(
                 return false
             }
         })
-                .fitCenter()
+                .optionalFitCenter()
                 .into(imageView)
     }
 
diff --git a/vector/src/main/java/im/vector/app/features/media/RoomEventsAttachmentProvider.kt b/vector/src/main/java/im/vector/app/features/media/RoomEventsAttachmentProvider.kt
index e18a13a3e6..f833a33b87 100644
--- a/vector/src/main/java/im/vector/app/features/media/RoomEventsAttachmentProvider.kt
+++ b/vector/src/main/java/im/vector/app/features/media/RoomEventsAttachmentProvider.kt
@@ -71,7 +71,7 @@ class RoomEventsAttachmentProvider(
                         allowNonMxcUrls = it.root.sendState.isSending()
 
                 )
-                if (content.mimeType == MimeTypes.Gif) {
+                if (content.mimeType == MimeTypes.Gif || content.mimeType == MimeTypes.Webp) {
                     AttachmentInfo.AnimatedImage(
                             uid = it.eventId,
                             url = content.url ?: "",