Prepare Images For Web Pages



Earn Money
Per Click!





Color Schemer


Web Page Templates

Dynamic Drive

Javascript Source

Javascript City

Javascript Kit


Java Applets

The Html Help Guide

Preparing Images For Web Page Use

    It seems that just about everyone has a digital camera or an image scanner or both. These items are great for acquiring digital images (photos) for use on web pages. The problem is that the raw output from these devices is normally not ready to be displayed from the web. The file type, file size, and image dimensions are all factors that must be considered. We want the images to be viewable in all the major browsers and to not drastically slow down the load time of our web pages.

File Type:
    Many cameras and scanners output the digital images in .bmp (windows bitmap) file format. This format produces a large file size and also cannot be viewed with several major browsers. For these reasons, the images should be converted to the much more suitable .jpg file type. If your camera or scanner software does not have the option to save the images to the .jpg format then you will need to do this with a separate graphics application.

File Size:
    The file size determines the the download (display) time of an image. A 50 kb image, for example, will load and display in a browser 10 times faster than a 500 kb image. For a web page to fully load in an acceptable amount of time (within 20 seconds) you should keep each page, including all it's elements to 100 kb or less. This means you must use smaller and optimized images. I suggest that no image have a file size of over 50 kb and that only one of these images should be used on a single page.

Image Dimensions:
    This is the actual viewable size of an image (width and height) normally measured in pixels. Most cameras and scanners output an image to a specific dimension such as 640 x 480 or 800 x 600. These are large images and should not be used on a web page at their present size. There is no need to entirely fill a browser window with an image. I suggest a maximum image width of 400 pixels and the height being determined by maintaining the ratio during resizing. Also, the image file size is directly related to image dimensions. Tip: Never use the width and height commands of an image tag to resize an image. The file size will remain the same and this will only degrade the image quality.

    There are many software applications available that will do an excellent job of cropping, converting, resizing, and optimizing digital images. These applications can also put a nice sized dent in your wallet. If you are planning to be a serious web designer then you will need to invest in these tools. If you simply want to build a decent looking personal site there is an alternative. The freeware image viewer/editor IrfanView can do a nice job of preparing your images for general web page use. If you do not have this program go HERE to download it.

Join the Html Help Guide mailing list
Enter your email address.
Subscribe    Unsubscribe