SPRITES ON THE WEB

Summary from the TLDR Dev newsletter

In 2015, Twitter used image sprites to create its animated "Like" button, a technique borrowed from video games to run complex animations on low-end devices. Sprites work by combining all frames of an animation into a single image, called a spritesheet, then using CSS properties like `object-fit: cover` and `object-position` within an img tag to display each frame sequentially. The `steps()` timing function in CSS is necessary for advancing through these frames discretely, avoiding smooth transitions and creating a stop-motion effect.