retrieval
system without prior written permission of the publisher except in the
case of brief quotations embodied in critical articles and reviews. Making
copies of any part of this book for any purpose other than your own personal
use is a violation of United
States copyright laws. For information, address Que Corporation, 201 West
103rd Street, Indianapolis, IN 46290 or at support@mcp.com.
Notice: This material is excerpted from Special Edition Using HTML, 2nd Edition, ISBN: 0-7897-0758-6. This material has not yet been through the final proof reading stage that it will pass through before being published in printed form. Some errors may exist here that will be corrected before the book is published. This material is provided "as is" without any warranty of any kind.
by Mark Brown
There is obviously a lot more to putting an image into a Web page than merely using the <IMG> tag. You have to make sure that the graphic can be seen by as many people as possible. Not only does the picture have to be appropriate for your uses, but also it to be well designed for the user. That is, you want the image to be downloaded as quickly as possible by the user's browser. We'll talk a lot about the more technical aspects of images and how to control them.
In this chapter, you learn about the following:
Before we can talk about creating or modifying an image, we have to
know the basics of it. All graphics
file formats have the same basic information. The difference between them
is the way the information is stored. Because most modern Web
browsers can handle both GIF and JPEG, we'll limit our discussion to these
two formats.
The first attribute of any picture you see is the color palette, which holds the colors being used by the current picture. The number of colors that can be defined is based on the image-file format used to store the image. Typically, each entry in the color palette stores the brightness of red, green, and blue. By mixing these three colors, you can get any other color. These color palette entries are sometimes referred to as pens.
The display
size of the image is known as the resolution, and is stored as a
series of pixels (dots on the screen). Each pixel in the image points
to an entry in the color palette. So that to display the graphic, you have
to go through each pixel of the graphic. Then for each pixel, look at which
pen it's using, and then look up the color for the pen. Based on the resolution,
you'll know when you reach the end of one line of the graphic.
If you were to store an image as a color palette and a sequence of pixels, the file size would be very large. While there are file formats that store such an image, it's unworkable for a Web page. Consequently, the graphic data must be compressed to reduce the file size. To this end, GIF applies traditional compression methods to a picture. These conventional compression algorithms look for recurring patterns in the image data. The more frequent a particular pattern, the more the graphic file size will be reduced.
Due to technical restrictions of GIF, such as number of colors and file
size, a new graphic file format was developed. That format was JPEG
(Joint Photographic Experts Group). This format differed radically
from GIF in that it overcame GIF's shortcomings. Along with overcoming
GIF's faults, the group used a number of studies on the human eye, and
what it can actually see. As a result, instead of GIF's 256-color limit,
JPEG went up to 16.7 million colors. Instead of storing an exact copy of
a scanned image, JPEG offered a very good approximation of it. Because
a JPEG image is an approximation, JPEG is known as a lossy
file format.
Portable PixelMap
There is one
It was originally designed as an intermediate graphic file format. It provides conventional color- and image-manipulation tools that you'll find on other graphics programs. Because PPM was originally designed on a UNIX platform, the tools are actually UNIX programs. PPM tools allow you to crop, scale, and rotate PPM files. Because PPM is just a text file, you can take any image from any platform, and use PPM's tools to manipulate it.
The tradeoff between PPM's versatility and machine-independence is the file size. A typical image can easily be 10 to 20 times larger if stored in PPM format. PPM is mainly used on UNIX computers, where people don't always have easy access to a graphics-capable terminal.
Although there are a number of factors in putting images into a Web page, the most important one is the file size of the graphic, which is how much disk space the picture takes up. Lots of different things affect how big the file size of the graphic is. Regardless of which graphic file format you choose, either GIF or JPEG, you have to be careful about its file size.
The reason the file size of the image is important is because it'll ultimately be seen by a user. Consequently, the file must be transferred to the user's browser to be seen, and the larger the file size of the image, the longer it'll take him to see your picture. While many browsers will show the image, large files can take a long time to view completely. Obviously, you'll want to keep the file size down to a minimum, so that it can be viewed as quickly as possible.
Size can affect you, too. Typically, individuals pay a company to store, and provide access to, their own Web pages. These companies have a limit of how much disk space the individual can use for his or her pages. People going over the limit usually have to pay for the extra disk space used. By keeping the file size of the image down, you will take up less of your allocated disk space.
So what aspects of a graphic will directly affect the file size? All of them. The number of colors used in an image directly affect how many pens are allocated. The more pens there are, the better the odds that there'll be more patterns. For each new pattern that exists, an image's file size goes up. While more colors don't guarantee that a file size will go up, it often does.
The resolution of the image itself, as with the number of colors, will directly affect the file size. The larger the resolution of the image, the bigger the file size will be. Similarly, the smaller the picture's resolution, the smaller the file size tends to be. The bigger the picture, the more you need to encode.
What will actually be displayed on the screen is also a significant factor in a graphic's file size (more details increase the size of the file for that image). The likelihood of having a lot of detail in an image is only a factor with scanned-in images because most image scanners pick up subtle differences from pixel to pixel. With each new shade that is recognized, another pen must be allocated to represent it.
Fortunately, all the factors that can increase the file size of an image can be controlled. Most paint programs, and a few image viewing programs, will let you affect all of these factors. By using the tools at your disposal, you can easily reduce the file size of a particular graphic. Because there are so many factors that affect the file size, you can modify whichever attribute would least impact your graphic.
The number of colors used by an image can easily be modified. Most paint programs have the facility to modify an image's color depth (the maximum number of pens an image can have). If the graphic you you want to use has a very large file size, you might want to decrease its color depth. For pixels that have colors that are no longer used, they are assigned a pen that closely resembles its original color. This color-matching routine is known as dithering.
It's also very easy to change the resolution of a particular graphic. A lot of paint programs let you resize, or scale, a specific image. Typically, when you scale an image, there's an option to keep the aspect ratio, which indicates the size relationship of pixels between the height and the width.
We now have a good understanding of what makes up an image, and how
to control its size. Now we have to apply this knowledge to the images
we want to put on a Web page. There are two types of images you can use
in Web pages, a custom image, or a scanned image. A custom
image is an image that you or your corporation creates from scratch. A
scanned image is a picture that has been scanned into a computer-readable
format. While the custom image requires more work to create, it offers
the most flexibility. A scanned image is best suited for product catalogs
or to put existing pictures into your Web
page.
A custom image isn't something that you get off the Net that you thought would be good to put in your Web page. It's a graphic that you took the time to create personally. Probably the biggest reason for using custom graphics is that it's extremely flexible. Instead of hunting around, looking for an image that'll fit your needs, you create what you need. Also, because it's an original picture, you don't have to worry about copyright issues.
One of the most popular ways you can put graphics into your home page is to take someone else's. While you're surfing the Web, you may come across a home page with a cool graphic. You can use your browser's functionality to simply copy the image off the page and onto your hard drive. Copying generally isn't a problem because most people on the Net aren't very restrictive about this sort of thing. Also, some of the images you might want to copy are small, such as horizontal rules, and most people don't really care about them. Some groups even encourage you to copy their images because of some political stances (see fig. 11.1).
The EFF encourages people to copy their blue ribbon, as a show of
support for free speech on the Internet.
However, a number of copyrighted images appear on the Net, and copying
them is illegal. Typically, these images are on the Net in the first place
because of some licensing
agreement between the copyright owner and the Web
site. The most commonly appearing copyrighted artwork that appears on the
Net includes daily comic strips. You can generally spot copyrighted work
because it's indicated as such somewhere on the graphic. If that's the
case, then you should contact the copyright holder and ask for permission
to use that image in your home page. Sometimes, he or she may want some
sort of royalty fee for the use of the image, but check to be sure. If
the copyright holder decides not to let you use the image, don't do it
anyway because he or can file a lawsuit and probably win.
Another reason for going to the trouble of creating a custom graphic for your home page is to have complete control over it. Some home pages have a collection of images that the Web author wants you to copy (see fig. 11.2). As generous as this offer may be, one distinct problem is that you can't control aspects of the picture. Maybe the colors in the graphic you want to use are radically different from what you were thinking of. Maybe the resolution (the graphic's dimensions) isn't right for where you want to put it.
Certainly, you could download the image that most closely looks like something you want to use and then modify it (see fig. 11.2). But depending on what the graphic is and how it was created, going to this trouble could be a time-consuming process. Downloading and modifying an image could easily take up as much time as creating your own custom graphic. This is especially true for the home pages that make ray traced images for anyone. You may be able to control certain aspects of the shape and lighting to be used, but you might not be able to tune everything you want.
Readily available images may be good for most people, but are they right for you?
Probably the best reason that you have for creating custom graphics
for your home
page is that the image you want simply doesn't exist. It's also possible
that the graphic you want does exist on some home page somewhere, but there's
no easy way to view all the graphics on all the home pages on the Web.
Perhaps the graphic you want to have in your HTML document is atypical.
Although a "No Llama Crossing" graphic may exist somewhere, how
hard will it be to find it?
After you decide to create your own graphic, you want to get started right away, right? Wrong. You need a number of things before you go about creating your custom image. Some of these items are just pieces of information about the particular HTML document into which you want to put the graphic. Others are questions that you can easily answer.
For creating specialized images that may or may not look realistic, you really need only a paint program. These applications are, as their name implies, programs that let you paint pretty pictures. Not only can you modify existing images, but you also can create new ones from the ground up. These programs are much more advanced than simple image viewers, as you can actually modify individual pixels. Paint programs vary widely in the features they have, but they all have a common set of functionality.
If you want to create realistic images, you need much more sophisticated tools, something that lets you do ray tracing and texture mapping. Ray tracing is the process an application goes through to mathematically calculate how an object looks when light from certain locations hits it. Texture mapping is the process of using a program to define the appearance, or texture, of things. You then take that texture and have the program apply it mathematically to an object (see fig. 11.3). So, if you were to have the program apply a plaid texture to a sphere, the program would figure out how to twist and shape the plaid onto the sphere. Both of these processes also take up a lot of computing time for the system to do all the calculations. As a result, you may have to wait over an hour or two to generate one graphic.
Texture-mapped graphics
look great, but can you afford them?
Ray Tracing
Ray tracing programs allow the user to create definite three dimensional objects. These objects have distinct sizes, shapes, and dimensions. You can manipulate these objects by reshaping them, or moving them behind other objects. You can also specify your viewing position in relation to the objects. But all of this is just a prelude to the power of ray tracing.
With ray tracing programs, the user specifies light sources. These light sources are used by the program to determine how the objects on the screen will appear. A light ray is mathematically shot through each pixel in the view plane. The program traces the ray back to a point on a surface of one of the objects. The ray is then further traced back to either another point on another surface, or a light source. The ray is repeatedly traced until a light source is reached, or the ray passes outside the viewing plane.
As you might imagine, this process is rather involved and requires a lot of mathematical calculations. And remember, this is just one process for one pixel on an image. Ray tracing is repeated for as many pixels as you want an image's resolution to be. So for a ray traced 640x480 image, you would 307,200 rays to be processed. Once it's done, however, the resulting image looking amazingly photo-realistic.
Because of the extreme mathematical computations involved in both these
processes, you need either a computer-aided design (CAD) program or a sophisticated
paint program. A CAD program lets you create objects with definite characteristics
such as size, shape, and position. Without physical characteristics, such
as those that CAD programs use, creating ray traced images is very difficult.
Similarly, texture mapping depends on physical characteristics to work
properly. However, some more advanced paint programs, such as Photoshop
and Fractal Design Painter, let you apply textures to regular images. Because
of the high costs of these types of programs, many people don't use ray
traced or texture-mapped images on their home pages. For most home pages,
a good paint
program is more than adequate to create custom graphics.
Another consideration you should look at before designing custom graphics is the page where you want to use the graphics. Take a look at the color scheme you're either using or planning to use on that particular HTML document. You should keep the colors in the graphic from clashing with the colors in the home page. Also, avoid making the graphic colors very similar to the home page colors. You don't want to put a yellow graphic on a home page that has a white background because seeing the image is difficult.
One last thing to consider before you go about creating your own custom graphics is the resolution. See where on the page you want a custom image and decide how big it should be. This consideration is very important because it dictates how much room you have to design your graphic. The more space you want to give to the image, the less space you'll have for any supporting text. Try to keep the image resolution as small as possible for your needs. If you have a button to go to the next page, for example, it shouldn't take up half the screen.
By and large, you probably use a paint program of some sort to design your custom graphics. Each program has different features that make it unique, but every one of them has a base of similar features (see fig. 11.4). Most paint programs have the following:
Paint is a simple paint
program that is included with Windows
95.
See Chapter 12 to learn about an imagemap graphic.
Now that you have the tools in front of you, you can actually create the image. You can use a number of approaches to get the look you want for the image. These approaches are all dependent on what you're trying to create and what certain "look" you're going for. Generally speaking, you'll want to use the geometric shape creation features a lot. You can easily create buttons using just rectangles and circles. Geometric shapes are also great for your imagemap graphic because you can create distinct regions with them.
To make parts of the image appear to be raised above the graphic's
background, just use a darker color, or black. Next, simply trace the right
and bottom edges of the object you want to appear raised. To make an entire
button appear raised, you can use a similar color trick. For example, if
you want to make a rectangular button appear raised, color the right and
bottom edges black. Then color the top and left edges white. The upper-right
and lower-left corners are a little tricky because they are special cases.
For these two corners, make the darker color be a diagonal line across
the entire border. You can also make the shading more noticeable by simply
thickening the lines of the darker color. Figure
11.5 shows a home page with buttons that use this shaded effect.
Simple color tricks can create interesting effects for your home
page.
When you're designing your graphic, try not to go into too much detail. That is, if you can avoid it, don't put in lots of small features into your graphic. If you're drawing a picture of the front side of a house, you don't need to draw the hinges. This desire for putting in minute touches to an image usually comes about if you've been working in zoom mode a lot. Remember that your graphic will be seen mainly by people through their browsers. The subtle things you put into an image probably won't be seen by anybody.
If you're creating two diagonal lines, and you want them to be identical, be careful. You should specify the endpoints in exactly the same manner, with both lines. In other words, if you specify the lower endpoint as your starting location for the first line, do the same with the second line. If you don't, it will almost certainly result in non-identical lines. You get this result because of a problem with the computer trying to decide exactly which pixel the line is a part of. By specifying similar endpoints as the starting location, you reduce the chances of getting different lines.
Just because you want to use custom graphics doesn't mean you have to create them by hand. If you want to add some fresh images not seen anywhere else, you can also use scanned images. These images differ greatly from hand-crafted drawings because they require less creation work but more touch-up work.
Use
Scanned Images Because you can simply create any image you want with a paint program,
why would you want to use a scanned image? It saves time. If you have a
graphic that isn't in a computer-readable format, you should scan it in.
Company logos, signatures, and photographs are examples of images that
you might want to scan. You can then put these images anywhere on your
Web site for whatever reason. The main company HTML
document could have the corporate
logo prominently displayed, for example. A letter from the president of
the company welcoming Web users could have his or her signature. Sales
literature can be beefed up with scanned photos of the products (see
fig. 11.6).
People have a better idea of what you're selling if you use scanned images of the products.
You need two things before putting scanned images to use in your home page. The first thing you need is a scanner, a device that converts physical documents into a computer-readable format. This process isn't as complicated as it sounds; fax machines do just this task. But because you can't hook up a generic fax machine to your computer, you need to buy a dedicated scanner. If you decide to buy a scanner, the most important thing to look at is how many DPI (dots per inch) it can scan. The more DPI it can handle, the better your scanned image will look on the computer. You should also consider getting a color scanner, rather than a black-and-white one, especially for product photos.
The second thing you need for using scanned images is a paint program. Fortunately, most scanners come bundled with some sort of paint program. The quality of these programs can vary greatly between scanner makers, but they are free with the scanner. You're not going to use it to create new images but rather to touch up existing ones. Specifically, you're going to touch up the scanned images. The big trade-off with scanned images is the image size versus image quality. Because you'll want to have as small an image size as possible, you're going to have to sacrifice image quality.
In addition to a slightly degraded scan quality, scanning has inherent
problems with it. You always find artifacts that show up on a scanned image
that weren't in the original. These artifacts show up as dots and splotches
on the scanned image. To help get back some of that quality, you need to
put it in by hand. That's where the paint program comes in.
To get a scanned image into a reasonable likeness of the original, you need to clean up the problems. You have to clean up obvious graphical problems and color problems. Both of these problems are often small and hardly noticeable. As a result, you need to zoom into the scanned graphic frequently while touching up. Before starting the touch-up process, however, make sure that the image is aligned correctly. Sometimes, the physical document isn't scanned in perfectly horizontally or vertically.
One example of obvious graphical problems is straight lines appearing jagged. For this problem, you should select the background color as the foreground color. Next, use one of your drawing tools to get rid of the jagged parts. Similarly, small chunks are missing in part of a graphic, use the color of the object and fill in those areas. You should also use this method to make somewhat unreadable text readable again. For dots, smudges, and smears that weren't in the original, simply get rid of them.
You should also clean up color problems in the entire scanned-in graphic. Many times, color scanners misinterpret one color between pixels. As a result, you get two pixels, one next to the other, and one of them is slightly darker than the other. In all likelihood, the darker color is the incorrect color, so you should remove it. To do so, just specify the lighter color as the foreground color, and draw over the darker color.
In almost all cases with graphics, you have to watch out for the colors being used. I'm not talking about choosing colors that are readable in your home page; I'm talking about how many colors you're using. Regardless of which graphic file format you choose, the more colors you use, the larger the image's file size will be. Because a larger file size translates into longer download times for the user, you should avoid using too many colors.
See Chapter 10, "Adding Graphics to Your Home Page," for information on which graphic file format is right for your use.
For the images that you create from scratch, the number of colors usually isn't a problem. Typically, most paint programs default to 256 colors, which is more than enough for most people. If at all possible, try to reduce this number further by using a smaller color palette. If you don't really need all 256 colors, then try to reduce the palette to 16 colors, which should be enough for most home pages. The user can have the paint program do the color reduction automatically.
This color problem really becomes an issue when you use scanned images. Because most color scanners misinterpret two pixels of the same color as being different colors, you end up using more colors than you need. After you use the color-reduction technique specified previously (see "Manipulating Scanned Images"), try to reduce the image's color palette as well. This way, you can reduce the file size noticeably, thus helping the people viewing your home page.
Windows 95 has a wealth of programs that can help you with different
parts of this chapter. But the ones that will help you the most are paint
programs. Fortunately, some good paint
programs are available as shareware
and commercial
software. Although commercial products are more expensive, they offer better
technical support. But for most home page authors, spending a lot of money
just to design custom images is not worth the price. Sadly, not many good
shareware
paint programs are available for the Mac.
A good overall paint
program for Windows
95 is Paint
Shop Pro (see fig. 11.7). This program offers
several geometric shapes to work with, as well as some color manipulation
tools. You can also resize and crop your images. Using this program, you
can deform an image into a variety of shapes and perspectives. You also
can define your own filters and masks and apply them to any image. Batch
conversion of multiple files into a different file format and the ability
to browse a directory full of pictures are also part of this shareware
package.
Perhaps the most impressive feature of this program, however, is the brush support. Numerous standard brush types are available, but the ability to define your own and the functions you can perform with them are simply amazing. It is available as shareware, but if you buy it, you get extra goodies. You get Paint Shop Pro for both Windows 3.1 and Windows 95, along with some sample images.
Paint Shop Pro is a good, general-purpose paint program for Windows 95.
Matt
Paint is a fairly straightforward shareware
color paint program for the Macintosh
(see fig. 11.8). Styled somewhat after the
original MacPaint program by Apple, this program offers all the basic paint
program functionality. It allows for the customization of brushes and image
selectors. The lasso in particular can be programmed to only pick up a
chosen set of colors. Perhaps most impressive of all is that Matt
Paint comes with a wide array of pre-defined color, and black and white,
fill patterns. Its zoom capability is hidden under the Goodies menu heading,
with the Fatbits menu item. Most of the common tools are available through
floating palettes, as well as an on screen undo button. For $25 Matt
Paint is a good paint
program for people on a budget.
Matt
Paint for Macintosh
is a good paint
program with all the basic features.
|
