A Comparison of Web Animation Techniques
A while ago, some classmates and I were discussing ways to put animation in a web page. I suggested that there might be as many as nine. I think that there are at least twenty-one....
| Description | Embedded or Linked | Image Setup | Embedded Files | Linked Files | Total File Size | Linked File Size |
|---|---|---|---|---|---|---|
| 1: Sequence of linked JPEGs changed by a linked script. | Image files and script file linked.
|
Multiple still JPEGs
|
None. | Image files, script file. | ||
| 2: Sequence of linked PNGs changed by a linked script. | Image files and script file linked.
|
Multiple still PNGs
|
None. | Image files, script file. | ||
| 3: Sequence of linked GIFs changed by a linked script. | Image files and script file linked.
|
Multiple still GIFs
|
None. | Image files, script file. | ||
| 4: Linked animated GIF. | Image file linked
|
One animated GIF
|
None. | Image file. | ||
| 5: Linked animated PNG. | Image file linked
|
One animated PNG image file
|
None. | Image file. | ||
| 6: Embedded HTML5 Canvas with animation drawn by a linked script. | Script linked.
|
Animation drawn on HTML Canvas
|
None. | Script file. | ||
| 7: Animated SVG linked as external image. | Image file linked
|
One animated SVG image file
|
None. | Image file. | ||
| 8: Embedded SVG changed by a linked script. | Image file embedded; script linked.
|
Text elements of SVG embedded in web page
|
Image. | Script file. | ||
| 9: Embedded SVG changed by linked CSS. | Image file embedded; CSS linked.
|
Text elements of SVG embedded in web page
|
Image. | CSS file. | ||
| 10: Embedded animated SVG. | Image file embedded
|
Image embedded as text elements of SVG in web page
|
Image. | None. | ||
| 11: Linked video | Video file linked
|
Video file hosted on external site
|
None. | Video file linked. | ||
| 12: Linked Flash animation | Animation file linked
|
Animation file handled by browser plugin
|
None. | Animation files linked. | ||
| 13: Embedded animated PNG. | Image file embedded
|
Image embedded as data URI in web page
|
Image embedded as data URI. | None. | ||
| 14: Embedded animated GIF. | Image file embedded
|
Image embedded as data URI in web page
|
Image embedded as data URI. | None. | ||
| 15: Embedded animated SVG. | Image file embedded
|
Image embedded as data URI in web page
|
Image embedded as data URI. | None. | ||
| 16: Sequence of linked JPEGs changed by an embedded script. | Image files linked; script file embedded
|
Multiple still JPEGs
|
Script. | Image files. | ||
| 17: Sequence of linked PNGs changed by an embedded script. | Image files linked; script file embedded
|
Multiple still JPEGs
|
Script. | Image files. | ||
| 18: Sequence of linked GIFs changed by an embedded script. | Image files linked; script file embedded
|
Multiple still JPEGs
|
Script. | Image files. | ||
| 19: Embedded HTML5 Canvas with animation drawn by an embedded script. | Script embedded
|
Animation drawn on HTML Canvas
|
Script. | None. | ||
| 20: Embedded SVG changed by an embedded script. | Image file and script embedded.
|
Text elements of SVG embedded in web page.
|
Image and script. | None. | ||
| 21: Embedded SVG changed by embedded CSS. | Image file and CSS embedded.
|
Text elements of SVG embedded in web page.
|
Image and CSS. | None. |