Basic Characteristics of Web Images

 

Your goal is to balance acceptable image quality with smallest file size possible:

 

Larger (in kbs) the image, longer the download time

 

Can't just rename the file extensions, the compression algorithms are very different.

 

gif... gif... what is it good for

 

• Illustrations,
• Rendered text-like headlines and some logos
• Images with large areas of single colors
• Computer generated art
• Can save with transparency, but doesn't support ALPHA CHANNELS

 

Limitations

256 colors max.

Not good for photographs/continous tone

Fewer colors (less bit depth) = smaller size

 

 

 

 

 

 

 

 

gif Compression options

• Lossy: reduces file size by selectively discarding data--a higher Lossy setting results in more data being discarded

 

• Dithering: technique that mixes two colors in a dot pattern to create the illusion of a third color.
  
  
  Dithering examples
  
  
• Color Reduction Algorithm: You can change the palette--or set of colors--in the color table by selecting a color reduction option in the Optimize panel/palette. There are three categories of options. Less colors=smaller file size
  
  
  
  Adaptive
  Creates a pallete by sampling the colors in your file, whether or not they are web safe.
  
  Web Adaptive
  Uses the Adaptive pallete but a color within 7 units of a Web-Safe color gets shifted to the nearest one.
  
  Web 216
  Uses only Web-safe colors, replacing non Web-safe colors with the closest Web-safe color.
  
  Exact
  Uses the Adaptive palette but automatically finds the exact number of colors in the graphic.
  
  
  Mac OS
  Uses the Mac OS system's default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors. If your image has fewer colors than the total number specified in the color palette, unused colors are removed.
  
  Windows
  Uses the Windows system's default 8-bit (256-color) color table, which is based on a uniform sampling of RGB colors. If your image has fewer colors than the total number specified in the color palette, unused colors are removed.
  
  Custom
  You open a swatches palette saved from Fireworks
  
  
  Grayscale
  Shifts the colors to the range of 256 grayscale values

 

transparency Options

 

 

 

 

A
Original Image

 

B
Transparency selected with matte color • fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.

 

C
Transparency selected. No matte color

 

D

Transparency deselected with a matte color

 

 

 

jpegs

 

 

gradient image saved as a .gif

 

 

 

gradient image saved as a .jpg

 

 

 

Best for compressing photographs, and continous tone, multi-color images.

limitations

• takes more space than .gif
• lossy compression:permanetly eliminating details in order to save space
• no transparency: but you can fake it

Save a working copy as tiff or psd only compress when finished editing!