To this point, you have only learned about structure and text tags. And that's pretty darn dull, if you ask me. So we have to spice up our pages. And what better way than images? (And of course, sound and movies, but that will be discussed in a later chapter.)
The Basic Image Tag
Before we can do anything, we have to learn how browsers incorporate images. Basically, images are treated as if they were just another type of character. The browser sticks the image into the text as if it were a big "a" or "5" or "?", as shown below:
| Image Demo #1 - Microsoft Internet Explorer |
|
Here is a line of text with and image |
Neat, huh? Well, how did I put that image in? I used the <img> tag. This is the tag you use whenever you want to insert an image. This tag is useless without the src= attribute. "Src" is "source", without the vowels. And that's exactly what this attribute if for; you have to enter in the source of the image, so the browser knows where to look. Think back to the background attribute of the <body> tag. You essentially type in the path that the browser must take to find the image. If you have no idea what a "path" is, you shouldn't be reading this. The path is the names of the folders that must be opened and the name of the file itself, like so:
The browser will look for the image named "image" in the GIF format in a folder named "images". You don't need to put every single folder needed to be opened; just the ones that seperate the HTML file and the image.
Once you have the source for the image down, you can start doing some things. You can change the height and width of the image using, obviously, the height and width attributes. Using pixel values, you can change the dimensions without having to change the size of the actual file. This way of changing dimensions is usefull if you have to use the same image in various sizes. You can save memory by using the same image file and changing the size in HTML, instead of a different image for each size. Be warned, though, HTML doesn't keep proportions if you only change one dimension. So here's a little example to show you how just by using width= and height= I can warp an image.
| Image Demo #2 - Microsoft Internet Explorer |
|
w30h35: 60x70: 30x70: 60x35: |
Next on the list of attributes is the align= attribute. Like the <div> tag's align, this will align the image to whichever side you want (left/ right). Aligning an image will create text wrapping, which is always lovely. If the align=left, then the image will be pushed to the left, so that text will wrap to it's right. And vice-versa for align=right. And here's a little example:
<p class=norm><img src="images/sampimg.gif" align=right height=35 width=30>Here's some text to show the text wrap. The align is at right here. And just a little more to show the effect...
| Image Demo #3 - Microsoft Internet Explorer |
|
|
Our next attribute is the border= attribute. Remember the hyperinks chapter? Well, just as text is underlined and turned a color to distinguish a link, hyperlinked images also have distinctions. The most notable is the colored outline bordering the image. Now, a bright blue border is really ugly, which is why you can specify the width of the border with the border= attribute. Values are in pixels. The default is a 2 pixel border.
<a href="somelink"><img src="images/borders.gif" border=0></a>
And our third to final attribute. The alt= attribute is used to provide an alternative message for text-only browsers, like Lynx. It's also a useful attribute because the alt= content shows up in search engines. This attribute can also be seen in Microsoft Internet Explorer 4 when you leave the mouse pointer over an image for a while. The alt= can have any message after the equals-sign; remember the quotation marks!
The next two attributes are most important for imagemaps. They have no real relevence to you right now, since you're probably scratching your head saying "What in the world is an imagemap?" We'll find out soon enough.
The ismap attribute has no values. This attribute simply tells the browser that this image is going to be turned into a server-side imagemap. That's it.
The usemap= attribute requires the name of the imagemap you are going to use; this attribute is used exclusively for client-side imagemaps. I don't want to delve too deeply into this right at this second, but I will tell you this: imagemaps contain two parts, the image to be mapped, and the actually map for the image. The map is a seperate element, so that's why you need to provide the name of it to work.
right
||ProjectCool||
Acceptable Image Formats
There are only a few types of image formats that the web allows. Three, actually. The most common and versatile of these is the Compuserve GIF format. GIF is an ancronym for "Generalized Information Format". There are actually a few subdivisions, GIF87a and GIF89a. This type of image format allows only 256 colors. GIF89a also supports something called "transparency". This means the background color will show through the transparent area. This particulary useful, especially if you have to reuse an image in several pages with different background colors. There are a few programs that will create transparency, such as GIF Construction Set 32. The GIF format is useful for small images such as bullets, lines, black-and-white line drawings; anything that doesn't have to be too realistic. GIF are also capable of animation, although you need a special program for that.
Images are great visual tools. They bring variety, color, and information that you could not achieve with just text. However, images can be quite large. Meagbytes large. And at a 28.8 kbps modem transfer rate, the reader could be sitting pretty for about a minute. Per image. But what if you could trim that size down? Well, you can.
Now you know how to create a visual mosaic that you will call a webpage! Wow, doesn't that sound better than saying that you learned how to make an image. Well, go on now, so you can learn to combine images and hyperlinks as a form called imagemaps.
Realistic images are best encoded in the JPEG image format. JPEG stands for Joint Photographer's Expert Group. As the name suggests, this format is a bit more realistic. About 16.7 million colors more realistic. This type of image is best reserved for pictures that need to be high quality, or need more than 256 colors. There are different types of compression and quality, from a scale form one to 10. To keep the file size down, don't exceed 5. That's all you really need. Sorry, no transparency here.
There's a third type of image format, . It is similiar to GIF, except it's only black and white. This format is almost never used. Just use a GIF instead.
Image Optimization
First off, figure out which image format you will want to use, GIF or JPEG. As a general rule of thumb, use JPEGs for photorealistic images and GIFs for icons (i.e., bullets, lines, drop caps) or images with less than 256 colors. But, there are always exceptions. Save your image in both formats and see which is better.
Alright, so you've got your format down. If you've chosen GIF, there are a lot of ways to shave off some data. First off you can fool around with the number of colors. This is referred to in technical terms as bit depth. Most imaging programs have a feature which will allow you to do that. You can reduce the bit size to about 8 bits, reducing the amount of colors that can be coded. Next you have the palette. Again, imaging programs have a feature to do that. The adaptive palette is the best, because it uses the palette of the reader's computer platform. Finally, there's the question of dithering. Dithering is the process of creating a color by alternatively placing pixels of different colors together, i.e., blue and green to make cyan. Dithering makes images look nicer, but they do add a bit of file size.
So you went and made a JPEG then. Well, there aren't as many options, but it's a lot easier. JPEGs are saved in a compressed format and a paticular quality. When you save a JPEG, you will get a menu allowing you to change the compression/quality level. In Adobe Photoshop, you are given a number scale from one to ten. Five should be your limit; there's not too much difference beyond that... except for the file size! Medium is the way to go.