Create It ~101; Basic HTML-images

Images

<img src="?"> places an image

Before you can put an image on a Web page, you need to know the name of the image file and upload it to your server.

My image is called "cube.gif,".

The HTML for my cube image will read like this:

<img src="cube.gif">

The picture looks like this:

Of course you would substitute the name of your image where appropriate. Note that there is no closing tag required on this tag. As you need to know your URL when creating a link, you should know where on the server your images are stored. You can get the specifics from the administrator if the information is not provided for you. Sometimes images are held separately from HTML documents in a different directory or folder on the server. This may mean your image path will look more like this:

There are two types of images usually used on web pages JPEGs and GIFs. These are the only two that can be viewed by most browsers without needing add-ons, plug-ins or special viewers, though with the rate HTML and browsers change, this will probably be a thing of the past soon.

JPEG OR JPG:

A graphics format developed by the Joint Photographic Experts Group. This format compresses the image, with some data loss depending on the degree of the compression. Used frequently for photographs. Quality of the JPG images are good with image file sizes being a good bit smaller than comparable GIF format images, making it nice for using with the aforementioned photos and with large images or ones with a large number of colors.

GIF:

Graphical Interchange Format, a graphics format developed originally by CompuServe, used mainly for computer-generated graphics such as buttons and bars and clip art style images. It is limited to 256 colors and since the compression is less than for JPEGs, GIF's take more space.

GIF 89A: This type of gif is one that deserves separate mention. GIF 89A's are "transparent", what this means is that they have been manipulated in such a way that they seem to float on the page. These are the type of gif you will want to use for most images on the WWW.
Animated GIFS: Another GIF with a note of its own, Animated gifs have become VERY popular lately and are an easy way to get some motion on your web page. These gifs are created by using special software.

Sometimes people accessing your web page will be using non-graphical browsers, have the image viewing turned off, or may be visually impaired. To make your page accessible to these visitors you should include ALT text within the IMG SRC tag. ALT text is a brief description of the image.

By including the ALT=cube those people viewing without ability to see images will at least know in this case that a picture of a cube is on the page in that location. This can be a particularly important consideration if you are using graphics as navigational icons.

Additionally, if you are using graphics, it helps browsers read your page faster to include the height and width of your image in the tag:

You can usually determine these attributes by viewing the image with your graphics program. Most show the height and width of the image displayed.

There is much more to consider about choosing and using images that should be reviewed by anyone creating web pages.

For example, loading very large images with a web page should be avoided as it can take way too long to have them come into view.

Some Additional Graphics Terminology:

Thumbnails:: Small size images placed on a web page, usually as a link to a larger counterpart. This gives the visitor the option to take the time to view the larger image at their leisure.
Inline Images/Graphics:: Images that are placed into the web page so that they are viewed when the page is loaded.
Icons:: Small graphic representations used for various purposes, such as a picture of a house used as a link back to a home page or a small picture of a speaker to indicate a sound file.
Buttons:: Similar to icons, used to provide a way to move around a web page, buttons are places upon which you "click" to be taken to other parts of the web site.
Bars or Rules:: Graphics which divide the page horizontally. Can be a simple line, much like the <HR> tag but are frequently more ornate and complex. Those yellow and black "construction site" bars are a good example!
Bullets/Balls:: Small graphics, frequently round in shape that are used to set off items, such as a list of links.
Interlaced Graphics:: Graphics created so that they progressively fill in at increasing resolution.
LOW SRC=:: An optional attribute for the <IMG SRC > tag, referencing an image of lower quality resolution (perhaps a black and white image), that will fill in first while the larger graphic loads over it.

Resources on the Web

Shareware for Viewing and Manipulating Images:

LView Pro

http://world.std.com/~mmedia/lviewp.html

Paint Shop Pro

http://www.jasc.com/

Webgrafx

http://www.group42.com/graphx.htm

Graphic Workshop for Windows

http://www.mindworkshop.com/alchemy/gww.html

Graphic Sources:

Below are a few resources relating to graphics on the WWW. You can perform a search on any number of search engines and come up with a long listing to look through that are sites full of gifs and jpgs. Instead of duplicating that, I have tried to give links to sites that are a bit different or provide a special type of information/service.

Image O Rama
http://members.gnn.com/dcreelma/imagesite/image.htm

Banner Generator Make a banner for your web page,
http://www.coder.com/creations/banner/banner-form.pl.cgi

Jolly Roger GIF Animation Gallery The site advises you can use the gifs there with a link back to the Gallery on your page. Includes a very good list of related topics.
http://jollyroger.com./animation.html

Online Transparency Tutorial A step by step guide to making gifs transparent.
http://www.vmedia.com/archives/clipart/tutorial/000.html

Pixelsite Create your on graphical text and images online.
http://beta.pixelsite.com/

All Animated Gifs Links
/homestead/siliconvalley/5114/anilinks.html

NeuroTec Text Animator Creates Animated Text Gifs.
http://www.neurotec.com/demos/textanim/

Clip Art Connection A search engine site for clip art.
http://www.acy.digex.net/~infomart/clipart/imsearch.html

Art Today Billing themselves as having 500,000 images. To download you must subscribe. For some people this arrangement may be a solution to the problem of copyright.
http://www.arttoday.com/

Daryl's Image, Ball, Line & Background Archive
http://www-engr.uvic.ca/~dstorey/Icons/

A+ Art Links to a number of sites with various types of graphics.
http://wyattweb.clever.net/aplusart/

GifBuilder Homepage A shareware program for creating your own animated GIFs for the MAC
http://iawww.epfl.ch/Staff/Yves.Piguet/clip2gif-home/GifBuilder.ht ml

Gif Construction Set Do your own animated GIFs for the PC.
http://www.mindworkshop.com/alchemy/gifcon.html

Animated GIF Recipe A step by step guide.
http://webreview.com/96/03/29/tag/index.html

Icon Bazaar's Other Icon Collections A good listing of links to graphics sources.
http://www.iconbazaar.com/others/

Return to Help Index

[email protected]