View Single Post
Old 07-01-2004, 23:41   #1
Jon M
Inactive
 
Jon M's Avatar
 
Join Date: Oct 2003
Location: East Midlands
Age: 46
Services: Rural BB - Radio Link via Virgin Fibre
Posts: 2,947
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Jon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze arrayJon M has a bronze array
Send a message via MSN to Jon M
Post Image Optimisation Guide

Image Optimisation Guide

Introduction:

The aim of this article is to not only provide a straightforward guide to effectively manage your images, but also to give you an idea of how different image types can be very important and how to use those different types to their potential.

For the sake of simplicity and my typing finger, I'm going to include just two popular applications for manipulating and optimising images.
Adobe Photoshop and Paint Shop Pro (PSP)


1) File Formats (File Types)

File extensions are the (normally) three digits after the dot in a filename. (myCV.doc or autoexec.bat for example)
The extension will dictate what format the file is, and therefore what programs are associated with it.

When working with images, the file extension is very important.
You will most likely be working with the extensions ".bmp, .jpg, .gif, .png and .tif(f)".

There are no clear cut rules, as there are many situations where the type of file you use is down to your own judgement. So, the following is a rough "best practice" guide..

.jpg (jpeg)
This type is best suited to high colour images like photos and artwork.
This is probably the most common format you'll come across, especially as most digital cameras will generate them.

.gif (gif)
This type is used more for low colour images, like application screenshots. It also supports animation through frames, so you'll be using a .gif if you want one of those flashy animated avatars

.bmp, .png and .tif(f)
These formats are useful in their appropriate fields, but for the purposes of web-based optimisation i'm going to ignore them for now. (.png's are actually a web optimised format.. but for now I'm sticking with the two formats above)

Worth pointing out too, is that if you use the "printscreen" button on your keyboard and paste the resulting image into an image program you will get a .bmp.
You'll see later on in the guide whether you want it to stay as a .bmp file though.


2) Size

The physical dimensions of your image are as important as using the correct format (type).
The golden rule here is: know your audience.

You don't want people to have to scroll around their screen to view your image.
The lowest (i hope) common resolution that people will be using to view your image will be 800(width) x 600(height) These units are measured in pixels. Look out for where pixels are mentioned in the next section to see why that measurement is important.

The size also relates to the amount of data someone must download before they can see the image.
Obviously, the smaller the better.
But, you don't want to compromise on the quality of your image.
This, again, is a judgement you'll have to make on your own, which hopefully will be much easier once you've read the next section.


3) Playing with your picture

(Just in case you get confused by the screenshots, the web specific component of Adobe Photoshop is called Imageready)

Once you have opened your image, the first job is to make it a manageable size.


Resizing Imageready


The important bit here is to remember the point made earlier about pixels and the measurement 800 x 600.
You want to keep your images at or below the 600 pixel mark.
This is the easy bit as you can see in the screenshots.
Just key in a value to one of the boxes marked "width" and "height" and it will automatically change the second value (that is if you've got a tick in the box marked constrain proportions, otherwise you can change each value independantly)


Resizing Paint Shop Pro



In PSP it's very similar to Imageready.
From the main menu select Image then Resize which should give you the window above.
Marking the radio button under Pixel size will allow you to adjust your image in pixels.
Next, type in the width or height you want for your resized image.
If you make sure to check the Maintain aspect ratio box, the other dimension will automatically adjust.


Optimising General

-> So, which file format should I choose, jpeg or gif??
As I've described in the file format section above, the general rule of thumb will be: high number of colours = jpeg, low number of colours = gif.
But for a practical example you can skip to the final section for an image comparison, which should give you a good idea.


Optimising Imageready



The Imageready settings can seem a bit complicated. The only ones you'll need to worry about for now are Quality for jpeg settings and Colors for gif settings.
The optimisation settings are found at the top right of the workspace if you're using the default palette locations.
Above are the settings I use most often for .jpg (left) and .gif (right).
Duplicate what you see in the boxes in my example if you wish, but it's good to experiment.
You'll soon see which settings give you better results.

To get the best image quality to filesize ratio you will need to decrease the quality (jpeg) and colors (gif) until you notice the image quality degrading. Once you've settled on the quality you're happy with, you can sit back and relax.. because thats it. (!don't forget to save it File menu --> Save optimized!)


Optimising Paint Shop Pro



Again, very similar to Imageready, apart from some of the terms used. Instead of decreasing the jpeg quality setting, we want to increase the compression value.
The same tactic as Imageready applies for PSP in the gif color settings.. bring it down until you see the image quality degrade.
(!save your work!)


Final Comments

The best advice of all is to go and play.
Get stuck in, find all the settings and tweaks and test them out... thats what an undo option is for .
You will find that every image will have its own sweet spot as far as optimisation is concerned, so you'll be learning all the time just like me and everyone else.
Don't feel shy if you want help, there are lots of willing and mostly able people lurking around the forum who you can email or PM.

If you want some more advanced tutorials, there are hundreds out there, just google it!!
Email me here if you have any questions about this tutorial or any subjects raised within it.

Happy Optimising .. (or whatever it is you guys do for fun)


Image Comparison

I added this section to give you a chance to see the theory in action:
(Have a look at which images you think are the best quality, then right click the images, select properties and compare the filesizes. You might be surprised at some of them )






Hosting your creation

The NTHW forums allow attachments, however, this feature although convenient is a big bandwidth hog for the forum hosts and therefore you should try to arrange hosting for your image elsewhere first.
If you have space on your own webspace you can upload your image using your preferred FTP client.
Alternatively, you can use an image hosting service such as this one: link which is free.
Jon M is offline   Reply With Quote