Optimizing Web Graphics

by Geethalakshmi 2008-11-25 13:30:28

Optimizing Web Graphics


Tips:

Here are some tips you can use to create the smallest possible graphics files:

* Minimize dimension and maximize crop.

* Minimize the initial number of colors.

* Choose your colors from the non-dithering palette.

* Use aliased sans-serif fonts like Geneva, Chicago. Anti-aliasing increases the number of colors.

* Use flat, horizontal areas of color: avoid gradations of color, especially large, gradual ones which are radial or horizontal, and have a large shift in hue and/or tint.

* Use histogram influencing to optimize and minimize palettes.

* Reduce the resolution to 72 dpi as your last step.

* Group multiple graphics into one CLUT.

* Use multiple small graphics and/or backgrounds instead of one large graphic.


Techniques:

Experiment; different graphic artists use different techniques:

* Try first reducing to 256 colors in Debabelizer and then reduce again to between 8 and 32 colors with Debabelizer's own Reduce Colors algorithm.

* Try working with a monochromatic palette, differing shades of the same color.

* Avoid dithering altogether by selecting a specific palette of 16 to 32 colors.

* In another approach, which could be called "painterly," you choose 4 to 5 colors, create your image with anti-aliased tools and save as, reducing colors to 16 or 32 colors.

* To flatten and reduce colors you can deliberately posterize your image before reducing it. This is also a good way to preview different numbers of colors.

* For anti-aliased images that will have a transparent background make the background similar to the background you will use on your page. This will keep a halo from showing around the edges.

* Use HEIGHT and WIDTH on images to speed display.

Tagged in:

516
like
0
dislike
0
mail
flag

You must LOGIN to add comments