Detroit Area Council, BSA
1776 West Warren Ave.,  Detroit, MI  48208
Phone: (313) 897-1965     Fax: (313) 897-9870

Website Graphics

Web Tips Pencil & Paper template with the words - Graphics

Graphics are not the easiest things to understand. With the myriad of file formats, size, resolution, etc., one can become lost quickly. While by no means an expert in the field, we do have some members of the team with extensive graphics backgrounds and they have a variety of software available that can assist in reformatting a graphics for use on the website.

Questions regarding graphics can be directed to the webmaster and if necessary he can get others involved to assist.

We do expect each website coordinator to have a basic familiarity with graphics and do a lot of the upfront work when required.


Still-Images

mixed formats

Getting an image as small as possible yet maintain clarity is the objective of many sites on the web. The can be found by using the Google search emgine.

Creating Images and #D text on-line is available at the following sites:

.gif format

.GIF stands for Compuserve Graphics Image Format.

There may be the occasion that you will get into using .GIF graphics. We have to make all graphics as small as we can for downloading speed. There are sites on the web that you can upload a gif file to and it will reformat and "clean" it up and let you download it for use. I've used them and saved a lot of file space which is important in downloading web pages. They are located:

.gif files can't store more than eight bits of information for each pixel and it sets a maximum of 256 different colors in the entire picture. This format uses a compression scheme whereby the saved file is identical to the original image. However, if you start out with something like a colorful photograph, you'll have to reduce your original image to an indexed color mode before you can save it as a .GIF ...and when you do, you'll notice some dithering in areas that previously had smooth color transitions.

Transparent GIFs are used to eliminate the typical rectangular borders associated with most bitmapped images that appear on a Web page. The creator of a GIF image may set certain pixels within the bitmap to a color designated within the image file as "transparent". When this GIF image is displayed by a Web browser the transparent pixels take on the color of the user's display. Any pixel set to the specified transparent color index value will take on the background color of the display device when displayed.

Two advantages that .GIF files still have over .JPGs are transparency and animation. You can save multiple images to a single .GIF file and have them play back in a cycle, like frames in a movie. You can also cause some of the pixels in a .GIF image to display as transparent, letting the background of the web page show through. 

.jpg format

The name .JPG (sometimes called .JPEG) stands for Joint Photographic Experts Group, after the team that created the standard. 

This format is usually used for photographs, or other images with lots of colors and variable tones. Color .JPG files support millions of colors per image, but this format also supports documents with 256 levels of gray -- or one byte of info per pixel. 

The .JPG format uses a compression scheme whereby the data in the saved image is not identical to the original file. The amount of compression is often user-defined; you can decide when you save the file how much of a trade-off you want between image quality and the file size on your disk. (You may need to close the image and re-open the .JPG to correctly view the changes made by the compression algorithms. Since the image will get slightly degraded each and every time you save it, I recommend that you keep a "clean" original version from which you can do your resizing and reformatting.

The .JPG standard was designed with human vision parameters in mind; it takes advantage of the fact that you're more likely to notice changes in brightness than in colors ...especially changes in yellow areas.

If you have files with very few colors, or large flat areas, don't save them as .JPGs. You'll introduce a noticeable graininess to the image, and probably make a larger file size than the same picture saved as a .GIF 

SUMMARY- to be viewable by the largest number of browsers currently, web graphics should be saved in either .JPG or .GIF format. Use the .GIF format for images with a lot of flat areas and few colors, and save color files -- like photographs -- as .JPGs. Other formats are available but are not as widely supported yet.