The latest articles on DEV Community by Joey (@popemotetool). https://dev.to/popemotetool https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4006488%2Fe53f831f-f1c1-45d2-bf3d-9aafad618142.png https://dev.to/popemotetool en Joey Sun, 28 Jun 2026 12:39:39 +0000 https://dev.to/popemotetool/how-i-built-a-free-twitch-emote-resizer-tool-4hfn https://dev.to/popemotetool/how-i-built-a-free-twitch-emote-resizer-tool-4hfn <h1> How I Built a Free Twitch Emote Resizer Tool </h1> <p>As a Twitch streamer, I always struggled with getting my emotes sized correctly for upload. Twitch requires specific pixel dimensions: 28×28, 56×56, and 112×112 pixels. Even being one pixel off causes the upload to fail.</p> <p>I decided to build a free tool to solve this problem once and for all.</p> <h2> The Problem </h2> <p>Every time I created a new emote, I had to:</p> <ol> <li>Open an image editor</li> <li>Resize to three different dimensions</li> <li>Export each version separately</li> <li>Hope I got the sizes right</li> </ol> <p>This tedious process could take 10-15 minutes per emote.</p> <h2> The Solution: PopEmote </h2> <p>I built <a href="https://popemote.com/" rel="noopener noreferrer">PopEmote</a> — a free, browser-based emote resizer that does everything in one click.</p> <h3> Key Features: </h3> <ul> <li> <strong>Instant resizing</strong> to all three Twitch sizes</li> <li> <strong>Chat preview</strong> to see how your emote looks in real chat</li> <li> <strong>Upload validation</strong> to catch common issues before submitting</li> <li> <strong>No sign-up required</strong> — just upload and download</li> </ul> <h2> How It Works </h2> <ol> <li>Upload your PNG or GIF emote</li> <li>Preview it in a mock Twitch chat</li> <li>Download all three sizes at once</li> </ol> <p>The tool is built with vanilla JavaScript — no frameworks, no dependencies, no bloat. It runs entirely in the browser, so your images never leave your device.</p> <h2> Try It Free </h2> <p>If you're a Twitch streamer looking for a quick way to resize your emotes, check out <a href="https://popemote.com/" rel="noopener noreferrer">PopEmote</a> — it's completely free and requires no account.</p> javascript webdev tutorial streaming