Optimising images using Photoshop and ImageReady

Optimising images can result in a huge decrease in file-size, with almost no loss in visual

quality. It is essential to optimise graphics before publishing it to the web, as this could

mean faster page-load times, a lower server-load, and a massive decrease in consumption of

webspace as well as bandwidth.

Here's an example -





The image on the left is an unoptimised JPEG, filesize = 56.22 kb. The image on the

right is its optimised counterpart, filesize = 10.45 kb! Visually, there is almost no

loss in quality.

Brief theory behind Optimisation

The software adds noise (or loss) to selective parts of the image where the loss in quality

is least noticable.

How do you optimise Images?

Easy. Just follow the steps.

1) Open up the image.

2) Go to File -> Save for web



3) This is most crucial part of the optimising process - determining the file type which

best suits the optimised image, ie JPEG, PNG, or GIF.

Here are a few pointers -

i) Photographs optimise best as JPEGs. The settings I normally use are -



Generally, you don't need a quality in excess of 65, but, this varies from photo to photo,

so keep an eye on the preview box.

Here are some examples with the settings i've used -





Filesize (of the img on the left) = 53 kb, Filesize (of the image on the right)

=17 kb!

ii) Logos, buttons, and simple web headers optimise best as GIFs or PNGs.

This is a screenshot of the various GIF settings



The settings vary from image to image. I'll try and explain with the help of an example.

This is the graphic i want to Optimise -


Here, there are a very few colors. So, i went ahead and chose 4 in the Colors settings. This

is my result.



You can see that the edges haven't optimised correctly. So, I changed it to 8.



You can see the difference. All the settings I've used are just a guideline. Every image is

unique, and therefore can be optimised best in a unique way. Play around with the settings

till you get it right.

Hope this tutorial has helped you!.

Posted by Ritwik Roy (ritwikr).

Great tut, i've uploaded the images to our server.

yup, good tut for beginners

It's pretty hard to see a difference between the original and the optomised

and thats the point