-- BITE THE BYTES --

" BITE THE BYTES "

-- WINKING KITTY --
This animation uses only two images and both examples appear to be the same in the finished animation -- but the method used to create it can make a big difference in the time it takes for it to load!
EXAMPLE 1 Actual image: � 16,103 bytes Width="243", Height="184" Number of frames= 2	.	EXAMPLE 2 Actual image: � 7,710 bytes Width="243", Height="184" Number of frames= 2
	.
In Example 1, the entire face of the cat was used for both images -- one with the eye open and one with the eye closed. This gives the same animated effect of the cat winking, but both images must load completely before the animation starts. Each separate image is approximately 8,000 bytes which makes the animated graphic 16,103 bytes creating a slow download and a waste of time and space! In Example 2, only the "closed eye" is used for the second image (approximately 1,000 bytes). Because the entire cat face doesn't have to load twice, this animation loads much faster and is less than half the total bytes of Example 1.

-- YELLOW ROSE --
These two roses appear the same, but notice the difference in byte size. Saving only 329 bytes on a small animated graphic might not seem like much, but when added to the rest of the graphics on your page, every byte saved makes a big difference!
EXAMPLE A Actual image: � 3,289 bytes Width="50", Height="50" Number of frames= 8	EXAMPLE B Actual image: � 2,960 bytes Width="50", Height="50" Number of frames= 8
Using the same technique as the "Winking Kitty", I managed to reduce the total bytes of the animated graphic by approximately 10%. To do this, I only used the "rose blossom" and deleted the stem in images 2-8. "Image 1" remains as the background image and the rest are replaced with the new image when the animation runs. EXAMPLE A below shows the images used in the original animation. EXAMPLE B shows how I reduced the total number of bytes by deleting the rose stem.

EXAMPLE A
Actual image: � 3,289 bytes, Width="50", Height="50", Number of frames= 8

EXAMPLE B
Actual image: � 2,960 bytes, Width="50", Height="50", Number of frames= 8

Return

Designed and maintained by Otter Sites Web Design

Copyright is claimed by Otter Sites Web Design to the entire body of this collection, as an entity, and to the HTML code which presents it as a collection. Otter Sites has received expressed permission for use of public domain and other privately owned works on this web site.
The content of this site, in part or in full, may not be reproduced, published, transmitted, uploaded, modified or distributed in any manner without Otter Sites prior written permission. Otter Sites Web Design is not responsible for material presented on third party linked sites.

Otter Sites does not endorse any banner ads placed on this site by a third party.