How to Add a Discord Reactive Image

Fortunately, you don’t need to use expensive software to generate a talking avatar for you. In fact, with Discord reactive images, you can start streaming with an avatar immediately.

When choosing a channel to watch, most viewers will choose to click on a channel with a webcam. Using a reactive avatar is the next best option if you can’t use a webcam.

Though it won’t be as high-tech as some of the v-tubers you see online, your viewers will be able to differentiate when you are speaking and when you are quiet.

This post will cover what reactive images on Discrd are, how you can make them, and how to set them up in your favorite broadcasting software.

A reactive image on Discord is a set of images or avatars that adjust slightly when someone is streaming while also in a Discord call. While the image isn’t viewable to the whole group within Discord itself, anyone watching a stream or recorded YouTube video using this feature can see the image change when the user is talking.

Whether you stream on Twitch or want to make a video for your friends, adding a reactive image can make things more interesting to the other users enjoying the show. The whole process can be set up in a matter of minutes. All you need are two PNG images, a Discord account, and the streaming software of your choice.

The first step toward using Discord reactive images is to create your own and set them up in a browser source tool.

Here’s how to complete these steps:

1. Step 1

   

   First, you will need to create PNG images. These can either be actual photos of yourself or unique artwork you have created, or you can use an avatar maker like the one I used for this example.

   Make sure that you create a visually appealing image at least 400px by 400px, as one with a low resolution will not look as good.

   

   To create a reaction, you will want to have your second PNG image slightly different than the first. For example, I opened the mouth of my avatar.

2. Step 2

   Unless you removed the background when you created the PNG (or had the designer do it for you), visit remove.bg to make your background transparent.

3. Step 3

   

   Visit the Discord Reactive Image Tool website and click the “login” button. Check that your Discord credentials are correct, then click the “Authorize” button.

4. Step 4

   

   You will see two profile images side by side. You’ll see a “No file chosen” button underneath each one. Click each and add the respective images. The one on the left should be the static image, and the one on the right will be the reactive image. Click “Save” when you are done.

5. Step 5

   

   Configure the options as you wish (such as bounce effect), then click the “Apply” button.

   Where to Get Custom Reactive Images

   Most streamers and YouTubers will want to have custom reactive images. Unless you know how to make them yourselves or want to use an avatar maker, you will need to find a designer to help you.

   Many affordable designers on Fiverr will be happy to create unique avatars for your needs. All you need to do is find an artist you like and simply explain what features you are seeking. You will likely be able to get your images back to you in less than a week.

Once you have finished using the Discord reactive images tool, you can stream or record videos with your reactive image. You will need to use the broadcasting software of your choice. This option is available with OBS, Streamlabs, Xsplit, and more.

You must add your reactive image as a browser source regardless of your chosen software. Here’s how you can complete this step with two different streaming software.

Turn on Discord Developer Mode

You will need to turn on developer mode on your Discord account if you haven’t already. To do this, log into Discord and complete the following:

1. Step 1

   

   Click the cog button next to your username and avatar at the bottom left of the Discord app. This will open the user settings.

2. Step 2

   

   Choose “Advanced” from the menu list on the left side of the screen.

3. Step 3

   

   Click the toggle to enable “Developer Mode.”

   Note: For you to see your own reactive image in these programs, you will need to join a voice channel on Discord. If you are worried about someone interrupting you, you can create a private channel or server on the Discord app.

Upload to OBS

After launching OBS, you can add a browser input by completing the following steps:

1. Step 1

   

   Click the “+” button under the “Sources” section to add a new source to OBS.

2. Step 2

   

   Select “Brower” from the menu that appears. Name your source whatever you choose.

3. Step 3

   

   Copy and paste the individual link from the reactive image tool. Change the size as necessary, then press “OK”.

4. Step 4

   

   At this point, you should be able to see the reactive images move while speaking. You can move the image around the display and resize it as necessary.

Upload to Streamlabs

The following are the steps on how you can add an individual browser source on Streamlabs:

1. Step 1

   

   Click the “+” to add a new source.

2. Step 2

   

   Select “Browser source” from the options of general sources. Then click the green “Add Source” button.

3. Step 3

   Name the source “Avatar” or the name of your choice.

4. Step 4

   

   Copy the individual browser source link into the URL option on the popup screen. You should then be able to see your reactive images and how it changes when you speak into the Discord voice channel. Resize the image as necessary, then click the “Close” button.