GIFs Are Forever, Let’s Make Them Better
summary
Animated GIFs become smaller and higher quality by converting to webp and avif or short MP4/WebM transcodes (libvips/sharp, FFmpeg, HandBrake), with a Homer-backing-into-hedge clip dropping from ~1 MB to a fraction while gaining color depth. Use picture/source fallbacks for images, swap to <video> with controls + muted + playsinline + loop for user playback, respect reduced-motion via matchMedia or a tiny web component, and expose alt text via figcaption or aria-labelledby.
AI-written summary · about
chapters (9)
- 0:00The evolution of the GIF
- 1:36Defining the modern GIF
- 4:02Prioritizing accessibility
- 5:55Optimizing image assets
- 8:38Respecting motion preferences
- 10:09Adding user playback controls
- 13:27Fixing accessibility and motion
- 16:19Using custom web components
- 19:00Future-proofing animations
related talks
01h 11mMoving Pictures
48mFast and Beautiful: Modern Image Delivery Techniques
26mFast and Beautiful Modern Image Delivery Techniques
56mBoosting Web Performance in 2022
39mBuild a kick-🍑 video player
46mFast and Beautiful Modern Image Delivery Techniques
48mDecrease your conversions – common ways to lock people out
29mSpeed Essentials: Key Techniques for Fast Websites