Back to Internet 101

Question: How do I make good graphics for the web?

Answer: Buy good clip art or learn to use Photoshop.

Photoshop (an Adobe product) is the standard for GREAT graphics. For making graphics files for the web - the rule of thumb is if you have a line art graphics or something that has minimal colors and little detail - it's probably best to save the file in GIF format. If it is a photograph - it's probably best to save the file in JPEG format. There are some new compression techniques that are starting to deviate from this long standing set of rules but for the basic info it still works.

G
I
F
-
L
I
N
E

A
R
T

 J
P
E
G
-
P
H
O
T
O

To reduce the file size of a gif (in Photoshop) follow these three steps. It will first reduce the color palette to web save colors and then eliminate any unused colors - making the image file size smaller.

  • change the file to indexed color and use web safe colors
  • change the file back into RGB mode
  • change the file back into index colors and use exact numbers
To reduce the file size of a JPEG (in Photoshop) follow these steps. Look at the different compression steps available. Maximum quality (9) is largest file size and Minimum quality (1) is smallest file size. I'm guessing that most pictures that you put on the web will look great with a fairly low (2) compression rate. Most people can not tell the difference between 2 and 9.
  • experiment until you find an acceptable quality
Question: What does WebSafe colors refer too?

    Answer: Depending on your display card, video ram and settings you might see things in only a certain set of 216 colors. In order to reduce file sizes of gif graphics files - it is recommended to reduce the color set when possible. If you reduce the colors to the set of 216 "web safe colors" it should appear the same on everyone's monitor regardless of their display settings. These colors are represented by the 6x6x6 color cube from Netscape color scheme. Using 00, 33, 66, 99, CC, and FF.

    For example: 000000 = black (top left) and FFFFFF = white (bottom right).

    color table
    right -->
    middle -->
          0??
    L   3??
    E   6??
    F   9??
    T   c??
          f??
    ??0
    0 3 6 9 c f
          
          
          
          
          
          
    ??3
    0 3 6 9 c f
          
          
          
          
          
          
    ??6
    0 3 6 9 c f
          
          
          
          
          
          
    ??9
    0 3 6 9 c f
          
          
          
          
          
          
    ??c
    0 3 6 9 c f
          
          
          
          
          
          
    ??f
    0 3 6 9 c f
          
          
          
          
          
          
Question: Why didn't you use all WebSafe colors for all of your graphics?

    Answer: I don't like rules! Actually I'm not really sure how much this is followed. Obviously some really bad sites don't follow it at all. I believe that it is important to TRY to stay within the 216 realm when possible - but there are some instances that it just doesn't work. Keep as many graphics as possible within those limits and realize that the ones that don't stay within 216 rules might look terrible on someone's machine that is old and shouldn't be on the web anyway. (just kidding)

8545

Back to Internet 101