Optimizing Photos using Adobe Photoshop

Our website is 100MB in size.  Although this may not sound like a large amount, it is more than ample for our usage.  However, if certain measures are not taken to insure that pages and pictures are of minimal size, this can fill up quick.  One way to do this is to optimize photos using Adobe Photoshop.

1. Open Adobe Photoshop.  Go to File->Open and locate the picture you want posted on your web page.  In this sample we will use Mrs. Madson's senior picture from high school (see Fig. 1).  Note the size of the picture in the lower left-hand corner.  1024 kilobytes (abbreviated as K or Kb)=1 Megabyte.  Therefore, try to keep your pictures under 100 Kilobytes.  To get the size reduced, go to File->Save for Web...

Fig. 1

 

 

2. In the Save For Web window (see Fig. 2), make sure you select the 4-Up tab.  In the Settings: field located below the Remember button on the right-hand side, make sure that JPEG Low is selected. Examine each of the four pictures presented and determine which is of the best quality and least file size.  The text below each picture refers to 1.)The format, which in this case is JPEG. 2:) Quality on a scale of 0 to 100 3:)Picture size in Kilobytes and 4:)The time it takes for the picture to download off of the web if you were using a 28.8 Kilobytes/second modem.  Since the four examples below are relatively close, we'll select the one in the lower right-hand corner with a quality rating of 2 and the 29.33K size.  Click on it once and then click save.  Find a location for your picture in the Save window and click the Save button.   

Fig. 2

3. Your picture is now optimized and ready to be inserted into your webpage.  To do this, in Frontpage go to Insert->Picture->From File... and navigate to the picture you just saved.