Modern Image Formats at Discord: Supporting WebP and AVIF (opens in new tab)
Discord modernized its image pipeline to support animated WebP and AVIF attachments, embeds, and emojis. The change improves animation quality while significantly reducing file sizes compared with GIFs. Discord chose WebP as its primary delivery format because it offers broader platform support and more predictable performance, while converting AVIF sources—including tone-mapping HDR images to SDR when necessary. ## Benefits of WebP and AVIF - **Better transparency:** Both formats support full alpha channels, allowing smooth edges and animations that blend naturally with Discord’s light and dark themes. - **Greater color depth:** - GIF supports only 256 colors. - WebP supports roughly 16 million colors through 8-bit color channels. - AVIF supports up to 12 bits per channel. - **Improved visual quality:** Higher color fidelity reduces banding, produces more accurate colors, and better supports photographic and HDR content. - **Smaller animations:** Modern video-style compression provides: - Inter-frame compression - Advanced prediction - Configurable quality levels - Millisecond-precise frame timing - In the example provided, a GIF was **302 KB**, while the equivalent WebP animation was **43 KB**. ## Cross-Platform Image Processing - Discord processes and resizes every attached or embedded image to provide consistent behavior across: - Web browsers - Windows, macOS, and Linux - iOS - Android - Supporting new formats required coordinating inspection, conversion, decoding, and rendering throughout the media infrastructure. - Discord selected WebP as its preferred transformation target because it offers: - Near-universal platform support - Faster encoding and decoding than AVIF - Mature tools and ecosystem support - More predictable performance ## Tradeoffs Between WebP and AVIF - WebP is less capable than AVIF for: - 10- or 12-bit color - HDR content - Maximum compression efficiency - AVIF can produce smaller files for some content, but its platform support and performance are less consistent. - Discord converts AVIF images to WebP while preserving as much visual quality as possible. - HDR AVIF sources are tone-mapped to SDR because WebP is limited to 8-bit color depth. ## iOS Decoding Challenges - Discord uses SDWebImage to render images on iOS. - Its default WebP implementation relies on Apple’s ImageIO framework, available in iOS 14 and later. - Testing revealed that ImageIO decoded animated WebP files with increasingly inconsistent timing, especially for large or frame-heavy animations. - In a 10-second 480p30 comparison: - `libwebp` decoded the animation in real time. - ImageIO fell more than three seconds behind, with the delay increasing throughout playback. Discord’s move to WebP and AVIF demonstrates how modern formats can deliver higher-quality animations with substantially smaller files. For broad compatibility and reliable playback, WebP serves as the practical default, while AVIF remains useful as a high-efficiency source format.