Optimizing graphics - --- - black art or what!!!

detox's picture

They have: 571 posts

Joined: Feb 2001

Can anyone give me some advice re optimizing graphics for the web? I have a couple of projects at the moment where I would love to be able to cut the image file sizes down a bit. I downloaded the trial version of ulead smart saver pro but I cannot get very good results without quite noticeable degradation of image quality....

They have: 488 posts

Joined: Feb 2000

Hi,

My favorite is http://www.spinwave.com/

You can download a trial version or if you like you can also optimize your images(jpeg or gif) online.

Regards,
NSS

AndyB's picture

They have: 344 posts

Joined: Aug 1999

Ulead's SmartSaver Pro is the very best tool available - no doubt.

You can use the split screen modes to see exactly what various compressions do to your image. You have complete control over the compression, as well as the blur.

Perhaps, you could post a URL for one of the images before compression so others can suggest what best to do. One possibility is to split the image into two or more parts and apply different compression (or even different image types) for the parts which can then be re-assembled with a table on your page.

They have: 488 posts

Joined: Feb 2000

There's another technique that designers use. It uses two images 0f the same size(one low resolution and one high resoultion)

The low resolution image will load very fast first as the file is very small while the high resolution image(detailed image) is loading to the visitors computer and after a few seconds the image becomes very clear which I am sure that many of you have seen it but without even noticing that the designer uses two images.

If you look carefully at the source code you will notice:


Regards,
NSS

mjames's picture

They have: 2,064 posts

Joined: Dec 1999

I use Adobe's optimizer, it's excellent: http://webservices.adobe.com/optimize/main.html

They have: 100 posts

Joined: Sep 1999

Generally, GENERALLY...

Images that have simple colors with no gradients, like logos or Headline text are best compressed as .gifs.

Images that have gradients are usually best compressed as .jpgs.

This rule changes as the files get larger.

Gifs can be limited to as few as 2 colors or use a pallette of up to 256 colors. You can also make gifs with custom palettes, or Windows colors, or Mac colors, or a limited palette of only colors that Windows and Macs share (usually refered to as Web Clut or Color Look Up Table) or a greyscale palette.

Jpegs take colors with similar 1's and Zeros (code) and instead of writing this pixel is 00101010 etc, and this pixel is 00010101000, and this pixel is 11001010, compresses fields by saying Pixels 79 through 5000 are this color 001010100.

In other words Jpegs describe areas instead of individual pixels.

Image compression is part art and part tech know how, it takes time to get really good at it.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.