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:

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


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.