Optimizing Animated GIFs / Preview and Tweak

Preview and Tweak

Optimizing Animated GIFs

Preview your animation by choosing Animation | Start. Tweak your interframe delay to get the effect you want and reposition individual frames. You can also see the effect of the bit depth and remove unused colors settings. To move forward or backward through the animation press the up and down arrow keys.

Save As...

Animations are included in a web page just like standard IMG tags, i.e., (<IMG SRC="art/moment_anim.gif" WIDTH="89" HEIGHT="104" ALT="Cool Central Site of the Moment" BORDER=0>). Be sure to include the HEIGHT and WIDTH attributes - they allow any text to display first. If you omit graphic dimensions in pages containing JavaScript, Netscape 2.x will bomb.

Bandwidth Simulators

To preview your animation under real-world conditions, try a bandwidth simulator. GIFMation 2.0 includes a unique integrated bandwidth popup with their preview feature (Frames | Play Animation) that simulates how your animation will behave at various connection speeds.

Provide Alternatives

Since not all browsers support animated GIFs (Netscape 2.0b3 was the first, Explorer 3 supports all features except looping) and some only support part of their features (Explorer 2 does not support positioning) you should provide alternatives. You can direct the user to a page optimized for their browser using automatic content negotiation. Using JavaScript and a hidden frame, you can determine the type of browser viewing your page and automatically direct it to a page optimized for that browser. Here's some sample code from Cool Central's home page.

<script language="JavaScript"><!-- // begin universal browser detection browser = navigator.appName; version = parseInt(navigator.appVersion); if (browser == "Netscape" && version >= 3) type = "n3"; else if (browser == "Netscape" && version == 2) type = "n2"; else if (browser == "Microsoft Internet Explorer" && version >= 2) type = "e3"; with (document) { if (type == "n2") { writeln ('<FRAMESET FRAMEBORDER=NO BORDER=0 ROWS="100%,*">' + '<FRAME SRC="indexs.html" NAME="text" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="AUTO">' '</FRAMESET>'); } else { // Netscape 3 or Explorer 3 writeln ('<FRAMESET FRAMEBORDER=NO BORDER=0 ROWS="100%,*">' + '<FRAME SRC="indexa.html" NAME="text" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="AUTO">' + '</FRAMESET>'); } } // end browser detection --> </script><frameset frameborder="NO" border="0" rows="100%,*"><frame src="indexs.html" name="text" marginwidth="0" marginheight="0" scrolling="AUTO"/>' </frameset><noframes> insert table equivalent code here </noframes>

The Hidden Frame Trick

The trick is to declare two rows in the FRAMESET tag (ROWS="100%,*") and define only one frame. This does not cause any errors, it simply displays the frame you define. By dynamically generating the frameset based on the browser type you can automatically direct users to different pages. The page appears to be a normal HTML page when it is in fact a single frame.

The full-screen frame is used as a container to dynamically load either a static page (indexs.html) or an animated page (indexa.html) depending on the browser viewing the page. Be sure to use the NOFRAME and NOSCRIPT tags for browsers that don't support frames and JavaScript.

To see the finished product, go to Cool Central's site of the page.

GIF89a Browser Support

• Netscape 3.0 fully supports animated GIFs and has no memory leak
• Netscape 2.0x fully supports animated GIFs, but has a memory leak and may bomb on some GIF89as. Netscape 2-3.x do not support the "restore to previous" disposal method, and treat it like "do not dispose."
• Explorer 2.0 supports one loop full-frame animated GIFs
• Explorer 3.0 support one loop positioned animated GIFs and the "restore to previous" disposal method.

intro ->	background	color palettes	frame optimization
results	tutorial	reduce palette	frame differencing
set options	crop	tweak	conclusions

Comments are welcome

 


Created: October 7, 1996
Revised: Oct. 18, 1999

URL: https://webreference.com/dev/gifanim/tweak.html