File Formats to use on a Web page
Preparing for Your Web Page that includes graphics
Common errors that prevent graphics showing on your web page.
When wish to place an image on a web page you actually place a link to the image file which is stored somewhere on the internet
<img src="image-name.gif" alt="Descripion of the image" width="32" height="32">
The code consists of the <img> Tag and the following attributes src, alt, width, height in HTML5
Specifies the URL of an image/ i.e, The location of the image file.
Specifies an alternate text for an image, usually a very short description this is used by speech readers for the visually impaired & also by search engines
Specifies the width of an image in Pixels for HTML5. Pixels or % for HTML 4.01
Specifies the height of an image in Pixels for HTML5. Pixels or % for HTML 4.01
<img src="images/man-climbing-tree.jpg" alt="Man climbing Palm tree" width="480" height="640">
The quality of your web pages can be greatly improved by the inclusion of graphic files within them. You do not require any additional programmes to do this. If you wish to create your own images or manipulate an image files you have, you will require a graphic editor program that saves work in the correct file formats, to do this.
The downside of images is that they greatly increase the download time. You will learn about how to minimise this problem, by using optimised image files, image files where the file size has been decreased in some way or other.
The things that effect the image file size can include, file format used, size of the image in width pixels x height pixels, number of colours used, the degree of file compression.
There are sources of free graphic files such as
Ensure you read the Copyright Section below before using anybody elses graphic files.
The following formats are suitable
A BMP is a Bit Mapped image.
BMP files are very large files and are not as suitable as the ones below as a graphic file for the Web.
That have 256 colours or less and largish areas of the same colour.
Attempt to use only web safe colours in gif images.
The best lossy compression occurs when areas of the same colour are in horizontal bands. Keeps sharp edges and this format is good for line art, cartoons, blocks of the same colour.
Reduce the number of colours used reduces the file size
JPEG is far superior to GIF for storing full-color or grayscale images full of fine detail such as photographs and images with continuous colour variations, e.g. gradient colouring, or intricate artwork.
The jpg format is ideal for Photographs
Not as suitable for line art as the gif format
The format produced by Adobe's Fireworks Graphic App.
Our suggestion is that you create a graphic folder and within this folder you create:
logical category 1
There are several possible reasons that can cause this:
The graphics on this page were produced by Xara Webstyle why not try this program with a free trial download.
Google Image Search. More than 250,000,000 images indexed in this search engine. Images may be subject to copyright
Menu Buttons, Background, images, Bullets,Dividers
Icons - Free & also pay for
Loads of web page graphics - Backgrounds, Buttons, Clipart, Graphics Bullets, Clipart Arrows, Banners and Clip-Art
Image backgrounds & Desktop Backgrounds
Fancy Text Logos
Render a Logo or Render a Button FREE
loads of free animations
IrfanView is a very fast, small, compact and innovative FREEWARE (for non-commercial use) graphic viewer for Windows 9x, ME, NT, 2000, XP, 2003 , 2008, Vista, Windows 7, Windows 8.
Download from IrfanView
The following is not the legal position but basically common sense tips I have picked up. Although I am talking about graphic files the same copyright laws also apply to text.
Somebody has put time and effort into producing a graphic files image and that person will own the copyrights to that image files. This right can be sold on to say a publishing company.
It is very easy to download graphic files from a web site. All you have to do is right click on the image and select the option to save it. Right clicking can be disabled by Java Script on the web page, but this is easily defeated by using a browser with Java disabled.
Using this downloaded graphic on your web page would be a breach of copyright, and you could be sued by the copyright owner.
If you wish to use other peoples graphics, then you must receive permission to do so. There is a certain amount of latitude given to students at colleges & universitys on web design or similar courses to use on line images in their course work, suitable acknowledgement should be given to the source & author. Presenting that work to the world from a non academic web site can remove you from that protection. The course will give you information on this.
Many of the free graphic sights will have a section stating the copyright policy. Read the small print to find out about this policy. Some of the common clauses are similar to the following.
The graphic is probably free to use:
You will also find Web sites that offer graphics for a small, or not so small fee. Some of these Web sites will also produce custom graphics to order.
Top .Placing a graphic onto a web page