Optimizing for the Web In Corel PhotoPaint
by Byzanthium

Not just any image is suitable for the web. Not accounting for taste and sensibility, there are certain criteria that must be abided for the image to be viewable. Whether you have created the image yourself or scanned in a photo, it most certainly is not ready for the web. To take the right steps towards a web optimized image, it is best to first understand the logic behind it. It is quite simple really.

The first thing is DPI. I am sure you have tripped over the term before. DPI, roughly translated, stands for "dots per inch". There is always a question of just what is the proper dpi for various purposes. The answer lies in properly targeted output. Anything online will surely be viewed either through a computer monitor or the TV screen. So the dpi of the image should be targeted to those, for it completely defeats the point to have an image with more dots then the output device can display. The most widely accepted dpi for a standard monitor is 72, but it may be 96. Either-way, everyone agrees that any image online needs to be less then 120 dpi. Another reason for keeping the dpi down has to do with the file’s size. In today’s impatient consumerism, no one will wait 5 minutes for a picture to render. Keeping the file size the smallest possible while retaining overall image quality is the ultimate goal, hence optimization. Remember that the images are there to enhance and attract, so a huge image will defeat the point. It will turn more people away then attract them, no matter how fabulous the image is. This leads us to the other step in optimizing images : colour.

Colour is usually read in bits, as in 8, 16 and 32 bit. Which refers to 256, High (16 million) and True colour (32 million) respectively. It can be further defined by various palettes as well as how each hue is accomplished. RGB hues are composed of percentages of red, green and blue colours. CYMK employs %'s of cyan, yellow, magenta and "key", which is sometimes called registration, but is nothing more then black. The reason why I broth up the question of palettes is that the 2 most popular browsers, Netscape and I.E., use slightly different colours, as do Mac Vs PCs. Corel PhotoPaint lets you choose the palette you wish to use but it still does not have what is called the "Safe palette" or safe colours. You should be able to find many sites that do list or even offer this palette. Speaking of colours one can get easily confused, but basically CYMK is never used for screen output as it is used a lot in print. Now back to what this has to do with the size of the image file. Simply put the more colours you have the larger the file. You may ask though: "If I have an image that is in 8 bit colour and one that is 16, both are the same image, so the number of colours used is the same, shouldn’t the file size be the same?" Logically yes, but in reality no. Even if we have an image of a red button on a white background, more then the 2 main colours are used. To make the edge of the button appear smooth and continuos the image is feathered. What that means is some of the object’s colour will overlap some of the background colour producing many shades in-between. That number of shades can be great.

So what do I use for web images? Going back to the target output, a standard VGA monitor is capable of displaying little over 250 colours or 8 bit. Technology is always pushing forward but you must keep in mind the things on the web should be available to the common user who is usually not at the technological edge. So stick to 8 bit colour and you can’t go wrong.

The last part of optimizing images for the web is file format. There are two most widely accepted formats for the web. One is the GIF, which was created exclusively for online viewing. GIFs are quite flexible and are best used for digitally composed or simple images that employ few colours. Gifs have a "built in" compression agent so the quality is not the best. An image must be in 8 bit colour to be saved as a GIF, the format demands it. At the same time, GIF images have many benefits. The main one is tiny file sizes. The other is transparency (it saves masks or "eliminates" colours), available in 89A gifs. There is also the ability to create simple animations but those are used less and less for better formats producing higher quality animation are developed everyday. The other common format is the JPEG. It allows images in RGB (16 bit), LAB and even CYMK to be saved. Alas, for the web we not only do not need nor want that many colours. JPEGs employ and algorithm based compression, usually LTZ, which can be adjusted and tends to produce much better quality images. That is why almost all photos and scanned in images are JPEGs. Unfortunately JPEGs do NOT support transparency. There are other formats out there being used but only these two are supported by all graphic capable browsers.

To sum it all up, the main goal is like a bargain buy : high quality-quick loading time. Generally all your web images should be in 256 colours or less, and be either a GIF or a JPEG. The actual size of images in pixels is determined by overall layout and necessity, while keeping in mind that people surf with their browsers set at different resolutions. A well designed web site will present itself well in a 640 by 480, 800 by 600, 1024 by 768, as well as other resolutions. An average GIF employs 25 colours, while a JPEG a 100, and both should be under 30 k for an image 200 pixels squared in dimensions. Do not forget to check for safe colours and dpi (72). One last thing for great looking and behaving images is to properly define the images’ dimensions in the <IMG..> tag through the use of Height= and Width=. For all the people out there who either can’t or choose not to view images include the ALT="describe briefly the image" tag.

Now that you understand the logic behind all you do, here are some mechanics of web optimizing images in PhotoPaint:

For Button1.gif:

Create a new file that is 200 by 200 pixels in size, 150 dpi and uses RGB colours.

<the reason for that is that a lot of plugins and filters do not work with 8 bit colours and it is always easier to go down in dpi/colours and it is difficult to go up.>

Create the image you want.

Save the image as a backup in the native file format of the program, or in this case a CPT.

Go under the Object menu to Combine, choose All Objects with the Background.

Go under the Image menu and choose convert to, 8 bit.

On the popup screen choose Adaptive or optimized and then change the figure on the right from 256 to the number of colours you believe the image uses plus 10. Click ok.

If the image changed too much go under Edit> Undo, and try again with a higher number.

Go to Image> resample , choose 72 dpi, notice that the number of pixels did not change (still 200 by 200 or 100%).

Save as, choose GIF. On the next screen it will ask if you want anything to be transparent.

Voila! An optimized web GIF ready for viewing!

For Button2.jpg:

Follow step 1 through 5, import the scan instead of creating it of course.

Convert to 100 colours, and if it looks ok convert to 80,..etc.. You want to get to the point that you notice a difference and then you undo the last conversion and either redo by 10 only or go ahead and Save as JPEG.

It will ask you how much to compress the file, choose between 2 and 20 for best results.

Voila! A web ready JPEG!

Now wasn’t that easy?… Yeah I though so.

Byzanthium

Ring of Writers