What's new

Reducing site Load Time Through Image Optimization

gurusmaker

Active Techie
Even though more and more Internet users switch to broadband every year, a large portion of the web's population is still running on good old dialup connections. It is therefore unwise to count them out of the equation when you're designing your website, and a very major consideration we have to make for dialup users is the loading time of your website.

Generally, all the text on your website will be loaded in a very short time even on a dialup connection. The culprit of slow-loading sites is mainly large images on your website, and it is very important to strike a delicate balance between using just enough images to attract your users and not to bog down the overall loading time of your site.

You should also go to a greater length and optimize every image on your site to make sure it loads in the least time possible. What I really mean is to use image editing software to remove unnecessary information on your images, and thereby effectively reducing the file size of your image without affecting its appearance.

If you own Photoshop, it will be obvious to you that when you save an image as a JPEG file, a dialog box appears and lets you choose the "quality" of the JPEG image -- normally a setting of 8 to 10 is good enough as it will preserve the quality of your image while saving it at a small file size. If you do not have Photoshop, there are many free image compressors online that you can download and use to reduce your image's file size.

On the other hand, you can opt to save your images in PNG format to get the best quality at the least file size. You can also save your images in GIF format -- the image editing software clips away all the color information not used in your image, hence giving you the smallest file size possible. However, saving in GIF format will often compromise the appearance of your image, so make your choice wisely!
 
Using sprites instead of individual image files is better than lowering the quality of your site's images, in my opinion. When your site has multiple images, it takes much longer to load it. However, with the use of sprites, loading time is drastically reduced since sprites are generally just one whole image. One image is obviously loaded faster than multiple images. Just do a quick Google on sprites and you'll get what I'm talking about  ;)
 
sallyphelps said:
Using sprites instead of individual image files is better than lowering the quality of your site's images, in my opinion. When your site has multiple images, it takes much longer to load it. However, with the use of sprites, loading time is drastically reduced since sprites are generally just one whole image. One image is obviously loaded faster than multiple images. Just do a quick Google on sprites and you'll get what I'm talking about  ;)
are you into it support ? your tips are so catching
 
zeal said:
sallyphelps said:
Using sprites instead of individual image files is better than lowering the quality of your site's images, in my opinion. When your site has multiple images, it takes much longer to load it. However, with the use of sprites, loading time is drastically reduced since sprites are generally just one whole image. One image is obviously loaded faster than multiple images. Just do a quick Google on sprites and you'll get what I'm talking about  ;)
are you into it support ? your tips are so catching
Thank you! I've some experience in web development :)
 
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS.
 
Top