Main Page  HTML  Style  Promotion  Links       Web Rings       Credits  Feedback       Critique       Sign In       Guestbook Get your FREE web site!		Images are great for some web sites.  They add visual appeal and information.   But, in some cases they can be a bandwidth hog.  In other words they can take forever to load and if you don't optimize them for the web, or if your don't set up the HTML quite right you add to the problem.   Use graphics that pertain to the subject of your page, avoid the rest.        Provide images that illustrate or help explain your subject and avoid all others.   Remember that each graphic increases the time it takes for your page to load.  This MTV generation wants things fast so if you want the visitor to stay on your page it must load fast.   Try holding your breath while your page loads.  Can't do it?  Then your page is too large.       Back to top.        There are several tricks you can use to speed up the download process and make your page more pleasing: Image attributes Use the HEIGHT and WIDTH dimension attributes whenever using the <IMG> tag.   This will let the browser know the dimentions of the image so that it can set aside the space on the page and display your text while the graphic is still downloading.   Then your visitor will have something to read while the graphic loads. Use the ALT attribute. Always put descriptive text in the ALT attribute of the <IMG> tag.  This is the text that the browser displays before and during the image loading into the browser.   That way your visitor will know what to expect before the image loads. Reduce Bit Depth of the Image Bit Depth is the number of bits required to store the color information or a pixel in your graphic.   It is directly related to how many colors you use in your image.  So the fewer colors that you use in your graphic, the lower the bit depth, and the faster the graphic will load. GIF or JPEG? GIFs are good for graphics like clip art.   They store color information at 8 bits per pixel or less.   That's 256 colors or less.  They have lossless compression, which means that there will be no image degradation from compression. JPEGs are good for photographic images.  They store images at 24 bits per pixel.   They have lossy compression, which means there will be some image degradation from compression.   You can limit the amount of degradation by saving the image at a higher quality setting.   However, your going to lose some compression when you do that.  In other word your file will be bigger.   The image degradation you'll see from JPEGs lossy compression technique are called artifacts. Image maps Use Image maps when you want to have a group of graphics near each other on the page.   Each graphic on your page requires a separate Hyper text Transfer Protocol (HTTP) call to the server.  This takes time.   So if you can combine the graphics in an area into one graphic that will only be one HTTP call. Stay away from Animations Animations eat up bandwidth like it was popcorn.  Remember that each frame in an animation adds the same amount of memory to the file as the first frame did.   For instance if one frame was 15kb then two would be 30kb, three would be 45kb, and so on.  Big animations take a LONG TIME to load.   They are distracting, like the <BLINK> tag, and you should try to stay away from them.  If you just can't leave them alone, use the tips above to optimize the file, and stick to subtle animations with small color shifts or tiny movements. Use graphics over and over First off if you use a graphic, like a bullet, more than once, it only has to download once.   Once it is in the cache it will be pulled from there.  This will make your page load faster and it will add to the consistency of your web site. Use Thumbnails The use of thumbnail sized images hyper linked to full sized graphics will reduce download time drastically. Netiquette Don't be a Bandwidth Bandit.  Some ISPs charge users for bandwidth.  Don't link to their server to display a graphic on your page.   Get the Webmaster's permission to download the graphic and then upload it to your server for use on your web page. Optimize your images with these tricks to minimize loading times.        Related Links My HTML Tutorial on graphics  Sun's Graphics Style Guide The Bandwidth Conservation Society GIF Wizard Calla's Spot  Andy's Art Attack Brandy's Web Emporium    Copyright © 1997, 1998 by Jim Meeker E-Mail: jim314@oocities.com    ICQ: 724480 Last Updated:  12/27/97  11:15:30 CST