A comprehensive avatar management system that allows users to upload custom profile pictures with client-side cropping, stored as optimized WebP images with dynamic size generation and Gravatar fallback.
Users can upload a custom avatar (JPG/PNG, max 2MB, minimum 400x400px) which overrides their default Gravatar. The system provides an intuitive modal interface with real-time cropping preview using Cropper.js. Uploaded images are stored as 400x400 WebP format (85% quality) and served dynamically at any requested size via a dedicated endpoint. The solution uses local storage for development and Digital Ocean Spaces with CDN for production. Users can remove their custom avatar at any time to revert to Gravatar. The interface is accessible by clicking/tapping the user avatar anywhere on the site, providing a seamless editing experience on both desktop and mobile devices.