GIF
Consider that GIF image, above. It is 135 pixels wide and 200 pixels high, and file size is about 30.5 KB. GIF file is always limited to have 256 colors at maximum.
That means we couldn't have a realistic/ non-clipart image to be converted into animation without a loss in quality. This is the first reason I have to explore sprites.
See a 2nd image, below.
Sprites, animated with javascript
With GIMP software (thanks to GIMP guys), I created a 27.2KB, 8 image frames of a walking man animation, stacked them up, adjust the animation timing to be 100 microseconds between 2 frames, did the GIF optimization, and then saved the file.
Great! It took me almost 2 hours to complete all frames:)
Now let's make that as background and add a few lines of javascript to animate it:
Pretty simple, isn't it? The 2nd reason I've turn to sprite because in run-time, we can adjust the speed of the walking man.
Sprites, animated with CSS
Question is, which one do you think is best... or perhaps each depends on what kind of application to be built?
Comments