Forum Moderators: mack
I was wondering if you have any good recommendations for optimizing my download time for my site? Is there a good tool to use? Or is it just about keeping as few pictures/images/downloads or whatever off of your site?
I have tried to do as few images as I can, but it still seems to download a bit slower than I would like - Any good tips you can recommend? I run a sportsbetting site and have some sports pictures and links - I try to keep it limited cause I read it slows your site down....
thanks in advance -
Sizing the picture in the html does not affect the size of the image file behind it. You need to use some photo editing software to resize.
Of course your problem may be something totally different but that is the most common reason for new webmasters to have "problems" with images.
Image programs usually have a % scale that represents quality. Camera's set on fine detail will be using 100% quality, the image is still compressed but should not change any of the pixel values. A 3 mega pixel image is going to be about 1.2 to 1.5 MB depending on the content.
Most image editing application defaults to 90%, in my editor file sizes are reduced by about 50%, your 1.2 MB image is now 600KB. There is no real noticeable difference between the 100% and 90% unless you zoom and examine in deatail.
Images for the web usually set at 75% quality reducing it another 50% in file size, our 1.2 MB image is now approximately 300KB. This will start to show signs of degradation, fine lines become less detailed and artifacts will start appearing on edges where there is a lot of contrast.
How far you can reduce it really depends on the content of the image.
One thing to bear in mind, always keep copies of the originals. Once compressed anything lost is lost forever. Irfanview is great utility for performing common tasks like this and others on batches or single images.
--------------
The same can be done with GIF's by reducing the color palette and changing other attributes but you really need a decent GIF editing program. Not sure what capabilities irfanview has with GIF's.
Also, if you have ads, watch them. I've noticed some sites will hang for 2-3 minutes waiting for an ad to load up. If it's a commerce site, I won't wait, I'll go to the next site.
Hope this helps
The most important thing about this is it gives you a "third party" perspective, that is, a remote site going to your site, taking your Internet connection out of the equation.
It is best advised, however, to take these with a grain of salt - they will almost always tell your site is too heavy, has too many images, too many linked files. Right after looking at yours, enter the URL of 2 or 3 of your competitors and see how they stack up. The "benchmark" begins to become more clear, and how far you have to go to get the pages to load at least as fast as your competitors.
There are two things not mentioned here (explicitly) that make a VERY BIG difference in load time.
The first is the decision between jpg. and gif (or png as indexed color.) Another member here <wink> has drawn my attention to something I'd gotten complacent on with one of my sites, and that is image size.
On one particular image, the jpg was 65K. Turned the jpg compression down to very low, no "real" loss in quality - 25K. Okay big improvement.
But I converted it to a gif in 16 bit color - 8K. This is a long way from 65K.
The point is to use gif with a smaller color palette wherever possible - if your tiny arrow image will render fine in an 8 bit color palette, it will be a fraction of it's size in 64 or even 256 bit color. This is going to make a big difference. Images that are pictures of things or products, or contain smooth gradients, are likely to need to stay in jpg, but you can convert graphic elements to .gif with virtually no sacrifice in quality.
The other point is the idea of splitting up images into multiple slices to get them to load faster. There are two sides to this that you need to consider.
The first argument is that by slicing them up, the page will load faster because the images are smaller. In some cases, such as table layouts, you'll have no choice.
The problem I have with this is that even sliced up, it's the same amount of image area, same color depth, so it adds up to the same size. In addition, each slice is a request hit to the server, so slicing an image up may potentially take longer than leaving it in one large image.
In any case you'll have to try both, experiment, and use the free remote test websites to check your results - it's extremely important to take your connection and your browser cache out of the equation.
