Graphics files that you can use on your web pages are in the .gif, .jpg or .png format. Other formats, like .bmp, won't work; you'll have to convert them into jpg, gif or png, using a graphics program.

What's the difference between the image formats?

Of the three, png is used the least often on the Web, as of this writing. Most images you see are in either the jpg or gif format. It's my understanding that some browsers won't recognize png, but that the newer ones do.

Should you use png? Most of the time, you won't have to. Png images can be clearer than jpg's (it shows more in text than in images), but I've seldom actually had to use png for anything.

My personal advice is to wait until all browsers display png's, before making too many of them, but to keep it in mind.

Jpg's are typically used for photographic images or anything with "dither" (areas where the color is not completely solid, but rather composed of different-colored pixels). They're usually higher quality than gif's, and therefore bigger (file size wise) and slower to load.

Gif's tend to be lower quality, smaller and faster to load. They also have special features: graphics with a transparent background are usually gif's (png's can also have a transparent background). You can also animate gif's. You need a special program to make animated gif's though.

Which format should you use?

Since most graphics programs can save your graphics in at least the gif or jpg format, you'll probably choose gif if you're doing a transparent background or if the picture is mostly areas of solid color, like a logo, cartoon or geometric design.

If your picture is a photograph-style picture or is mostly areas of complex colors, choose the jpg format.

What about compression?

Compression means different things to gif's and jpg's. A gif is naturally compressed since it uses large areas of solid color. As soon as the gif sees lots of the same color coming, it makes a little note to itself, like an abbreviation. It writes: "6 identical red pixels are coming!" rather than having to represent all 6 identical red pixels.

Compressing jpg's though means losing quality. The complexity of the picture is reduced. Try experimenting with different percentages of compression. Some graphics programs, like Photoshop, let you preview the image at different levels. Try to find a balance between the file size and the quality.

What's the difference between a graphic and an image?

There isn't any; the terms are interchangeable as far as the Web is concerned. To me, "image" connotes a picture, and "graphic" connotes an abstract design or background pattern, but that's just me.

[ top ]

Is downloading graphics off the Internet = stealing? Imo, no it is not. If you don't want people using your graphics, you shouldn't put them on the Web.

That said, it's well to use some common sense. You wouldn't want to copy some company's logo and use it as if it were your own. Change it! Do something with it. In short it shouldn't look as if your site were part of that other company's site.

If you see some original art, don't pass it off as if it were yours. (There's something of a fine line here but I've seen people do that.)

Finally, if you're operating your site for profit, it's well to be more mindful of your graphics. Decorating a not-for-profit page is one thing; using other people's images to make money is something else.

To download a graphic, right-click the graphic. You should get the option to Save Image As... or something like that...choose it. You'll get one of those download boxes.

You can change the name of the graphic if you want...and you should change it, if the original name is not particularly descriptive. But keep its original format, .jpg or .gif, and download the sucker.

Now you can use the graphic on your page.

Note: a quick way to find pictures of what you want, is to use google.com's Image engine.

[ top ]

The basic tag to place the image is as follows:

That places a graphic called foo.gif, which is 100 pixels wide by 50 pixels high, smack on the page.

Remember to upload foo.gif when you upload your HTML page. You upload graphics exactly the same way you upload HTML pages. If you don't upload the graphic, you'll get that lovely "broken graphic box" on your page.

If you're using an FTP program to do the upload, remember to upload the graphic in binary mode.

How do you know the size of the image? If you have a graphics editor, you can find out by opening the image in there. There's always a way to determine the size of the image, in pixels, from the graphics editor.

A quick way to determine the size of the image, is to open the image, by itself, inside your browser.

You do this the same way you open HTML pages inside the browser...just go to "Open File" or "Open File Inside Browser" or what have you, find the image file (you may need to change the setting inside the "find files" box to "All Files (*.*)" in order to see it), and open it. In Netscape anyway, the pixel size of the file is displayed in the title bar.

You can also scale the image down or up, by changing the WIDTH and HEIGHT attributes. I don't recommend this...it seems to me, it's just as simple to make a smaller or larger version of the image using your graphics editor. But it is possible to do and sometimes more convenient.

Finally, you can place images on the page without specifying their dimensions. Again, I don't recommend this. It makes the page slower to load, sometimes much slower, since the browser doesn't know how much space to reserve on the page.

[ top ]

You can "pad" the area around the graphic using:

HSPACE means "horizontal space." It pads both sides of the image; in the example, with 5 pixels.

VSPACE means "vertical space" as you'd expect. It pads the top and bottom of the image; in the example, with 8 pixels.

[ top ]

You can change the alignment of an image, although you won't usually need to do that. Most of the time, you can use tables rather than alignment to get the image where you want it. Typically, I use ALIGN when I want text to wrap around the image.

Here is an example:

This aligns the image to the left...text wraps around the image.

There are actually no fewer than 9 values for ALIGN, but again, you won't use all 9 of them regularly. A couple of them appear to have been "deprecated" (i.e., they're not gonna use them anymore). I've used "left" and "right" most often. But here, for your reference, is the complete list:

Since that's all rather confusing as hell, here is a demonstration:

text text text ALIGN="top" text (default) text text text text text text text text text text text text text text text text

text text text ALIGN="texttop" text (default) text text text text text text text text text text text text text text text text

text text text ALIGN="middle" text text text text text text text text text text text text text text text text text

text text text ALIGN="absmiddle" text text text text text text text text text text text text text text text text text

text text text ALIGN="bottom" text text text text text text text text text text text text text text text text text

text text text ALIGN="baseline" text text text text text text text text text text text text text text text text text

text text text ALIGN="absbottom" text text text text text text text text text text text text text text text text text

text text text ALIGN="left" text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text ALIGN="right" text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

[ top ]

Easy:

You may make the border heavier by increasing the number.

[ top ]

Here it is:

If you click on the image, you will be taken to our site. Note that I've turned the border for the image off; some browsers automatically put a border around images used as links. Also, I put the closing </A> tag right after the image tag. If your links are underlined, and you put the closing </A> tag on a line by itself under the image tag, you'll get an annoying teeny line right after the image.

Using ALT is a good idea:

In some browsers, the text you put in the ALT attribute will show up before the image loads. If your image is loading slowly, then users won't have to wait, if all they want is to get to www.foo.com.

You will also get the ALT text if you put your mouse over the image. Adding something descriptive lets users know what happens when they click the image.

[ top ]

You can tile the background of the body of an HTML page with an image, and you can do the same inside an HTML table.

The style sheet way of doing this is defined here: Using an image as a background. The attribute is this:

Put the URL to your image inside the parentheses.

For reference purposes, here is the old way of doing it:

BACKGROUND works for tables, table rows, and table columns as well.

[ top ]

Remember that many people still use dial-up modems. They may not be the 14.4 speed modems of yore, but even the fastest dial-up modem loads images more slowly than a high speed connection.

If you're developing your site using a high speed connection, try testing out your site on someone else's dial-up modem connection. Another way is to preview the download time of your image in Photoshop or any other graphics program that has that feature.

If there are many large image files you want to use, try making thumbnail links to them rather than placing too many large images on one page.

Use images judiciously. It's often tempting to plaster your pages with images, but this is counterproductive for two reasons: one is the slow-loading factor; the other is that, unless your site is explicitly an art site, your users will be looking for content. Many sites lacking in content try to make up for it by overly using images.

[ top ]