diff --git a/src/components/ContactDetails/ContactDetailsAvatar.vue b/src/components/ContactDetails/ContactDetailsAvatar.vue
index 6a0f1f007f..a5ce68b318 100644
--- a/src/components/ContactDetails/ContactDetailsAvatar.vue
+++ b/src/components/ContactDetails/ContactDetailsAvatar.vue
@@ -309,12 +309,16 @@ export default {
 		 */
 		getMimetype(uint) {
 			const bytes = []
-			uint.slice(0, 4).forEach((byte) => {
-				bytes.push(byte.toString(16))
+			uint.slice(0, 12).forEach((byte) => {
+				bytes.push(byte.toString(16).padStart(2, '0'))
 			})
 			const hex = bytes.join('').toUpperCase()
 
-			switch (hex) {
+			if (hex.slice(0, 8) === '52494646' && hex.slice(16, 24) === '57454250') {
+				return 'image/webp'
+			}
+
+			switch (hex.slice(0, 8)) {
 			case '89504E47':
 				return 'image/png'
 			case '47494638':