Images are some of the most important visual effects that a website can have. They can also be the most disastrous. Some badly designed site decorations can turn an otherwise great website into something very undesirable to revisit.

Adding Images

To add an image, use the <IMG> tag. You'll need to add an SRC attribute which will give the URL or location of the image (which can be either relative to the server or absolute to the World Wide Web). If I uploaded an image called image.gif to this directory (or folder) I could place it on the page by typing this tag:

<IMG SRC="image.gif">

It is as simple as that. Optionally you can specify the size of the image with the WIDTH and HEIGHT attributes. Some HTML checking tools claim that using these attributes will help "optimize" your page and increase page loading speed.

Linking Images

You can link images in addition to text, which means you can create graphical interfaces and other navigation devices on your website. Writing something like:

<A HREF="nextpage.html"><IMG SRC="next.gif"></A>

...would link up your image, but notice that there would be a border (of the link color) surrounding it. That's where the BORDER attribute would come in. Set it equal to zero in your image tag and you will no longer see that pesky link border line.

Image Maps

Image maps practically require a program/utility to be generated by a fully equipped HTML editor. You will need exact pixel coordinates for all the areas you wish to make hyperlinks in your image map. I use AOLPress 2.0 (freeware HTML editor) and it uses a point-click-drag interface. Don't let the name "AOL" in the program scare you, this is a top-rated program :) It creates both a client-side and server-side image map for an excellent balance in loading times. MAPTHIS 1.31 is a freeware image map creation tool by Molly Penguin Software and you can download this self-extracting executable directly. CuteMAP, from the makers of CuteFTP, is a free utility to create imagemaps as well.

Low Source

LOWSRC is an attribute that you can add to your <IMG> and will result in loading two images - one on top of the other. It was created for a situation where you would want/need to load a huge image but don't want to make people wait for it all to load. Instead, it will first load a faster-loading image (that you specify in your LOWSRC attribute) and then replace that with the actual image (SRC). <IMG SRC="image.jpg" LOWSRC="framework.jpg"> would load framework.jpg first and then load image.jpg over it.

Introduction to Web Art

Welcome to the wonderful world of Web Art! This is an very exciting aspect of webdesign, where you can make virtually anything you can think up. With the right tools and some know-how, you will be easily producing web art like the best of them! And this is where you will start, in this introduction, I will briefly cover some of the more popular aspects of web art.

Generally, if you simply say web art, you can mean a whole array of things. So that no one is confused, know that I am talking about art that you create for you website; it should serve some kind of function, big or small, either as an interface or as a little logo in the corner of your page. Web art is an important aspect to web design. If you can master web art, then your site's design is in perfect equilibrium. =D

Color Scheme

Of course I don't consider myself a master of web art, but I do think i've learned a few pointers as time goes by. These pointers, I will pass down to you, I personally like a site that is simple and professional looking, but sites that are graphics intensive and have a great interface/design are also great. As you make your site, It's very important to have a common color scheme going, it really doesn't matter which array of colors you use, it's how you use them is what counts (i.e.=black+almost anything; blue+white; green and yellow, etc.).
[include info on the saftey palette and the colors]

Tools

Adobe Photoshop 5

Now that I've touched on color scheme, you need to make the art that follows your color scheme. What I recommend for producing amazing graphics is Adobe Photoshop 5 (28.1 MB demo download). This is a program with almost unlimited capabilities and can create the most amazing graphics for you web page if you just know how to use it right. It is the industry standard for producing top-notch images. Although at a price of $550 for the full version, it is very steep and out of the range for many users. You can try the demo version from the Adobe website, it comes with full capabilities, you just can't save. This is a great tool and also was used for the graphics on this very site. So if you can afford this great package and are serious about webdesign, this is a must have tool!

Paintshop Pro 5

This tool from Jasc Software is the first runner up when it comes to image editing applications, although not as good as Adobe Photoshop 5, it is packed with some great features, some of the same features that you'll find in Photoshop. The big plus about Paintshop Pro 5 is the great price, only $50! So if you're on a tight budget, but still want some of the same powerful features found in Photoshop 5, then be sure to give Paint Shop Pro 5 a look or download their current beta - version 6. You can try out the PSP5 demo to see if you like it.

Themes

Like the general rule of having a common color scheme, you also need a theme to your page. This is where the design and web art you create comes into play. You will need to make art that goes along with the rest of the site. For example, if you are making a site about hiking and the outdoors, you would want to have a rugged theme - not something futuristic and full of metalic-looking menus. The look that you give your site, for the most part, under your control; it's just up to you to make it. It's always a good idea to follow your theme because if you don't, you usually end up getting a page that looks totally out of sync, which is a characteristic of a beginning designer, and that's not why you're here. You want to become the Web's Greatest Designer of ALL TIME!! Well, maybe not that big...but you will learn how to make some great looking web pages and you will never hear the words "newbie" or "lamer" again.

Image Format

In the wonderful world of digital image editing, there are two standard formats to save your images as when they are ready for the web. Those two formats are GIF (*.gif) and JPEG (*.jpg).

GIF

Pronounced jiff or giff (hard g), stands for graphics interchange format, a bit-mapped graphics file format used by the World Wide Web, CompuServe and many BBSs. GIF supports color and various resolutions. It also includes data compression, making it especially effective for scanned photos [and animated graphics]. (PC Webopaedia)

JPEG

Short for Joint Photographic Experts Group, and pronounced jay-peg.

.GIF files are the standard file type for web animations today, even thougth Macromedia's Flash software is revolutionizing the way we create animations on the web (popularizing vector-based animation), .GIF is still there and widely used. It is also used for graphics that do not use many layers of colors, because .GIFs are limited to 256 colors. .JPEG on the other hand is the file format of the web that stresses more on the quality of an image, meaning bigger file size and the whole 16 million color palette range :)

How can you tell which format is better for your images? Take a look at them; do they look complex with color transitions (like soft gradients) or are they separated into distinct color areas? If your image is complex, use the JPEG format, otherwise stick with GIF. Choosing the wrong format could mean that your image is much larger than it has to be. GIF cannot handle fade in/out images and you will notice the difference in the way they are rendered. When you finish creating your images, upload them to a web server and try out a free online tool like GIFBot to compress them. If you are unsure of which graphic file format to use, choose the "Both GIF and JPEG" compression format option and you can choose the best of the group. Check out this image I put together for one of my websites and see the image quality changes with compression coupled with file size. There is a lot of soft color transitions, which makes JPEG the better choice.

	Original Image (JPG) Size: 14072 Bytes DL Time (28.8): 0:04
	Image with 63% compression (JPG) Quality: 70% Size: 5120 bytes DL Time (28.8): 0:01
	Image with 62% compression (GIF) Colors: 16 Size: 5246 bytes DL Time (28.8): 0:01

Notice that sharper image quality was retained by the JPEG for comparable compression benefits because of the number of color transitions (like the glow around the figure at the bottom left). GIF failed to render it correctly at that compression size. (notice the visible gradient lines around the figure and lack of vibrant colors that were in the original image). The GIF of comparable quality to the original image was actually larger in size. Not to bash GIFs, check out this example in which GIF was the way to go:

	Grey Potion (GIF) Size: 218 bytes
	Grey Potion (JPEG) Size: 3100 bytes

Image File Size

The file size of the images you put up on your site is VERY VERY important! You must keep in mind that if your images are too big and take too long to load, they will hinder the viewablilty of the site itself. Even if the images are spectacular, no one wants to wait there downloading for several minutes. Chances are, they'll just leave, and you don't want that happening. Attempt to compress your images if they take a long time to load. Cut out chunks of excess HTML code (especially if you use MS Frontpage 98 as an HTML editor), and hopefully, we're all one step closer to web utopia.

4 - Lists and Forms