04.16.2014
<  Main  |  About+Contact  |  Donate  |  Linkback  |  Privacy  >
Opens in a new Window
Styles:
  Digital   Mechanical   Sports   Science   Corporate   Misc.  
  Professional   (External Link)

GUIs With:
  Sliced HTML   Generator
Sections:
  Tools   CSS Docs   JavaScript   CSS Ref.   Tutorials   The Guide
Help:
  Examples   FAQ   Tutorials

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
Copyright 1999-2006 GUIStuff. All rights reserved.