Are you losing visitors to your web site due to slow page load times? Is your site being penalized because
images on your site are too large? Are you able to capture your visitor’s attention in first 10-15 seconds that they are on your site?All of these problems can be caused by an improperly optimized web page. In other words, page loads too slowly and your visitor leaves before you have had a chance to hook them.
Optimizing a page for quick load times can be broken down into 3 broad categories: basic coding of page, scripts that are used on page, and images. Of these three, images that are too large can have most significant impact on load times and therefore have greatest potential for improved page loading times if properly optimized.
A brief primer on image types
There are many image formats in common use on web sites, three most popular being GIF, JPEG, and to a lesser extent Flash content. We will be limiting our discussion to GIF and JPEG images, with a specific focus on still images.
Each of these image formats has their strengths and weaknesses. GIF or Graphics Interchange Format was developed by CompuServe before Internet boom as a way to share images on CompuServe service. Due to limitations with screen resolutions and color depths at time, GIF images were limited to showing up to 256 colors, more colors were imitated by Dithering, a process of fooling eye into seeing one color by using 2 or more sets of color dots spaced too closely for eye to distinguish separately.
Imagine a chessboard with black and white squares. When viewed closely we can distinctly see individual squares, but if we back off far enough we will no longer be able to discern individual squares and instead we will see one large grey square, black and white squares merging together in our eyes to form one solid color. This is concept behind dithering.
The JPEG file format on other hand is a newer format that can handle millions of colors easily. The initial drawback to JPEG images is that they do contain many more colors, and each color requires some coding for display, making file size larger.
Speeding up image load times
The main idea behind making an image load faster is to make file size smaller. This can be accomplished in two ways, you can either make dimensions of image smaller, or decrease amount of coding that is required to display image.
The easiest way to reduce an images file size is to reduce image’s physical dimensions. In other words, smaller image, smaller file size. Imagine an image that is a square 80 pixels by 80 pixels. The number of pixels contained in image is 80x80 or 6400 individual pixels. If we reduce image size by one half to 40 pixels by 40 pixels we then have 40x40 or 1600 pixels. So reducing image size in half reduces file size to one fourth of original.
