Adobe Photoshop Tutorial. Copyright Michael B. Karbo.

  • Next chapter.
  • Previous chapter.

    14. Optimize for Web

    You have the image file peter plys.psd saved on the hard disk. The file is also read into Photoshop, where you see the content on the screen. There are three picture layers: the bear and the two backgrounds.

    Let us presume that you need a copy of the picture for a home page. You actually need 2 copies, one with each background. We will make those now.

    The image size

    The picture is a little too big for the home page, it is intended for. So we start by diminishing it.

    1.   The teddy bear is seen with the background that you produced, right? The pattern 2 layer hides the pattern 1 layer. That is ok, we start by making a copy of this picture.

    2.   Select menu items Image --> Image Size:

    3.   Now you can see that the picture measures 560 x 595 pixels:

    4.   It is important that the fields Constrain Proportions and Resample Image are checked. Then there will be no distortion in the proportions of the new image, and it gets the best quality.

    5.   Now enter the pixel measure 400 in the Width field. Then the program calculates the height to 425 pixels:

    6.   Click OK, or press Enter. Then the picture size changes. NOTE: do not save this version of the picture …

    7.   Then select menu items File --> Save for Web… :


    8.   That opens the dialog box Save for Web, which you will be using shortly:

    Figure 24. The dialog box Save for web enables saving optimized copies of your pictures.

    Save to web

    When you need to save a picture for internet use, you usually make an optimized copy. This means that you need to find a file format and a compression that is suitable for the particular task.

    Here we show a practical example on how the picture is saved in the JPG format.

    1.   Now you have the dialog box Save for Web on the screen (as in Figure 24).

    2.   In the right side of the dialog box you select the desired file format and compression. Try to select JPEG in quality 60 like here:

    3.   The large picture now shows the picture quality, which will result from these choices. You can read the file size below the picture. By us it is 72 KB plus:

    4.   A file size of 72 KB is probably a little large for a web picture. It will take 27 seconds to retrieve the picture with a slow modem (28 kbit), as you can read in the bottom of the field.

    5.   If the file size has to be reduced further, it will diminish the picture quality. Let us look at that. Start by increasing the enlargement to 400%:

    6.   Now you can use the hand tool (with space bar and mouse) to move the picture section. You can see how the picture quality will be in JPEG quality 60. Notice the fussyness around the details, they are a consequence of the JPEG compression.

    7.   Now try to change the JPEG quality to 30:

    8.   Now the image file will only occupy 35 KB, which is much better for web use:

    9.   But what about the picture quality? See for yourself, if you can accept it. The details are more blurred (see Figure 25), but that is not so significant when the picture is for web use. The viewers do not expect top quality; rapid opening of the image file is more important.

    10. We accept quality 30. Click on the Save button:

    11. That opens the dialog box Save Optimized As. Name the file plys_pat2.jpg, and save it in your work folder:


    12. Now you have saved a version of the teddy bear picture. You need to make one more. Use the Layers palette to hide the layer pattern 2 (remove the eye):

    13. Then you see the teddy bear on a flower field (with the background pattern 1 visible). This picture needs to saved for web also.

    14. Do that yourself; use JPEG quallity 30, and name the image file plys_pat1.jpg.

    15. Finaly close the file with Control+4 – now we are finished with the teddy bear for this time.

    Figure 25. You get a blur in the picture detail when the JPEG compression is increased.

  • Next chapter.
  • Previous chapter.

  • Adobe Photoshop book overview.