Debisty Designs

Description: Learn how to optimize (reduce the size) of your .jpg or .gif images without any visual loss to the quality. This will cause files to load much faster when being viewed on the web.

My terms of use for this tutorial are simple....What you create using this tutorial is yours to do with as you please. A link back to this tut is appreciated but is not a requirement. The tutorial itself along with the images herein are copyrighted to me and all rights are reserved.

Click on Web/Image Optimizer and take a look at what needs to be done in the box that pops up.

1. This is where you need to select which format you're going to save your image in. Be sure that JPG is selected.

3. This is the preview pane. It shows your image as it will look in it's optimized state. The one on the left hand side shows your image before optimization or in it's original state.

4. You can use the + magnifying glass to zoom in on your image to get a closer look at how optimizing is going to affect it.

5. This is the quality bar. You will notice changes to your image as you move this downward, so it's essential to keep an eye on your viewing pane at this stage. The further you move the slider down towards the lowest quality, the more you will notice changes (blurring) in your image. Starting at a quality of 100, slowly move your bar down the quality scale until you can see alterations in your image. Because you're wanting the best lowest quality you can get, once you see there are alterations, slowly move your bar back up the scale again until you reach a point where the alterations are miminal. For most images that will be at somewhere between 70 and 80. However if you have bright vivid colours in your image, it will probably be a bit higher...80 - 90.

6. The figure you see here is the size your image will be saved at. Notice it's considerably smaller than that of the size given above the other pane.

7. Click on the Save As button. Give your image a name and save to a folder of your choosing on your hard drive.
NOTE: Be sure to choose an image name that will not automatically overwrite your original image or any other image that you're wishing to keep on your hard drive.

Exercise: Open at least three separate images. Click on Ctrl+D to duplicate each of them and then close the originals. Save each of the duplicated images as a .jpg with as much compression as you think necessary for the smallest file size without blurriness. Don't forget to watch how your image is being affected in the preview pane. Open your 3 images again and check to see that they still look as good as the originals.

Optimizing a .gif image

Click on Web/Image Optimizer and take a look at what needs to be done in the box that pops up.

1. This is where you need to select which format you're going to save your image in. Be sure that GIF is selected.

2. Click on the 1:1 button to view your image in the preview pane at it's full size.

3. This is the preview pane. It shows your image as it will look in it's optimized state. The one on the left hand side shows your image before optimization or in it's original state.

4. You can use the + magnifying glass to zoom in on your image to get a closer look at how optimizing is going to affect it.

5. Click on this button to activate the colour slider. The lower the number of colours the more optimized your image will be. 64 is usually good for screenshots whereas 128 - 256 is better for other images.

6. The figure you see here is the size your image will be saved at. Notice it's considerably smaller than that of the size given above the other pane.

Should you wish to save your image as a transparent .gif, then please refer to my other tutorial which shows exactly how to save transparent .gif's without jaggies.

Exercise: Open at least three separate images. Click on Ctrl+D to duplicate each of them and then close the originals. Save each of the duplicated images as a .gif. Remember optimization at 64 is usually good for screenshots whereas 128 - 256 is better for other images.