Photo Optimization

When using Photoshop to create images that will be viewed on a web page (PolyLearn) there are ways to optimize the file for small file size and browser compatibility. The smaller file size will make it easier for someone to view the file online so that the file can be viewed right in the browser.


Image Size

When placing an image on a web page your image should be only as large as it needs to be to display correctly on the page. If your image is too large (800 x 600) and you resize it on the web page editor (using something like Dreamweaver), the file size is not reduced, just the image size. If you reduce the image size in Photoshop to display the correct size on the web page you can save file space/size and allow the viewers to view the image quicker.

Note: Before reducing the image size, save the file (Save As) as another name. That way you will always have the original image that can be used later if needed.

From Photoshop:

  • From the Image menu, choose Image Size.
  • Change the Document Size, Width and Height to the size needed on the web page. Set the Resolution to 72 dpi. Click the OK button


Note: When changing the Width and Height, make sure the Constrain Proportions box is checked to keep the image size proportional.

Adjust Color Levels

Most images with white backgrounds will have a dull gray or pink color hue after scanning. To enhance the background (white) use the Levels tool. This can also be used to darken the black ink within the image.

From Photoshop:

    1. From the Image menu > Adjustments, choose Levels.
    2. Move the white arrow to the left to increase the white in the image. Move the black arrow to the right to increase the black in the image.

      Blackboard Blackboard
      Blackboard Blackboard
    3. Click the OK button.

Save As jpg/gif/png

To save a file for the web it is best to use the Save for Web tool in Photoshop. This will allow you to save a jpg, gif or png file that is optimized for the web and your viewers.

From Photoshop:

    1. From the File menu, choose Save for Web.
    2. Choose the file format.
    3. Note: choose jpg for photographs (shadows, people, etc.), gif for solid colors (logos, flat art, cartoons, drawings, etc.) OR png works for both.


    3. Click on the Save button.