|
|
 |
|
 |
The subject of image optimization for
the web is very extensive, so I'll not address all of it in this tutorial.
This will only cover the basics, and then show you how to optimize your
GUIs.
Notes: You may use almost any 2D-("photo-")editing
software package to optimize images for the web. Specifically, in this
tutorial, I'll give examples in Jasc's PaintShopPro software, simply because
of its wide availability, low cost, and ease of use. You can download a
trial version from their site. The GUIs used for this tutorial
are the Indicator GUI, and the Probe GUI.
There are 2 widely used image file formats on the web - GIFs and JPEGs
(There is also a new format called "PNG", and though it's a very
good one, it isn't yet fully supported, so it's rarely used today and isn't
practical at the moment). Each has its own strengths and weaknesses, and the
first choice you make when optimizing an image is choosing one of these
formats. Here is a brief overview of the 2:
GIFs
The GIF file format is a very simple format which defines an image to the
web browser pixel-by-pixel. There are 2 methods in which the GIF uses to
compress an image - first, it reduces the amount of colors in the image to
256 or less: this means that the less colors the image had to begin with,
the better the GIF will turn out. The second method is that it saves large
1-colored spaces in a compressed manner (without going into detail,
basically this is done by saving a line of pixels as one file-cell, instead
of many - so insead of showing 5 pixel in a horizontal row as "36, 36,
36, 36, 36", it will show them as "36[5]"). This can be taken
advantage of by filling in large spaces with a single color, and still
having a small image.
The types of images that would turn out well as a GIF are ones that don't
have many colors to begin with, for instance - cartoons, line art, flat
text, and fill areas. Also, any image with only one shade (for instance,
black-and-white) would look perfectly as a GIF, because you don't need more
than the 256 colors that GIF allows in order to define 1 shade (except for
very large spaces, which you won't use on the web). Actually, if the image
only has one shade, you should consider saving it using less colors, since a
32-color black-and-white image looks fine, and would take much less time to
load. GIFs are definitely not meant for photos - if you were to take a photo
and save it as a GIF, you'd end up with a line-art-looking image, that takes
a long time to load.
JPEG (or "JPG")
The JPEG file format compresses an image by generalizing it. It averages out
areas of the image, and gives you the "summary" of it. The JPEG
format supports 32Bit color depths, however, so it's very useful for saving
photos or images with many colors. While with a GIF you can control a file's
size by reducing/increasing the image's color depth (but only up to 256),
with JPEGs you choose the level of compression when saving the file. The
more compressed, the less detail it will have. The level of compression
ranges from 1 to 100. It's a good exercise just to take an image, save a
copy of it (so you don't damage the source), and then save the copy as many
JPEGs with different levels of compression. That will give you a
"feel" of how JPEG compresses an image and what to expect from
each level of compression (of course, the more images you try this on, the
better you'll understand it). One of the weaknesses of a JPEG is that it
normally won't "see" the exact color when it compresses the image,
so if you save an image with a certain background as a JPEG, and then enter
that image into an HTML with that background, there's a high probability
that the backgrounds won't match exactly.
The types of images that would turn out well as JPEGs are photos, general
high-color images, and textures. The types of images that wouldn't turn out
well as JPEGs are those that would most likely look good as GIFs - line art,
flat texts, small details, and sharp contrast fills.
Two terms you'll need to understand before we go on are
"Dithering" and "Banding". Dithering is mainly used when
saving images are GIF, and can greatly increase the quality of an image, as
the expense of size. Banding is the averaging of colors by systems that
don't support is. First, here's a dry explanation of banding:
The great majority of internet users set their desktop color-depth to 16Bit.
This means that if they were to view images with colors out of the 32Bit
palette, these colors would show up as "near"-colors, not the
exact hue. Normally this doesn't matter too much, except for gradient fills.
Let's say the user's computer can only understand the numbers "times
10", and any number other than that, it will count as the closest it
can understand (for instance, 13 would be 10, while 19 would be 20). Now,
you have an image with a gradient between 20 to 40, something like - 20, 22,
24, 26, 28, 30, 32, 34, 36, 38 and 40. If the user's computer could
understand any number, it would show that gradient as it is. However, if it
can only understand one-in-10 numbers, it would show the gradient as - 20,
20, 20, 30, 30, 30, 30, 30, 40, 40, and 40.
That was a very dry explanation, so here's a live example:
While the right side of the image is a smooth gradient, the left side is
"banded", meaning you can see bands of color instead of a smooth
transition. A smooth transition is what someone with a 32Bit desktop color
depth would see if they were shown a perfect gradient. By now, you may have
checked your settings, and may have determined that you're using a 16Bit
color depth... So why is the right side of the image smooth? Simply because
it was "dithered".
Dithering means blurring the lines between the bands of color by
"throwing around" pixels. Think of the pixels in the image as
grains of sand. Say you have 4 colors of sand with which to create a 1-meter
gradient. If you were to spread them one-by-one, you'd get 4 bands of color.
However, if you would then mix the sand a mix the sand a bit in order to
blend it, you'd get a smoother transition between the bands - and you'd
still be using these 4 colors.
To better understand this, here's how a zoomed-in dithered image looks like:
as you can see, it's not a perfect gradient, but rather colors stirred in a
way to that produces a smoother look, when viewed from afar.
Ok, now that you know the meaning of the terms, let's get down to business.
In the first example we'll go through is optimizing GUI images as GIFs. For
this example, I'll use the Indicator GUI's subheader, which is best suited
for use as a GIF, since it's more about shape than color.
1) Slice out the component you want to optimize, in this it's the subheader:
2) Choose "Decrease color depth" from the "color" menu,
and pick 256 colors.
(please read the note at the beginning of this document referring to
PaintShopPro)
3) In the palette option, the first option uses the 16Bit palette, the
second one uses the 32Bit paletter, and the third one uses the 256 palette.
They will all yield a 256-colored image, but each will create it using a
different amount of colors to choose from. For this example, choose the
first option for the palette. The second area is the reduction method. The
first option is to reduce the colors to simply the closest color in the
chosen palette, while the third will dither the colors into more smooth
blends. Choose "Error Diffusion" this time. Here is the image
you'll get after doing so:
It's very close to the image you started out with, only now it's compressed
into 256 colors. Actually, since you've chosen to use the 16Bit palette,
this specific image only contains 32 colors, since it'd only one shade
(black-to-white). Different images would need different options, but
remember that if you choose to use the 32Bit palette, users viewing the
image using a 16Bit system will see a noticeably lower-quality image.
For the second example, I'll use the PDA layout. I'll simply use it in its
entirety, instead of slicing it, for the purpose of this tutorial.
1) Slice out the PDA itself and paste it into a new image. Then, save the
image and choose the "JPEG" file format. Now select
"options" from the bottom-right of the page:
2) Choose 15 for this example. You may also choose any other rating to see
how much the quality degrades for each point. Here is the PDA after it was
compressed by 15:
As mentioned at the beginning of the tutorial, the subject of image optimization for
the web is very extensive, but it is also very subjective. Some people would
rather their sites loaded faster, and are willing to sacrifice image quality
for it. Others believe that if you're going to use graphics on your site,
you want it to look right, and that it's not asking for much from a user to
wait a few more seconds for higher-quality graphics to load. It all depends
on the purpose of the site, and the personal preference of the site's
creator. The most important thing to do is to learn when to use which file
format, and by how much to compress in order to achieve the quality you
want. Beyond that point, it's up to you to decide between fast-loading and
good-looking.
Return to the main page
|
|
|
