Overview
To add interest to a web page, you will want to add images to it. But you can’t just slap your favorite photo of your cat on a web page and call it good. There are a few tips and tricks to creating web based images that will make your web pages easier to navigate and load in your viewer’s browser.
The basic thing to remember about creating images for the web is this: smaller is always better. But how small? And what do I mean by “small?” Small in physical size on the computer monitor, or small in the actual size of the image file? The answer to that is: both.
Realize that those two aspects of image files are not necessarily equal. An image can fill an entire computer monitor and only be a few kilobytes large. On the other hand you can have a very high resolution file that takes up many kilobytes in size that is a very small image on the screen.
The most important of these two aspects for web work is the file size. The larger the file size of the image, the longer it is going to take for the image to download on your web page. So you always want to make sure your images are as small in file size as possible. This table might illustrate why you want to reduce your image file size:
| Typical Web page load time (in seconds) | |
|---|---|
| Modem Speed | Expected Load Time |
| 56k Modem | 5.2 Sec |
| Cable/DSL Modem | 2.2 Sec |
| T1 and above | 0.8 Sec |
It is said that if a web page takes more than 8 seconds to load, the user will become annoyed and will move on to another web page. If you have an images that are very large, the load time of your web page will go up quickly. So, how do you reduce the file size?
You will need an image editor of some kind. Adobe Photoshop is, by far, the best in this category, but there are many others that can be used including many freeware or online applications. There are also many shareware programs you could use that are specifically made just to reduce image files for use with the web. It doesn’t really matter which tool you use as long as you can alter the resolution and dimensions of the image and save the image in the proper file format.
If you need to know how to include an image into your web page using HTML, read this tutorial.
