Search code examples
node.jsdiscorddiscord.js

Having trouble working with Discord Stickers


I am trying to work around with Discord stickers, but the more I dig, the more confusing it gets.

Sticker URL that we are going to use: https://cdn.discordapp.com/stickers/781291131828699156.png

If you copy and paste that URL on discord, it will just show non-animated ("PNG") version of the sticker. But when you send the same sticker on Discord normally using sticker tab or welcome react method, discord will show it as an actual sticker (animated, "GIF"). There are few things I have found while working:

  • It will always show PNG version if you are not doing it normally.
  • When you type the URL in browser, it will show the actual animated version of the sticker on .png format, which is super confusing because it shows "PNG" version all the time when you send the URL in a discord server but when you go to it, it shows animated one. (I am not sure how it works, the page HTML just loads the same URL)
  • Discord actually uses https://media.discordapp.net/stickers/781291131828699156.png?size=160&passthrough=false when you send the URL normally. I did some research and found out that cdn is for desktop and media is for mobile. But, its exactly the same as cdn one, I am guessing Discord uses "media" as universal because it will load on all devices (not sure).

I tried downloading the file using axios, but its the same ("PNG" version).

  • Thanks

Solution

  • Discord uses the APNG format, which is essentially just letting PNG files be animated, for rendering stickers, so it being .png isn't the problem.

    As for why it doesn't load, there are a number of reasons why.

    1. Your browser might not support the format. This, however, is ruled out as you said in your question that you can load it in a seperate window.
    2. It might be the media and cdn servers messing with the APNG data while compressing the file.

    As you found out, Discord uses media.discordapp.net as its media proxy for loading images, so that might be at fault. There are known issues about videos loaded from that domain not loading in Discord, so that might be related.

    I've tested this myself, and it looks like a) if you load the media link in your browser, it won't animate (at least for me), and b) if you send it in Discord, it also won't animate.

    The cdn link, however, is a tiny bit different. I found out that a) it does, actually, animate on my browser (like what happened to yours) but b) does not animate in Discord.

    So we know what happens on media is different from cdn. Maybe this is why?

    My current theory is that Discord might strip unneeded (in its opinion) data from the PNG file (thinking it's not APNG) to cut down on bandwidth usage, which prevents it from animating.