Main Page |
Software Page |
Tutorials Page |
Next Tip>> |
Traditional wisdom has it that when you are preparing images for the web, you should use GIF s for flat toned images such as diagrams and graphics, and JPEGs for graduated images like photographs.
The web designer's main aim is to deliver maximum image quality combined with the fastest possible download time. This means producing the smallest possible file size for images.
Satori has its own wizard based tool for optimizing images for the web.
Hit The Web Options button on the File menu, and click the Optimizer Wizard... button
This close-up of Tracey on the Satori test card is a graduated tone image, and should be saved as a JPEG. Sorry, Tracey, next time...
Start with a small canvas of 288 x 120 and create something like the graphic below. If you are feeling lazy, you can download the same image as a Satori canvas file by clicking here. Don't worry, it's only 5Kb!
When you have the Web Optimizer open, try saving this flat image as a JPEG, with a compression quality setting of about 55. You can achieve an acceptable image quality with quite a respectable download speed.
Check the "Progressive" box.
The JPEG route....Can GIFs do it better? Faster?
The trouble with JPEGs is that you can get fuzzy looking results when you compress them too much. So choose the GIF option for clarity.
 |
|
The "Browser Safe" Palette and its effect on the colours. Yuk! |
You might think that using the Browser Safe option would give the cleanest, fastest results, especially as the original palette for the image was constructed using the "Browser Safe" Palette!The evidence above contradicts this idea. |
The key is to use the "Adaptive" palette from the drop-down list below the palette preview.
First of all, use the slider to the right of the "Number of Colors in Palette" box and reduce the number of colours in the palette until you wince at how awful it looks...
Here's the result of using only 2 colours in the GIF
Pretty bad, huh...
The trick is to slowly move the "Number of Colors in Palette" slider upwards from the minimum, until the image is satisfactory.
You can economise even more by using the little eyedropper tool (circled below) to remove individual colours in your palette, if they don't look as if they have any place in the image.
 |
Right Click, and you can remove colours that are not needed in the ouput. |
So let's see how this works out in the end.
Compare the figure in the lower red ellipse (0 seconds) against figure achieved using the JPEG option.
Just carry on tweaking until you reach the best possible compromise!
Main Page |
Software Page |
Tutorials Page |
Next Tip>> |
