United States Coast Guard Auxiliary
Website Graphics
Tips, tricks, and links
This website will be dedicated to the use of graphics in websites and the most economical way to use them. Space on a website represents time and money. The use of your load time and your space on your server is the concern of us all.
Most of the graphics shown on this site and made available will be on other Auxiliary websites. Linking to a site takes a lot less space than posting it on your site. Logos and banners that are unique of have been changed from the original will be site residents.
this image takes up 5,425 bytes of space 
this one 5,360. not much difference but there are only two colors
involved. The upper image was made using 256 colors the lower one is 16
colors. Both images are jpg extensions. Normally jpg is the smallest
file size of an image by extension type. The same image as the upper jpg
converted to gif extension increase it's file size to 10,990 bytes. All
file sizes are made using the same "ruler" of measurement. The
file size is checked in File Manager on the webmaster's personal computer
running Windows 98 SE.
A good graphics viewer that will allow you to crop images and resize without cropping is a key to any image work. A free graphics package is available at http://www.irfanview.com The viewer is freeware and does resizing, cropping, transparency of gif images and will allow a change of extension via the "save as" feature.
As this page rambles on the subject may change but the end goal will be the same. Reduce file size and use the graphics that you want to use. Websites with graphics and graphic viewer and handling software will be linked to. Some will not be Auxiliary websites but we do not endorse any products you may see on those sites. The sites will be listed for their content on graphic instruction of freeware availability.
The use of "thumbnails" can be
achieved without Microsoft FrontPage and can be loaded using FTP.
The "Thumbnail" is a smaller image that allows the page to load
faster. If you desire to view the full sized image you click on the
thumbnail. The thumbnail procedure in regular HTML is here
and a thumbnail created by FrontPage is 
here. The FrontPage help files will walk you through the thumbnail process. You
will insert your full-sized image into the page and create the thumbnail.
One problem with thumbnails has recently cropped up. The page with the 'nails on it will always load quickly. Make sure the images you are loading when the thumbnail is clicked on is going to load properly also. The ideal image size for use in ALL browsers is 640 x 480 pixels. That means that any browser set for 800x 600 pixels of viewing area will be able to see all of your graphic with out the use of slides to move the graphic. On higher resolutions the image will of course fit on the page. Loading an image that is 1200 pixels wide takes about 65% more file space that a 640 pixel image. File space equals load time. Why take longer to load something that will be harder to view? In addition to resizing images to the 640 x 480 size care should be taken to use the extension that requires the least amount of file space. Loading a bmp at 10 times the file size of a jpg just doesn't make good sense. Not only do you make your customer wait, you use a lot more web server space and if you are restricted on space it becomes even more important. I advised one new webmaster on the use of jpg and resizing and she reduced her website requirements from almost 10,000kb to 4,285. So, take the fat out of your site's images and improve your load time!
The use of ALT text on all images on Auxiliary websites is required. Using FrontPage to add text, sometimes referred to as "image tags", right click on an image in normal or page view and select "Picture Properties. Fill in the "text" line and click OK. Text should give a description of the image. Boat.jpg may describe the photo but My Boat on Patrol tells a story for your viewer. The text can then be read by placing the mouse arrow over the picture.
Using "old fashioned" HTML you would add the text label in between the carats like this <img src="boat.jpg" Width=xxx height=xxx ALT="My Boat on Patrol">. The size of course would be dependant upon your particular graphic. All banners and logos should be done in text also. The ideal text for a banner with wording on it is the wording of the banner itself. At times adding to the banner's message is done. Check the red and blue title at the top of this page for a good example.
The use of animated images requires more space and time than non-animated images. Animations are done in the "gif" extension. Animation can also be done with the flash method and then we really get into time and space requirements. Animations are space and time consuming but they are fun and entertaining. The link below to "My images" is primarily an animated gif supply.
Original Auxiliary graphics work may also be
found on the My Images site. Images there are not found on other
sites. My thanks to Bob Showers and Dr. Ian Adkins for sharing with
us. I thought this one was cute for a document tag/icon.....right click to
"borrow". 
There are some tips, tricks, and ideas on building a distinctive title bar on this page.
PA site images 
My
Images Check out My Soapbox!