Re: Reducing size of graphics

At 04:53 PM 08/01/99 +0000, you wrote:
>I've been recently adding new graphics to my WebDiva
>(http://www.webdiva.co.uk) website and running it through websitegarage.
>I'd like to reduce the loading time of my images and I was wondering if
>there were any free programs or if I would be able to use my exisiting
>program (Paintshop Pro 5.0) to reduce the size of the images ?
>

I have to agree with Randy, if you have one piece of software to get to
help you with Web graphics make it Ulead's Smart Saver Pro.  It optimizes
JPEGs, GIFs and PNG images as well as creates image maps and slices images
to insert in tables and creates the HTML for you.

Now there are ways to reduce file size significantly when you save them
right from PSP or Photoshop but the method's different with JPEGs and GIFs.
 When you save a JPG in Photoshop (must be similar in PSP) you get to
choose the compression level (between 1 and 10) so you can experiment with
until you get an acceptable compromise between compression level and image
quality.  You also get three more options to choose from for saving the
file: Baseline Standard (format recognizable by all browsers), Baseline
Optimized (smaller file size but not recognized by all browsers) and
Progressive JPG (image displays gradually as it is downloaded as a series
of scans, you specify how many); note that progressive JPEGs are a bit
larger in file size but at least users do not wait in front of a blank
screen until the image pops up.

For GIFs things are a bit more complex.  The first thing you should do when
you're about to export an image as a GIF is change its color mode from RGB
(or whatever) to Indexed Colors before you export the image.  When you do
so you get to choose the bit depth (number of colors) of your final image
and you should choose the Adaptive or Web color palette.  The number of
color in a GIF is what affects file size the most so always save them with
the fewest number of colors possible.  You also get a few more options to
choose from when switching your image to Indexed Colors:  Dithering and
Interlacing.  Dithering will make your color transitions smoother and the
Interlace option will produce a similar gradual downloading effect akin to
a Progressive JPG.  I always use Interlacing and will use Dithering only on
images that have gradient like parts as opposed to large solid areas of
only one color with sharply contrasting elements such as text.  Dithering
is probably better left off in those cases.

After you are done switching your image to Indexed Colors mode you are
ready to export it as a GIF.  It is in that dialog that you may select the
color(s) you wish to be transparent and then you can save the final image
as GIF.

One more thing to consider is that all GIF images on a same Web page should
be saved with the same palette or the display of the image may look very
weird on systems that display 256 colors or less.  That is because browsers
in those cases take the palette of the first GIF it encounters and uses it
on all the other ones... you can imagine the disastrous effect this can
have.  The way around this is to put all your images for one page in one
bigger file in PSP or Photoshop and change the color mode to Indexed Colors
using the Adaptive palette for all those images at once.  You then save
this palette with whatever name suits you and re save all your images
individually using the palette you just saved.  Savvy Web design firms
clients will often check your work on a computer set to display only 256
colors to make sure you optimized your images that way.

HTH!

St=E9phane Bergeron

HWG: hwg-graphics mailing list archives, maintained by Webmasters @ IWA