From 90f0507af0bceec104ab3a56e9f763d48eddef18 Mon Sep 17 00:00:00 2001
From: Fleny <Fleny113@outlook.com>
Date: Sun, 1 Jun 2025 08:28:27 +0200
Subject: [PATCH] feat(utils): animated webp emojis (#4199)

---
 packages/types/src/discord/reference.ts | 2 +-
 packages/utils/src/images.ts            | 8 ++++++--
 packages/utils/tests/images.spec.ts     | 8 ++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/types/src/discord/reference.ts b/packages/types/src/discord/reference.ts
index 9fd56083d..02feb5154 100644
--- a/packages/types/src/discord/reference.ts
+++ b/packages/types/src/discord/reference.ts
@@ -6,7 +6,7 @@
  * @remarks
  * json is only for stickers
  */
-export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'gif' | 'json'
+export type ImageFormat = 'jpg' | 'jpeg' | 'png' | 'webp' | 'gif' | 'avif' | 'json'
 
 /** https://discord.com/developers/docs/reference#image-formatting */
 export type ImageSize = 16 | 32 | 64 | 128 | 256 | 512 | 1024 | 2048 | 4096
diff --git a/packages/utils/src/images.ts b/packages/utils/src/images.ts
index e9a1dbb7c..926ac4618 100644
--- a/packages/utils/src/images.ts
+++ b/packages/utils/src/images.ts
@@ -11,10 +11,14 @@ export function formatImageUrl(url: string, size: ImageSize = 128, format?: Imag
  *
  * @param emojiId The id of the emoji
  * @param animated Whether or not the emoji is animated
+ * @param format The format of the image, defaults to png
  * @returns string
+ *
+ * @remarks
+ * The animated parameter is used to specify the animated query parameter valid for webp images or to force the gif if the format is not set to webp.
  */
-export function emojiUrl(emojiId: BigString, animated = false): string {
-  return `https://cdn.discordapp.com/emojis/${emojiId}.${animated ? 'gif' : 'png'}`
+export function emojiUrl(emojiId: BigString, animated = false, format: ImageFormat = 'png'): string {
+  return `https://cdn.discordapp.com/emojis/${emojiId}.${animated ? (format === 'webp' ? 'webp' : 'gif') : format}${animated && format === 'webp' ? '?animated=true' : ''}`
 }
 
 /**
diff --git a/packages/utils/tests/images.spec.ts b/packages/utils/tests/images.spec.ts
index 0a608bd82..c6aec31e5 100644
--- a/packages/utils/tests/images.spec.ts
+++ b/packages/utils/tests/images.spec.ts
@@ -43,6 +43,14 @@ describe('images.ts', () => {
     it('can format emoji url with gif as ext', () => {
       expect(emojiUrl('1079584570661404724', true)).to.equal('https://cdn.discordapp.com/emojis/1079584570661404724.gif')
     })
+
+    it('can format emoji url with webp as ext', () => {
+      expect(emojiUrl('1079823706743918622', false, 'webp')).to.equal('https://cdn.discordapp.com/emojis/1079823706743918622.webp')
+    })
+
+    it('can format emoji url with webp as ext when animated', () => {
+      expect(emojiUrl('1079823706743918622', true, 'webp')).to.equal('https://cdn.discordapp.com/emojis/1079823706743918622.webp?animated=true')
+    })
   })
 
   describe('avatarUrl function', () => {