Picture optimization:

Pictures, in my opinion, are probably the single biggest offender on most websites, so I'll be dealing with this in detail. I dont know how many sites I've come across using pictures which are so big in filesize that they take an eternity to display fully. Normally, once I see a huge delay in pageload time, I just leave immediately. I have better things to do than sit around waiting 1 minute for each page to load. Strange as this may sound, I've pointed this fault out to some site owners and their reply? "Ahh, sure I'll leave it the way it is for the moment, I'm happy enough with it". Then they wonder why there doesn't seem to be many visitors to their site??? Is your site one of these offenders? If so, now's your chance to sort it out. Optimizing your pictures is a cheap and simple solution to making your pages more user friendly.

There are three things you need to consider when placing pictures on your page.

• You'll obviously want to show the picture at it's best.
• Make the picture big enough for your visitors to see and admire
• Don't have the picture so big that the page takes forever to load.

Unfortunately, no.s 1 and 2 conflict directly with no.3 so we'll need to compromise to get the best result.

Picture Sizes Explained

This is where it gets interesting, you will need to pay special attention because lots of people are confused by picture sizes. There are two different sizes to consider when optimizing pics for your site. The 'filesize' which is measured in kilobytes (kb) and the 'dimensions' which are measured normally in pixels. I'll explain both here in detail using a picture to clarify.

PICTURE 1A

PICTURE 1B

Picture Dimensions: As I said earlier, this is measured in pixels and it is a straightforward measurement of the width and height of an image. The dimensions of the Picture in fig.1A above are the width, which is 200 pixels, and the height which is 258 pixels. How do I know that? Simply 'right-click' on fig.1A, down at the bottom of the list that appears, 'left-click' on 'Properties'. You can see the dimensions for fig.1A are given about half way down the list. Simple huh? Picture Filesize : Now what about filesize? Okay, look back up at the pictures, it's clear to see that picture 1 is the largest of the three when we're talking about dimensions, but the filesize of each picture tells a much different story. If you're struggling with the term 'filesize', it may help you to think of filesize in terms of weight as shown in fig.1B (just to help differentiate it from dimensions). It is in fact, the memory resources that are used up by your computer in order to show individual pictures. You can check the filesize for fig.1A yourself by 'right-clicking' on the pic, again go down to the bottom of the list and left-click on 'properties'. This time we want to look for size. You'll notice that the filesize for fig.1A is 7486kb

PICTURE 2

PICTURE 3

Why is this so important for me to know?
Ok, here's the deal, repeat the above process and check the filesizes for pic 2 and pic 3. Notice anything unusual? Hell yeah! Pic 1 and pic 3 both have the same filesize 7486kb, but how can that be? Pic 1 is much bigger than pic 3, it doesnt make sense, does it?. Actually, the reason that the filesizes are the same is because pics 1 and 3 are indeed the same picture, I've simply squashed the original pic into a smaller area with picture 3. The filesize for pic 2 is much smaller because pic 2 is a proper thumbnail of pic 1, ie, both the dimensions AND the filesize have been reduced and so it displays much quicker than the original. The thing we need to remember here is that pic 3 will NOT load any quicker than pic 1, it still hogs the exact same amount of memory. More on creating and implementing thumbnails in your galleries coming soon.