Save for web tutorial
Most graphics editing programmes have a save for the web facility, but I am using photoshop, for most of my tutorials.
Step 1: Go to file then move down to 'Save for Web', in the dialogue box you will see four tabs at the top, left hand side, click on 4-Up. Depending on your image size, you should see something similar to my image below. If you can't see the whole image, go to the bottom left hand corner of the dialogue box you will see a drop down box with the zoom function, default 100%. As my picture is quite big, I chose 50% to view the entire image, but by zooming in (see zoom tool in tools palette, top left) you can view certain areas for close up optmisation results.
The first box is the original image not optimised at all, as my dialogue box is to small for you to read, I will tell you my original image is far to big for any web page, it is 2.25 M. This would take far to long to open, and your visitors would probably go elsewhere. You should play around and look at all three of the other boxes. Here I am using the second box and have chosen the jpeg format from the drop down box, found near the top, right hand corner of the dialogue box. You also have other formats, the gif, png and WBMP. The last one we will not be talking about, as it is not necessay for our purposes. Just underneath this is a quality control dop down box. Play around with the maximum, very high, high, medium & low settings, to see the way the size and the download time varies. This is important to look at, as what you are after is the best quality for the shortest possible download time. On my picture the 'maximum' setting comes out with a size of 351.2k, and a download of 126 seconds. This is a bit to large and more importantly, the download time of 126 sconds is far to long. As you can imagine each time you reduce the quality the size and download reduces. The medium setting comes out at 52.31k with a download of 19 seconds. I am going to choose this one, but I could have got away with the low setting of 32.75k and download of 13 seconds, as the quality has not altered much. The choice is up to you, just be aware of the amount of images on any one page.
Step 2: Once you have chosen your format and quality setting, click save in the dialogue box, then name and save to where you are keeping your web images.
If you want to save an image which has a transparent background, you will need to choose either a gif or a png format. I have found that the png format works better with some images, although it is not supported by some browsers. At the bottom of the dialogue box about three quarters of the way along there is a globe, use this to view your image, to see how it will look in a browser window.
PS. In case you are wondering, it is John Wayne in the photo, with my daughter Natalie, who visited Madame Tussauds in London last year.