University Relations

Graphics

Web graphics are as important as the content of your website. Good graphics can give your visitors/customers a creative idea of what they are looking at. You can add colors, visual appeal, to magnify a professional feel. Web sites that are not filled with interesting graphics will not be viewed by many visitors. Designing graphics is not only important, but their position in the website mostly decides the success or failure of your business.

Definitions
JPG, GIF and PNG?
216 Color Palette
Reducing Files Size
Transparent Backgrounds
Animations
Tricks of the Trade

Definitions

The Internet has a language of its own. FTP, HTML, CGI, JAVA are examples that just begin the scratch the surface. Graphics also have a wide range of definitions. From aliasing to transparency, they are covered below.

Aliasing: A process that displays text or images exactly as they are created. It causes jagged edges, however the images load faster. In our example, notice how the aliased effect can only be seen on the diagonal portions of the letter "A". If a viewer increases the text size on your webpage, the jagged edges will become proportionally more noticeable.
Anti-aliasing: A process which smoothes the edges of an image. It is the most useful for text and hand-drawn images. For the large letter "A", anti-aliasing has added several pixels of varying gray color to the edges. This gives a gradual transition from the solid black of the "A" to the solid white surrounding it.
Compression: One of the primary concerns of placing graphics on-line is reducing the files to minimize download time. Compression allows the size of an image to be reduced by packing the data. Compression works for all images, but is the most successful for items that have large blocks of similar colors. To learn more about reducing the size of files, consult the Reducing File Size section.
GIF Files: Pronounced 'jif' this is one of three types of formats that you can save images in to be viewed online. GIF files are usually simple drawings or animations.
JPG Files: Pronounced 'jay-peg' this is one of three types of formats that you can save images into be viewed online. Photographs look the best in the JPG format.
Lossless: A process that does not lose any of the data as it is compressed. GIF files are saved in this format and are preferred for images with large segments of the same color.
Lossy: The primary disadvantage of JPG's is they save images in a lossy format. The lossy process describes a data compression technique in which some of the data is lost. Lossy compressions try to eliminate redundant colors and tend to cause visible errors on the image. Look at the following example how it can destroy an image.
PNG Files: Pronounced 'ping' this is one of three types of formats that you can save images in to be viewed online. Only a limited number of browsers currently support this format. More information is in the GIF, JPG or PNG? section.
Resolution: The number of dots per inch that are displayed on a screen. Computers cannot display a resolution greater than 100.
Transparency: Section of an image that the pixels will not display any information, but instead will show the background behind the image. Consult the transparent background section for more information.

JPG, GIF, or PNG?

There are three possible file formats to use on web pages. However, there are rules to follow when determining which one to use.

JPG: Short for the Joint Photographic Expert Group and pronounced 'jay-peg', this is the best format to use for photographs and heavily filtered images. JPG files are in RGB mode and retain all of the information of an image and compress the files by throwing away portions of the data. Photographs can be compressed to save download time and usually look nearly the same as the original image. For example, of the two photographs below, the one on the left is 18k while the one on the right has a quality of 50% less, a size of only 9k and it looks nearly the same:

The primary problem with JPG files is they use lossy compression. This simply describes a process where redundant or unnecessary information is removed from an image. In the following example, the image on the right is a magnification of 300% of the one on the left. Notice how the lossy the sky is around the Epoct Sphere.
GIF: Short for Graphics Interchange Format and pronounced 'jiff', this is the best format for images with simple text, or simple drawings. Animations must be done in this format and images with transparent background can be done in GIF format. The GIF format is lossless, so color data is not removed if it is not needed or redundant. This can cause GIF images to store too much information and be a large size. Fortunately, software and web pages are available that can remove unneeded information. Since GIF files do not remove redundancies, they are perfect for images with large blocks of similar colors. In the two images that follow, the one on the left is in GIF format and correctly displays the image. The one on the right is JPG format and has pixels errors surrounding "WOW" and along the border of the light blue image.
Nine times out of ten, when an image has text in it, use GIF format.
PNG: Short for Portable Network Graphics and pronounced ping, the PNG format is the most promising for web pages. It is lossless, support up to 48-bit truecolor, 16-bit grayscale and 254 variations of transparencies. PNG files also compress better than GIF files and the image is not downgraded as the size is reduced. The main problem with PNG files is very few users on the Internet can see them. Only the most recent versions of Internet Explorer and Netscape Navigator have a built-in PNG displayer. For now, this option should only be used if you are planning on designing a page that can only be seen by the newest browsers. PNG files have a lot of promise, but very little support in the WWW community.

216 Color Palette

With the large range of systems that access the Internet, it is amazing that any continuity can be found on web pages. Luckily, graphic designers have been given a powerful tool to make all of the images look exactly the same, regardless of the hardware of the system trying to display the page. The Internet has 216 colors that are the same when viewed on any system. The chief disadvantage of using the palette is it can downgrade the quality of a drawing.

In order to utilize the palette specifically designed for the Internet, you need to make sure that it is part of your software. A page has been created that clearly explains how to make the palette part of your system.

The page is located at this location. There are rules of thumb about when the palette should and should not be used.

Use it when:

The image is a simple line drawing and does not contain any shadows or complex parts to it. For example, text with simple geometric drawing should be part of the palette. The image to the right is a perfect example of a drawing that should be converted into the web palette. It does not contain any complex graphics and all of the colors are in large blocks.
The quality of the image remains about the same. Although this may sound obvious, as images are converted into the 216 color palette, they will either look about the same or nearly unrecognizable. The cartoon character Garfield transfers well into the 216 color palette. The image on the left is 128 indexed adaptive while the one on the right is the 216 web palette.
The page is being created primarily for a class or a lab. If you are familiar with the environment of your users, and you know that they only have access to 256 color machines, definitely go this route.

Do not use it when:

The quality of the image is downgraded too much. If the 216 color palette practically destroys an image that must be on the page, keep it in RGB mode or have it in an adaptive interlaced palette. For example, the two images below were saved in indexed format (i.e. GIF), but the one on the left uses a 128 adaptive palette while the one on the right uses the standard web palette. If your monitor supports more than 256 colors, you will notice an immediate difference.
The image has gradients in it. The 216 color palette almost never displays a gradient well. For the two images below, the one on the left has 64 colors adaptive indexed while the one on the right has the standard web palette.
You are using the web page like a gallery. If you are displaying artwork or photographs from your personal collection, do not compromise the quality. You are displaying photographs. By and large, photographs (especially color pictures) do not transfer well to the 216 color selection. Color photographs involving close-ups of a person's face are a good example of an image that should not be converted. Look at the two photographs below of Harrison Ford. The one on the left is in RGB format (saved as a JPG) while the one on the right has been converted into the 216 color palette.

Some words of advice:

Although the rules above will work in most cases, the best method is to take an image and try saving it in various formats. The Lost World logo was enhanced and filtered and saved in three separate formats below. The left on is JPG, the center one 256 color adaptive GIF and the right one is web palette GIF. Although the quality of the web palette image is worse than the other two, the size of the file is half as large. Sacrificing the quality of an image for a smaller size is one of the perils of images on the Internet.

Reducing File Size

It should not be a surprise that web page designers try to compress images as much as possible. Nearly 50 percent of the users of the Internet still access it at rates of 28.8 or slower, so file size is critically important. The two most common images on the Internet are JPG and GIF. Both types are compressed as they are created. However, even after they have been compressed, they can be reduced in size more. Depending on the type of file that you have, the methods for compression are quite different.

JPG Files: Unless you are displaying artwork and the quality cannot be sacrificed, a JPG file can usually be reduced dramatically. In the following example, the original photo is on the right and has a size of 21k. The two images to the left appear similar but are much smaller. The one on the left is only 5k in size while the middle photo is 9k. The photo on the left is slightly over 5k and has a quality that is 25% as good as the original. The middle image has a quality half as good as the original and a size of 9k.

As the quality decreases, the lossyness of the picture will continue to increase. A rapid decrease in the quality is the easiest to see in an image with large blocks of similar colors (i.e. a blue sky). In the case above, the large number of constantly changing colors prevents the lossyness from being easily seen. JPG images involving close-ups tend to be the hardest to decrease the quality by more than 50%.

How can I decrease my JPG file size? There are several sites on the Internet that will do it from your hard drive or your web page. A service from GIF Wizard offers more advanced file reduction methods. This site does charge for its service. Software is also available for reducing file sizes. Adobe has a program called Image Ready designed for this task (This program often comes with Photoshop).

GIF Files: The size of GIF files is decreased by removing colors from the images. A standard GIF image will have 256 colors in it. Usually, the number of colors can be decreased from 256 to 64 without a noticeable difference. However, a large decrease in file size usually does not occur until the number of colors is less than 40. Unlike JPG files, GIF images do not slowly degrade to an unusable image. Typically you will find a point where if the number of colors are decreased below it that the image is not worth showing on a page. The example below shows three buttons. The one on the left cannot be used since too many colors have been removed. The middle successfully eliminates redundant and unnecessary colors to make the file size less.

How can I decrease my GIF file size? The options listed above for JPG files can also be used with GIF files. Another option in Adobe Photoshop is to export the file as an adaptive GIF. This will allow you to chose the number of colors to be included in the image. Although it does not give you as many options as GIF Wizard, it is enough to reduce most files by a substantial amount. The adaptive option can only be used if the image is in RGB mode.

Transparent Backgrounds

If all web pages were on white background, the need for a transparent image would probably not exist. However, in order to place a graphic that is not rectangular on a colored background, a transparent GIF needs to be used. The button to the left looks fine on the white background of this page.

What happens if it is placed on a background of a different color? Look how the purple background cannot be shown around the button.

When a transparent GIF is used, the purple background can be shown around the button.

How do you save an image as a transparent GIF? Almost every graphics program has an option to save items in GIF89 format, which is the standard one to use for transparent background on the Internet. In Adobe Photoshop, make sure the image has the checkerboard appearance surrounding the image. This represents the sections that will be transparent. The image below shows what the button looked like in Photoshop:

In order to save it properly, go to File-----> Export-----> GIF89a Export and select the adaptive option.

Animations

An animation is simply an image that has been created by merging several other images together. For example, the ball that is in the animation screen above was created by first drawing the ball, saving the image in the GIF format, slightly moving it and saving it again, and repeating the process several more times. This will leave you with a list of files that represent the ball at different spots on the screen. For example:

In order to compress all of the files and create an animated file, you will need software designed to make animations. Many of them offer shareware versions.

Things to keep in mind:

Animation files grow quickly! Most animations need at least five different frames. If each frame is 2000 bytes, that would make a 10,000 byte file.
Define the width and height of the animation. This will prevent the browser from not loading the rest of the screen while it waits for the animation. If people have other things to look at on the screen, they are more likely to wait for your image to load.
Keep your speed down. How fast each frame loads is tricky to figure out. The general rule is to err on the slow side. If the image looks fluent on your screen, increase the amount of time between each frame by 10-20 percent.
Do not overuse animations. Screens that have more than 3 complex animations can be very difficult to view on an older system. Unless they are a necessity, limit it to two animations per screen.

What other options do I have?

JAVA Applets: Although programming a JAVA applet from scratch will be too difficult for most individuals, there are many pre-made applets for animation. Pre-made examples include wave effects, 3D rotations and random animations. JAVA is a good choice if viewers to your page have fast connects and the animations are complex. Another advantage of using JAVA is you can animate JGP or GIF files. This site has one of the most complete lists of JAVA animation applets.
Macromedia Animations: Animations with Macromedia products tend to be the most amazing and complex on the Internet. Many of the official movie pages use Director or Flash from Macromedia to create the animations for their sites. The biggest disadvantage is you have to download a plug-in to view images created by either product. Animations through this method are not as simple to make as using JAVA or GIF89a.

Trick of the Trade

Absolutecross.com - A one-stop resource for webmasters, programmers, and graphic designers. Home to Photoshop tutorials, interfaces, thousands of top-quality background textures, and much more.

Flashkit.com - An online resource for Macromedia Flash development. Join in our message board discussions, read the latest Flash news and tutorials, and download our free FLAs, SWFs, and sound loops.

Jakob Nielson - Alertbox column, Web usability, usability engineering, and Jakob's minimalist approach to Web quality; Jakob's biography. Conferences and training events.

Macromedia.com - An online resource fort web page development, using mactmedia products. Get questions answered, get valuble tutorials and more!

Photoshop 101 - Free adobe photoshop tutorials, help and tips for beginners to professionals.

Top 10 Web Design Mistakes - Sites are getting better at using minimalist design, maintaining archives, and offering comprehensive services. However, these advances entail their own usability problems, as several prominent mistakes from 2003 show.

W3C - W3C's nearly 400 member organizations lead the World Wide Web to its full potential. Founded by Tim Berners-Lee, the Web's inventor. The W3C Web site hosts specifications, guidelines, software and tools. Public participation is welcome. W3C supports universal access, the semantic Web, trust, interoperability, evolvability, decentralization, and cooler multimedia.

Help

Grand Forks, ND