for the Web
In Corel PhotoPaint
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.
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 files size. In todays
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.
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, shouldnt 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 objects
colour will overlap some of the background colour producing
many shades in-between. That number of shades can be great.
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 cant go wrong.
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
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 cant or choose
not to view images include the ALT="describe briefly the
that you understand the logic behind all you do, here are some
mechanics of web optimizing images in PhotoPaint:
a new file that is 200 by 200 pixels in size, 150 dpi and
uses RGB colours.
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.>
the image you want.
the image as a backup in the native file format of the program,
or in this case a CPT.
under the Object menu to Combine, choose All Objects with
under the Image menu and choose convert to, 8 bit.
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.
the image changed too much go under Edit> Undo, and try
again with a higher number.
to Image> resample , choose 72 dpi, notice that the number
of pixels did not change (still 200 by 200 or 100%).
as, choose GIF. On the next screen it will ask if you want
anything to be transparent.
An optimized web GIF ready for viewing!
step 1 through 5, import the scan instead of creating it of
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.
will ask you how much to compress the file, choose between
2 and 20 for best results.
A web ready JPEG!
wasnt that easy?
Yeah I though so.