How to add an image to a Web page?

As you've probably noticed by now, a Web page can contain not just text, but pictures as well. Oh, excuse me, they're actually called "images." Now, slapping a few pix on a page is simple enough, but there are a few little twists that are quite important. You need to know about these little gotchas, or else your Web images will loudly scream "Beginner!" to anyone who visits your pages. Of course, a beginner is exactly what you are, or you wouldn't be reading this, the Web design tutorial for clueless newbies. So let's start at the very beginning.

How to add an image to a Web page?

My friends, an image is included in a Web page by means of the IMG (image) tag. In its simplest form, an image tag looks like this:


The SRC (source) attribute specifies the name of the image file to be displayed. Like the HREF in an A (anchor) tag, the SRC statement must specify the appropriate path to the image file. This path can be absolute or relative. An absolute path specifies the complete URL of the image file, for example:

A relative path specifies only the path from the page on which the IMG tag is found to the image file, for example:

In this example, the image file is found in a directory called "images." For convenience, many site builders put all their images in one directory, often called "images," though you may call it whatever you please. The path in this example will only work if the "images" directory is under the directory where the referring page is found. If the referring page and the image file are in two directories at the same level, the tag would be so:


This tells the browser to go up one level, then look for the directory called "images."

If the image can't be found, or can't be displayed for any reason, you will see a little icon that's supposed to look like a "broken image" (in Netscape), or a little square with an X in it (in MS Explorer). If this is the case, it may be that the path specified in your IMG tag is incorrect. Try including the absolute path, and see if that works. Normally, relative paths are used whenever possible, as this reduces load time.

For clarity, I use ALL CAPS for the names of tags and attributes, but it doesn't matter whether you use upper or lower case. Be careful about case in filenames, however. Quite a lot of Web pages are designed on Windows systems, but served by Unix machines. Windows and Unix treat case differently, so always make sure that the filename specified in a tag is exactly the same as the actual name of the file on the server.

Web Image File Formats

At the moment, Web browsers can only display two types of graphic files: GIF and JPG (these are sometimes called JPEG, and have a .jpg or .jpeg file extension). These are both compressed file formats, designed to load fairly quickly in the bandwidth-deprived world of the Web. Both formats have drawbacks, and a newer file format called PNG is in the offing. It's worth reading this recent article about the PNG format, but it probably won't come into widespread use for a while yet, so we beginners will stick with GIFs and JPGs for now.

To create a GIF or JPG, simply save your graphic in the desired format. All the newer graphics software supports both. Which format to use? For technical reasons which we won't get into, JPG tends to look better for photographs, while GIF works better for other graphics. However, only GIF allows you to create transparent and interlaced graphics (details later).

Keep in mind that both GIF and JPG are compressed formats, designed to be used only for the final output of your creative process. Always create your graphics in the native format of your graphics software (.psd if you use Photoshop, for example), and make the conversion to GIF or JPG the very last step. If you need to edit your graphics later, go back to the original files - don't try to edit a GIF or JPG if you can avoid it. Sometimes you can get away with editing these files, but sometimes they come out looking terrible, especially JPGs.

Also keep in mind that even a cheap printer uses a much higher resolution (300 dots per inch or more) than does the (72 dpi) Web. Although it is possible to print a GIF or JPG image, the result will be very low-quality. Always print from the native format of your graphics software, or convert to a high-quality format such as .tif or .bmp. The moral of the story is always to keep your original (native-format) graphics files for future use. If you have a design shop creating graphics for you, make sure they give you the original Photoshop (or whatever) files, not just the GIFs or JPGs.

Graphics Software

Web graphics can be created with any decent graphics editing software, ranging from the humble Paint program included with Windows to big daddy Photoshop. Traditionally, the big distinction in graphics programs is between bitmap-based (Photoshop, Painter, PaintShop Pro) and vector-based (CorelDraw, Illustrator) systems. The former, sometimes called "paint" programs, let you work with photographs, and create graphics by specifying the color value for each pixel (Excuse me, greenies! A pixel is the smallest unit of graphic information - one little dot on your computer screen). Vector graphics programs, on the other hand, let you "draw" stuff using lines, geometric shapes, etc. Either type of software can export files in GIF and JPG format these days, so use the graphic editor of your choice.

Here's a little secret, though - Photoshop may be the industry standard, the cock of the walk, and all that, but it's pricey, and there are several packages out there that are almost as good, with much lower pricetags. Various graphics packages are available for free download in our Web Tools Download Section. One excellent and cheap choice is Paint Shop Pro.

Load Time

The load time of your graphics is of critical importance. The larger the file, the longer it will take to load, and graphics files can be very large indeed. Huge graphics that take forever to load are a sure sign of an amateur site, and they will chase visitors away. Fortunately, there are several things you can do to keep your load times reasonable.

The first is simply to be sparing with graphics. If a picture isn't worth a thousand words, don't use it. And keep them small. Paradoxically, a large image (more than about 300 pixels wide) is more likely to bog things down than several smaller ones. Consider breaking a large image up into smaller ones, and "mortising" them together with a table. Dave Siegel explains how to do this in his fine book, Creating Killer Web Sites.

Another important thing to do is to "optimize" your graphic files. Graphic files include information about the color palette of the image, which can be superfluous. By discarding information about colors that aren't used in the image, the file size can sometimes be greatly reduced, with no loss in quality. In fact, there are a number of little tricks you can use to slim down those bulky images, and several nifty shareware products that automate the process for you.

Another trick is to use the interlaced GIF format. An ordinary GIF (or JPG) loads in discrete chunks, like a carton being filled up with smaller boxes. With an interlaced GIF however, the whole thing loads gradually, a blurry image that becomes sharper and sharper until it's fully loaded. Like a tray of water freezing into ice (although hopefully a bit faster). Although it doesn't really load any faster (a fraction of a second slower, actually), it seems to load faster, and it's more convenient for the user, because they can get an idea of what the image is without waiting for the whole thing.

GIFs may also be made transparent. A transparent GIF allows you to designate one color to be transparent, meaning that the background will show through. Usually, the background color of the image is selected as the transparent color, so the image will seem to "float" over a Web page. A non-transparent GIF however, will seem to have a box around it. Most images will look better transparent. One exception is an ad banner. An ad banner should never be transparent, as it may be displayed on various different sites, and you never know what their background color will be.

Most graphics editing packages can simply save a file as an interlaced (and/or transparent) GIF, and there are also lots of shareware products that can convert existing files. For more on transparent and interlaced GIFs, see Bruce's tutorial on the subject, which also includes links to various graphic software for your downloading pleasure.

Attributes of the IMG Tag

The image tag can take several attributes, and it's important to use them correctly. See the Web Developer's Journal logo to the right?
Unlike our first example, this IMG tag includes lots of attributes. All are optional, but all are highly recommended. Let's look at them one at a time.

First, note that this image is also a hyperlink. To make a graphic a link, just put an A (anchor) tag around it as you would a bit of text. As you would with text, make sure that there is no space between the anchor tag and the image tag, or you'll end up with an ugly little "tick" next to the graphic. Also, make sure that the BORDER attribute is set to "0" or else a border will automatically be added.

WIDTH and HEIGHT Attributes

These tell the browser to set aside a box of the specified size for the graphic, so the browser can go on and continue loading the rest of the page while the graphic loads. If these attributes are not included, then the browser must wait to load the whole graphic before it can go on to the next item, stalling the page load and causing your visitors to mutter "Amateurs!" as they quickly click away to your competitor's site.

Make sure that your WIDTH and HEIGHT values are correct. If they're not, the browser will stretch (or squash) the graphic to the specified values, and it will look abysmal. HTML editors like Homesite can automatically calculate the values for you.

Well, has anybody caught my error yet? In correct HTML 4.0, values of attributes must be set off by quotation marks. Although

WIDTH=134 HEIGHT=28

still works, at some point in the future it may not, so it's better to use the correct form:

WIDTH="134" HEIGHT="28"

BORDER Attribute

This can be used to add a border to your graphic, if desired. If the image is not a hyperlink, the BORDER attribute can be omitted. If it is a link however, BORDER should always be set to "0", or a border will be added.

ALT (Alternate Text) Attribute

Often incorrectly referred to as "alt tags" (ALT is an attribute of the IMG tag), these are very important. The idea is to include a text description of the graphic, so that if the graphic fails to load for some reason, the visitor can get an idea of what it is. In fact, some people surf with images off, and rely on the ALT text to tell them which images they might want to look at. Also, current browsers will make the ALT text pop up whenever the mouse is positioned over the graphic (you can do this with hyperlinks, too - some call these "tool tips"). This can be used to display handy messages for a variety of reasons. Some even advocate including keywords in your ALT text, as some search engines use them to rank pages.

ALIGN Attribute

Notice how the Web Developer's Journal logo nestles there on the right, and the text flows around it? This is done by using the ALIGN attribute, which can have the values:

left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom

The related HSPACE and VSPACE attributes create a horizontal space and a vertical space, respectively, between the graphic and the surrounding text, with the value specified in pixels.

In fact, the IMG tag can take lots of other attributes, which you can use to do all sorts of nifty things. The ones described here are enough for a beginner to fool with, however. If you want to delve deeper into HTML, check out a good HTML reference book, or consult the help section of a good HTML editor - Homesite has an excellent, comprehensive list of all the HTML 4.0 tags.
Further Reading

* Designing Winning Ad Banners
...in which I tell how to create attractive, appropriate, attention-getting banners, using graphic tools like Photoshop or Paintshop Pro, along with animated GIFs, Java, Shockwave and HTML banners.

* Designing Attractive Web Pages
...in which I expound upon the art of designing attractive Web pages, of which graphic wisdom is no small part.

* Pixel Anatomy 101
...in which Mark Larmand gets down to details about optimizing graphics for the Web. You'll learn which format to choose, as well as how to minimize file sizes and maximize quality. Wondering about the "Web-safe" palette? Here are all the details on how to produce great-looking, fast-loading Gifs and Jpgs.

* Creating Web Animations
A step-by-step tutorial on creating animated images for Web pages. You'll learn how to use the most popular tools, and how to optimize your animations for minimal load time.

* Image Maps
An Image Map is a way of creating interactivity with the end user, but without the use of high-tech plugins or bulky applets. Just one image, a small snippet of HTML code, and the user's mouse are all that's required to turn a standard static graphic into one that can be interactive and even entertaining to Web site visitors.
contributed by, ABHISHEK SEO