|Please stop by and visit my other sites:
First of all, use .jpg files for your photographs. This file type has millions of colors and will show off your photos to their best advantage. If you do try and use a .gif file for a photograph, it will reduce the number of colors tremendously, and your photo will look awful. If you are doing graphics, a .gif file will often be smaller in file size and will work better. .gif files have a maximum of 256 colors available. Both .jpgs and .gifs are acceptable file types for the Web.
People usually put too many photographs on a web page or too many large photographs on a web page, causing the page to take too long to load. A good rule of thumb is no more than 20 Kbs per photo in file size and no more than four or five photos of this size on a page. This is not as true today as it once was, but there are still people on dial-up accounts. Have some sympathy!
When you scan in an image, you should then use a program such as Paint Shop Pro to first trim the photo (take all the unnecessary background out of the photo so that your subject is the photo, not 10% of the photo). After you are done trimming the photo, save it and see how large it is (how many Kbs).
If your image is still over 20 Kbs, then you need to resize the image. A very important thing to remember is that if the photo takes up more than one screen on your web page, you have wasted your efforts. No one can look at something that's more than one screen; you cannott hold the parts of the image you have seen, scroll down, look at the rest of it, and piece everything together in your mind so that you see a whole image. Besides, if the photo's larger than one screen, I can guarantee you it's far larger than 20 Kbs.
O.K. So now you are an expert on doing a page with four or five photos on it! What if you absolutely must put more images than that on a page? Well, please don't make mistake #2.
A good way to put many images on your web page is to use thumbnails. Thumbnails are smaller images that are linked to a larger image. In other words, when you click on the thumbnail, you go to another screen which shows you the full sized image. This saves your viewers time.
Thumbnails are great, but a lot of people do them incorrectly. In order for any image to come up as quickly as it can, you need to measure both the width and heighth of the image in your HTML code. Now, you can take the full-size photo and remeasure it to make it appear smaller on a page (i.e., if your image really measures 400 x 600 pixels, and you measure it as 40 x 60 pixels), but guess what? It takes as long to load this incorrect thumbnail as it does to load the larger image. Some people will be groaning because your page will take so long to load.
To do a thumbnail correctly, you need to actually resize the image and create a thumbnail which is a smaller image, using a program such as Paint Shop Pro. Then and only then will your page will load quickly!
Is Paint Shop Pro paying me to do this page? Absolutely not! I have used Paint Shop Pro since I started doing graphics for the Web in 1996. It will perform every function I have listed on this page and far far more! It is very easy to use compared to the "big" graphics programs and costs far less than the $400-$600 you'd spend for one of the big graphics programs. This is a shareware program, too, which means you can use it for 30 days for free, before you buy it.
The third most common mistake with images occurs in email messages, not on the Web itself. A lot of people will send me an attachment in an email message (many are unsolicited), and they send a HUGE file, usually a photo. I recently received a photo that was 174 Kbs in size.
The thing you never know is what kind of computer, modem, browser, type of internet service, etc. that someone else has. Their hardware may not be able to download an email message with an attachment that huge. Follow the same rules as above in Mistake #1 for image sizes for email messages.