Graphics 1 - The Essentials

<img src="graphic file name">


One of the best ways to create an impact with your web page is to add some graphics. Graphics can add color, depth and sparkle to a web page and can serve to catch the eye and retain viewer interest. For these reasons, web page headings are often rendered as graphics since, like book covers, these are the first things a potential viewer sees when surfing the internet.

Graphics are placed on web pages using the img element. Note that the img element is an empty element, i.e. no content appears between the start and end tags, and hence img only requires a start tag. The 'content' is your graphic file, the name of which is used as a value in the src attribute. The most fundamental syntax for rendering a graphic in a web page uses the img element with just the src attribute:


...where filename.xxx is the full name (including file extension) of the graphic you wish to display.

Like hyperlinks, you can either use relative addressing or absolute addressing. Relative addressing only requires the graphic file name as the value for the src attribute providing that the graphic resides in the same directory as the HTML file it is intended to be loaded in. Absolute addressing uses the full URL to the graphic as the src value thereby allowing you to place the graphic in any directory. Thus if the URL to your website is http://www.mywebsite.com/ and you keep your graphics in a directory called 'pics' then your source code would look like this:


...where mywebsite is your Second Level Domain name and filename.xxx is your graphic file name.

Similarly, if you were constructing a personal home page to be viewed offline, you could specify paths to graphic files on your computer. For example:

File Formats

Web graphics are generally served up in one of two formats: GIF or JPEG. Hence GIFs carry the .gif file extension and JPEGs carry the .jpeg or .jpg file extension.

Here are some more details:

• GIFs (short for Graphics Interchange Format) only support 256 colors hence they are best suited for simpler illustrations which don't require a fine gradation of colors. On the upside, GIFs retain their quality after data compression rendering a crisp, clean and reliable finished product. Two further advantages are that, unlike JPEGs, GIFs can be animated and GIFs can have their background colors rendered transparent such that the color of your web page will show through.
• JPEGs (short for Joint Photographic Experts Group) support 16 million colors and hence are much better suited for photographs and complex graphics employing a wide range of colors and gradations. JPEGs use what is known as a 'lossy' compression technique that reduces the quality of your image after compression depending on how much you compress it. When saving or converting your image to JPEG format, most graphic editors will offer a range of compression percentages to choose from. You will have to decide between greater compression and thus lower image quality or lesser compression and higher image quality.

Fast Loading Pages

The thing to keep in mind with both GIFs (especially animated GIFs) and JPEGs is that large file sizes can significantly increase the time it takes to load your web page. The typical web surfer is one of the most demanding individuals on the face of the earth and much discussion is devoted to the subject of how long they are willing to wait to see a fully loaded web page. A graph constructed using data from Neilsen/NetRatings (February 2003) showed that over 90% of typical web surfers using modems were willing to wait for a 35K page to load but only 60% of those same users were willing to wait for a 70K page to load.

A general rule of thumb is to try to keep your web pages between 50 and 60K (i.e., the sum total of the HTML file size and the graphics file sizes associated with it of which the most significant factor will be the graphics). Once your web page exceeds 100K in size, you can count on most web surfers using modems to be impatiently hitting the Stop or Back buttons on their browsers before your page has even finished loading.

Keeping your graphics file sizes small by optimizing compression of your JPEGs and taking care when constructing animated GIFs keeps the total file size of your web page small and makes for quick loading pages. This results in much less viewers throwing their hands up in despair and running out the door screaming, "This is taking too long!!"

You can take further steps to facilitate how browsers will load graphics on your web page by specifying your graphics' dimensions. You can also specify an alternate text which will show in the event that the viewer's browser is set to not display graphics...

INTRO

TOP

NEXT ~>