Adding Graphics to your Web Page

Contents


Digital images

To add a graphic to your web page, you must have it in digital electronic form, you can't just shove your holiday pics into drive A: and hope for the best :).

There are many ways of getting digital images.

Download from the internet.

There are numerous sites on the internet where kind soles have uploaded graphic files that you can download ( generally for free) to your computer for use on your home page. Some authors ask for acknowledgment on your home page (nice to do even if not asked for), others stipulate non commercial use and others ask a small fee. Images cover virtually every thing but are hot on backgrounds, buttons and bars.

Here's a few sites I've found useful,

http://WWW.Stars.com/Vlib/Providers/Images_and_Icons.html The WDVL: Images_and_Icons
http://visiongrafx.com Vision Grafx Internet Home Page
http://rainbow.rmii.com/~lsmith/background/ Background Samples
http://clever.net/visiongrafx/backgrnd.htmlSeamless Tile Backgrounds For Your Web Pages!

since they change rapidly you should also search on some of the popular search engines.

http://yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming /Icons/Yahoo
http://altavista.digital.com Altavista
http://webcrawler.com Webcrawler

'Draw' one in a graphics program.

There are numerous graphics programs that allow you to produce images suitable for a web site, ensure you get a graphics program that allows saving in .gif (preferably 89a) format or get a converter program. Suitable graphics programs run from a few dollars to several hundreds, start small and work up.

Scan an original image.

A scanner is a device that literally scans an image and generates a digital image file. They work similar to photocopy or fax machine. Cost run from under a hundred dollars for a hand held gray scale to several hundred for a color one. As an alternative to owning your own, a lot of photocopy shops as well as some office equipment suppliers will scan an image for a small fee. Scanning is suitable for original art work as well as photographs. Most have a limit of 8.5"x14" or similar. Hand held scanners generally are limited to 4.5" width and need two passes for a letter size (A4) page. A low resolution option, if you have the facility, is to fax an image to your computer.

Photograph with a digital camera.

Digital cameras store the image in digital electronic form instead of using regular film. Costs vary but entry level ones start at about $500, with professional ones costing thousands

Using a video (movie) camera

It's possible to capture still images on your computer from a video cameras. One device 'The Snappy' makes this quite easy and costs less than $200 US and under suitable conditions provides better images than entry level digital cameras.

Photograph with a regular camera and get the image digitized.

Some companies will take your unexposed photographic film and provide you with regular prints as well as images stored digitally on a 3.5" disk. In the USA this is available from K - Mart and others ? as well as Seattle film works, by mail order. Generally this is fairly inexpensive and probably worth a try.

What format should the image be in ?

Digital images can be stored in a bewildering array of formats, each signified by a different extension eg .pic .bmp .wmf .wpg .tif .gif .jpg .cpt etc. etc. Many are specific to a single program and cannot be used with other programs. Fortunately things are simpler on the internet, only one formal is universally supported by all graphical browsers, that is the .gif format.

GIF was developed by Compuserve as the Graphic Interchange Format. There are two types of .gif images known as 87a and 89a. The first produces rectangular images the second allows the image background to become transparent (a transparent .gif) so irregular outlines can be achieved.
Regular .gif 87a transparent .gif 89a

Another format .jpg (Joint Photographic Experts Group) is also supported by most graphics browsers and gives good rendering of photographs. Frequently .jpg images are used as stand alone images rather than included in a web page. Many programs (graphics and scanner) allow saving in both formats there are also converter programs that allow conversion from other formats to the .gif or .jpg format.


Getting your image onto the Callig Computer

Email Jim for help, currently under review


Specifying an image on your Web Page

Once you have your image on the callig computer you can reference it like this

My cool pic

Which will the ALT text on a text only browser (or one with graphics turned of) like this

My cool pic

but gives an image on a graphics browser (with images on) like this.

My cool
pic

Of course you need to change 'mypic' to the actual name of you image, the ALT gives a description for those without graphical browsers


Reduce download time

Graphics files can be VERY LARGE and take forever to download. Many people will give up if your page takes more than a minute to down load , with a 14.4 modem this translates to about 100 KB (kilobytes, a byte is the equivalent of a single letter or other character). Text files are generally small and download quickly, graphics files can be much large and take a long time. Lets compare text and images. A letter size (A4) page of text takes about 2 KB and down loads in a second or two. The same size page scanned at 600 dpi . uncompressed will take 30 MB and even in compressed format will take hours rather than seconds to down load ! What can be done about this?

Use a lower resolution.

Although 600 dpi looks nice, when it is printed, a resolution of 100 dpi is good enough for a screen image, intended only for viewing. You didn't really want people downloading you high resolution images and printing them out, or did you?

Keep the image size small.

A typical screen shows 640X480 pixels or dots, so that at 600dpi an screen image represents an area of around 1"x.75", at 100 dpi it represents less than 6.4"X 4.8" since the viewing area on most browsers is smaller than full screen. So a full page image won't fit on most screens. Even so a full screen uncompressed image takes around 250 KB

Use "Thumbnails".

Thumbnails typically are small versions of a full size image or a part of a larger image. Since they are small they down load quickly and can then be 'clicked' on to down load the full image. Its a good idea to indicate the size of the full size image so the viewer knows how long to expect to wait and decide whether to download it or perhaps come back later when there is less traffic on the internet and download speeds are greater. Quite often the thumbnail image is in .gif format and the full size in .jpg, though some sites offer a choice of image formats.

To specify a thumbnail use the following

Its assumed in this example that the images are in a directory called graphics, which is the default for the Callig Web Site.


Click on image to see full size image

Full size image =28 kb

Full size image = 27 kb


In these examples the large pictures are not very large, my calligraphy won't stand too much close scrutiny :). It may not be obvious to the viewer that the image is a link, so a text note helps. Alternativly include a text link to the full size image.

Arrange the image to compress more.

Images saving in either the .gif and .jpg format are automatically compressed, the browser program uncompresses the image at the other end.

GIF

Images stored in the .gif format uncompress to the same as they were before, there is no loss of image quality. Images are compressed by looking for adjacent pixels of the same color across the image horizontally. Thus horizontal banding will compress more than vertical bands, Solid colors compress more than continuous tones, such as photographs and the fewer the number of different colors the better. images with only 16 colors will compress better than those with 256 or 16.7 million.

JPG

Images saved in .jpg format suffer some loss in quality but can be compressed more than .gif images so .jpg files are smaller than .gif. There are various degrees of compression available in .jpg which can be set when you 'save to' a .jpg format.

As a rough guide keep your home&ensppage to under 50 KB or better still start of with a text only index page and offer a graphics option.

Use the image more than once.

You may use the same image more than once, but it only needs to be downloaded once, this can be used particularly for things like icons, buttons, backgrounds & bars. Another time waster is when the 'image' only contains text on a fancy background, typically serving as a link to another web page. A repeated button image with adjacent text will reduce download time considerably


Background images

Images can be used as a background to your page, typically these are small images that repeat in a tiled arrangement. Background images are specified in the tag like this

Where bgtile.gif is the name of the background tile file. In this example the background color is set to White "FFFFFF" and the text to Black "000000". Be careful with background images, you have to be able to read the text over it!. Note, transparent .gif images will be shown against the background color.


For further help, clarification, comment or corrections e-mail Mike