Extract individual frames from animated GIFs
You might assume a GIF is just a ZIP archive full of 50 normal JPEG images playing in sequence. It is not.
To save massive amounts of file size, the GIF specification uses a technique called Frame Disposal and Delta Encoding.
Frame 1 in a GIF is a full, standard image. But if Frame 2 is just a person blinking, the GIF encoder doesn't save the entire room again.
It only saves the tiny bounding rectangle around the person's eyes (a Delta frame). When playing back the GIF, the decoder overlays this tiny eye-box directly on top of the existing Frame 1 canvas.
This delta-encoding is why extracting frames is computationally heavy. If you want to jump to view Frame 30, the browser cannot simply load Frame 30 from the file.
The decoding engine has to start at Frame 1, and mathematically layer all 29 subsequent delta frames on top of each other using an HTML5 Canvas to reconstruct the final image for Frame 30.
If Frame 10 of a GIF only contains a person's moving hand, what does the GIF decoder have to do to show you the full picture of Frame 10?
