Monday, September 7, 2009

Working with Images

With the WYSIWYG (what you see is what you get) editor, you can insert images as well, giving some colour to your website, BUT if you do not resize the images before you upload them, it can REALLY slow down your site!

If you uploaded an image, and the make it smaller by dragging the small blocks in the corners, this does not actually make the file size of the image smaller - it basically just "tells" the browser to display the image at that size - the original file size is still like it was when you uploaded the image, which can really slow down your website if the images are really big.

The best way to go about this is to make the pictures smaller BEFORE you upload them (remember to make a backup of the image first, and then make it smaller...)

A very nice little utility is actually one by Microsoft, and best of all, its free! There are actually a few of these handy little tools, but the one we can look at is the Image Resizer.

Click here and you will see a whole list of stuff, and on the right side of the page, you will see a link to download the image resizer (about 2 thirds of the way down...) - so download that, and install it.

What this tool does, is it adds an entry to the right click menu when you are browsing through your files. First, select the image/s you want to resize, the rightclick on them. It will look similar to this (in Windows XP that is...):



Note: you can select more than one picture at a time if you want to resize them all to the same size...

Clicking on Resize Pictures will open up a very simple to use dialog box that looks like this:



As you can see, pretty straightforward. Anyway, I always click the Advanced >> button, cause I'm usually not happy with one of the default sizes - this makes the Resize Image dialog look like this:



Go ahead and select the Custom option, and then just manually type in the size for the image. I usually make pictures that go on a website 400 pixels or so wide - width is the first of the two text boxes (height doesn't matter in this case). 

If you made a backup of your original image, you can go ahead and tick the "Resize the original pictures (don't create copies)" checkbox, but it's safer to just leave it unticked...

Click OK, and a copy of the image will be made, and that one will be resized (unless, of course, you ticked the Resize the original... checkbox), quickly and easily! Now it will be ready to go on your website. It will load nice and quick, which is something that your visitors will like!