Section • Inside • ZipArchive • Samples • Tutorials • Banner Factory • Forum

Images

Why images? The reason for that is, I think, pretty obvious. A web page with only text is rather boring. Images (or graphics) are necessary to lighten up the page and make it more enjoyable for the visitors. However, using too many or too big images slows down the loading time of the page and can result in visitors hitting the back button. The number of images on a page vary and depends very much on what your site is about. If you have visited my photo site you may have noticed that I use quite a few images there (not including the photos). You may also have noticed that most of the images are fairly small and therefore don't slow the page's loading time down too much. Regardless of the number and size of the images it is important that they have some connection to what the site is about. On my photo site the majority of the images have something to do with photography. Apart from looking great (oh, well) they clearly show what my site is all about: Photography. If I should place a picture of a car there it would look out of place since my site has nothing whatsoever to do with cars. Check out my photo site by clicking the banner!

Menu • Fonts • Colours • Background • Indents • Tables • Linking

Photos and thumbnails Since I have been going on about my photo site I will start with telling a little about using photos. As you might have seen I am using thumbnails in my photo galleries. Since thumbnails are small (although they don't really have to be) they load fast and you can have quite a few on one page alone. There is really no need to have your photos loading in full size. If the photos are big (most photos are) your page will undoubtedly take a fair amount of time to load. Using clickable thumbnails your page will load much faster. I know I have said that already but it is important especially if you have more than one page with photos. This is what a common thumbnail looks like This is the size of thumbnail I use in my galleries. Needless to say a picture this small loads fast which is essential since I have about 24 galleries. The full size photo you get when you click the thumbnail (not this one!) covers most of your screen (if you use a 800x600 resolution). If you only have a few photos on the page there is really no need for a thumbnail this small. Below are two examples of larger thumbnails I strongly recommend the use of thumbnails, just keep in mind that they need to be uploaded also. Note: I will not go into how to link photos and other images to web pages because there is a whole page here dedicated to that subject. Other kinds of images Far from all web sites have photos on them but most, if not all, of them have some kind of graphics: Buttons, bars, titles, logos and of course banners (I use them all, as you might have noticed). Graphics as well as photos need to be fairly small to prevent the page from taking too long to load. Still, even if the images are small too many of them can slow the loading down considerably. Even if the images on a page look great individually they may not look all that great put together. Therefore, some sort of theme is needed (in my photo site the theme is photography). The colours are also of great importance (See the colours page). If you use animated images don't put too many on one page. It will only distract the visitors attention, and it can also be very annoying. GIF images with transparent background are nice. Whether you make them yourself or get them from the Net there is one thing you should be aware of: The colour used for the background. Although the background is transparent the pixels closest to the image still holds the background colour. Take a look at these cool GIF images. These are the same image saved with different background colours. The one to the left has a dark background colour which, when placed on a page with a light background, gives the image a rough and ugly looking edge. The image to the right has a light (actually white) background and blends in nicely. If we place the images on a dark background we get a reversed result. As you can see it is now the one saved with a light background that looks rough and ugly. Therefore, when saving images as GIF:s make sure you give them the same background colour as the page you are going to use them on. If you have got the image from the Net you will have to save it as a .bmp and use a program such as MS Paint to remove the disturbing pixels, and then save it as a GIF again with the right background colour. Of course, you can also change the background of the page to match the one of the image. Some words about graphic formats The most common format used is probably GIF (Graphic Interchange Format). It only supports 256 colours but they are dynamic, which means that if you save an image that contains only 16 colours the GIF image will only contain these 16 colours and you will get a smaller image as result of that. GIF is also a lossless format which means you can save and resave a GIF image without any loss in quality. Almost as common and popular is JPG or JPEG (Joint Pictures Expert Group). It supports up to 16 million colours which makes it a perfect format for photos. The compression is also harder than GIF, but you can adjust the amount of compression to suit your need. Just remember that JPG is not lossless so the harder you compress an images the more the quality suffer. You also loose a little in quality every time you resave a JPG There is also a third format which deserves to be mentioned here. I am referring to PNG (Portable Network Graphic). It is lossless like the GIF but supports just as many colours as the JPG. Like the GIF it can also be made transparent. Surprisingly few web hosts supports this great format but I think that will change as it becomes more and more popular.

b	-- Close this window to return to the main page menu! --