How to reduce an animation-file size with Javascript -- Net Art -- Beaverland Net - Net-Forum where web surfers buy things and gather technical information

How to reduce an animation-file size
with Javascript

by Akira Kato

August 25, 2003

Move your mouse over her hair band.
To stop, move your mouse
out of her head.

The above Javascript animation consists of the following two 16-million-color JPEG images.

pinup011.jpg (16 million colors) size: 32 KB

A blonde pinup's closed eye (pinup013.jpg--120x120)
pinup013.jpg (16 million colors) size: 3 KB

With Javascript, you can create the same animation without any reduction of its quality. Besides, the file size of both pictures is only 35KB.

Comparison Chart

GIF animation
with 2 full-size pics GIF animation
with 1 full-size
& 1 part GIF animation
with 1 full-size
& 1 part Javascript
animation
with 1 full-size
& 1 part

No. of Colors 127 127 63 16 millions

File size 138 K bytes 76 K 51 K 35 K

Download time
at 14.4K baud 1 min 42 sec 56 38 20

Download time
at 28.8K baud 52 seconds 28 19 10

Download time
at 56K baud 27 seconds 15 10 6

Download time
over ISDN 12 seconds 7 5 3

page described Blonde Pinup:
transparent Gif
animation quality How to reduce
an animation-
file size How to reduce
an animation-
file size
even more this page

The following code creates the above animation:

</td></tr>
</table>

var myTimerID=null

function displayWink() {
document.myGal.src="../images/pinup013.jpg"
myTimerID=setTimeout("displaySpacer()",2000)
}

function displaySpacer() {
document.myGal.src="../images/spacer.gif"
myTimerID=setTimeout("displayWink()",2000)
}

function stopAnim() {
clearTimeout(myTimerID)
document.myGal.src="../images/spacer.gif"
}

//--->
</script>

myGal

The green square in the above is defined as document.myGal.src in Javascript so that your browser can place any picture at this particular place as the above code instructs.

A blonde pinup's closed eye (pinup013.jpg--120x120) document.myGal.src="../images/pinup013.jpg"

The above instruction means “move the picture at right to the green square”.

At present, you see spacer.gif at this particular place of the top presentation. Because it is a bloated transparent GIF image, you cannot see it. Instead, you see the girl’s face that shows itself through this transparent image.

When you move your mouse over this green square, the event handler (onMouseOver) will invoke the Javascript function (displayWink()), which will place the above picture into the green square so that the girl can close her eye.

The Javascript engine waits for 2,000 milliseconds or 2 seconds, then it invokes another function (displaySpacer()), which will place spacer.gif so that you can see her face with both eyes opened through the transparent image.

The Javascript engine waits another 2 seconds, and then invokes the function (displayWink()).

In reality, this will loop forever until you move your mouse out of the green square.

When you do this, the event handler (onMouseOut) will invoke the Javascript function (stopAnim()), which will stop the timing mechanism and place spacer.gif so that you see her both eyes open whenever your mouse gets out of this green saquare.

For more information, please visit the following links:

Related Links