Nearly all web pages include graphics. These can be simple designs or photos.
Some web pages are graphically very complex. The web page you are looking at now has only one graphic. All the rest is text or colours generated by the html code of the page or from its style sheet.
Pages with very little graphics load into the browser very quickly.
Web pages allow two types of graphical files: the .jpg and .gif
These are different types of files and they generally are used for either simple graphics (the .gif) or for photos (the .jpg) although there is no hard and fast rule about this.
These graphics are produced by different types of image editing software. Examples of such software include Adobe Photoshop, Macromedia Fireworks or JASC's Paintshop Pro. There is a wide variety to choose from.
Graphics files can be compressed, making them much smaller (as files) than when they were originally produced. A photo taken by a digital camera is usually quite a large file - for example, 50,000 kilobytes. This can be compressed down to about 5 kilobytes without there being any loss of picture quality.
Generally speaking a .gif file is smaller than a .jpg image of the same width and height.
In some cases, web designers provide a low resolution image - this ia version of say a photo or graphic, which is much smaller in size than the original and loads very much more quickly. It might appear while the high quality resolution image is coming down the line to the web page.
With the advent of broadband internet these is less common than in the days of slow internet connections.
Images are placed on a web page by a bit of HTML code - this is img src - this gives the location of the image - usually in a folder on the server called images.
When an image is placed on a web page it should be given an ALT STATEMENT - this should be a sentence that described the content of the image, such that, if the sentence were read to a blind person, they would get an idea of what the image was about.
Animated Gifs
Some gifs can be made to look as though they portray movement. These are called animated gifs. They show a series of images that are different to each other, giving the impression of movement.
Looking for a way to make your home page more lively? Try using an animated GIF. An animated GIF is a moving graphic that you can put anywhere on your Web page, just like a normal graphic.
How It Works
A single .gif file can contain a series of images which, when strung together, create movement. When your Web browser downloads an animated .gif, it shows each image in quick succession. You've certainly seen this sort of thing on the Web, for instance, a drawing of a mailbox that opens and closes.
Tip: do not use more than one animated gif on a web page. They can be very distracting.
More complex visual effects can be achieved via a piece of software called Flash. This software is made by a company called Macromedia. The visual effects are called Flash Movies.
Dos and don'ts of images
DO
Make sure that you check the path to an image otherwise if its wrong you will get a broken link.
Store all images in a separate folder on the web server, such as /images/
Try to make your files sizes as small as possible. This will ensure your images load on to the page as quickly as possible. JPGs are capable of a lot of compression, particularly if they are photos.
Try to get the right file type for an image - photos should always be JPGs. Graphical designs should by and large be GIFs.
DON'T
Put more than one animated gif on a page. Animated gifs or movies are distracting. More than one makes a page very distracting and puts readers off.
Make images too large - big pictures take a long time to load. You can always link a thumbnail image to a larger version.
