Whatever type of site you are building, you will probably have at least one graphic on your site, even if it is just your company logo. If you can keep your pages to just one graphic per page, you are doing well! This means your pages will load very quickly.
However, most people have more than one graphic on their pages, especially if you include a logo and navigational buttons. As a result, certain technicalities have to be considered when using graphics, such as format, size and placement, so they don’t slow down your site.
As a general rule, your image should not be more than 50 Kb (Kilobytes) and less than 30 Kb would be the best solution. While these image sizes seem small, when you have more than one graphic on your Web site, all their sizes add up till you have a site which takes minutes to load instead of seconds.
And if you are creating your images yourself using a scanner or a digital camera, they should be created as “low resolution,” i.e. 72 dpi (dots per inch). They will still look fine on your monitor but the file size will be kept to a minimum.
Choosing the right format for your image will also help with your image size. There are a wide variety of formats images can come in but currently, there are only two which compress the image effectively enough to use on the Web.
GIF versus JPEG
If you have images you want placed on your Web site, they should be saved as either GIF or JPEG; the one you will choose depends on the type of graphic.
GIF (Graphics Interchange Format) is a type of image format which is used to compress image size for use online. Because it can only use up to 256 colours, it is the ideal format to use on the Web and it also reduces dithering. (Dithering means using random dots or patterns to mix colours which can cause a graphic to lose some clarity.)
You should save your image as a GIF if it only has a small number of colours such as a logo, cartoon or any other sort of line art. It is, however, not suitable for photographs.
If you have a photograph or complex piece of artwork, you should use the JPEG format. JPEG is another format for image compression and is best used for images with subtle colour changes as the format can incorporate more colours than a GIF. While JPEG files compress better than GIFs, they can take longer to load on screen than a GIF so whenever possible, use the GIF format.
In a nutshell, if you have a cartoon/logo, it should be GIF and if you are using a photograph, it should be JPEG.
Future graphic trend
As mentioned previously, up until recently, Web designers only had the two file formats, GIF and JPEG, to use on the Web. However, there is now a new file format available which is rapidly gaining popularity.
Called PNG (Portable Network Graphics), this format is designed to replace GIF and is more efficient at compressing image sizes and offers better image quality. Most of the newer graphic programs now support PNG files as do the browsers with varying degrees of success.
Right now, there are still “bugs” with PNG working with earlier browser versions, and even with the latest versions, so you should stick with GIF and JPEG in the short term, until PNG has gained more widespread acceptance and has become the industry standard.
Placing your images
The other consideration, once you have saved your images to their smallest possible size, is where they should be. Some graphic artists like to use graphics as background images, such as a watermark of the logo.
There are two problems with using images as a background. The first is that background images can be distracting and make the text hard to read. The only way to avoid this is to make it so pale that it can barely be seen, in which case you are better off without it.
The second problem with background images is that they load first which means customers who may have slower modems have to wait for your background to finish loading before they see any text about you or what you are selling. In the majority of cases, this means that these customers will leave your site, never to return, before they even know your company name! So avoid background images wherever possible.
Specifying image sizes
You can also save your customers time by making sure any images have their size specified on your pages. This is like leaving a “place holder” for your graphic. It means that while your graphic is loading, the browsers leave a box of a specified size for your image and then start loading your text while it is waiting for your graphics.
Your customers can then read your “message” while waiting for the images and are less inclined to move on to someone else’s Web site.
The HTML code to specify an image size is:
<IMG SRC=”example.gif” WIDTH=215 HEIGHT=285>
The “example.gif” refers to the name or source of the image. The numbers refer to the image’s size in pixels. Pixels are the smallest part of the image, or dots. If you don’t know your image’s size in pixels, open it up in a graphics program and change the unit of measurement to pixels.
Alternatively, go to a Web site whose images are approximately the same size as you want yours to be. You can right click with your mouse on any image on a Web site and choose “Properties”. This will also give you the number of pixels for that image.
Inserting hidden text
While you are working with your graphics, you might also consider adding “hidden” text to the graphics. This text tells the surfer what the graphic is, in case they have their browsers set to text only versions for faster downloads.
It also helps with the sight impaired. There are now programs available which read text from Web sites. If your graphic doesn’t have text behind it, the program can’t decipher what the graphic is.
To create this “hidden” text, you can either modify the picture properties in your Web site program, such as FrontPage, or you can include the ALT tag in the HTML code for placing the picture, shown in the previous example.
For instance, your HTML code should look something like this:
<IMG SRC=”example.gif” WIDTH=215 HEIGHT=285 ALT=”Description of picture.”>
This HTML code is not only specifying what picture goes where, to what size but also describes what the picture is. You won’t see this description on screen unless the browser is set to text only or the graphic is taking time to load.
