Optimizing Images Using Photoshop

Optimizing an image means making the image file size as small as possible while maintaining acceptable image quality.


Other files are often called for in the HTML file's code

In order to understand why optimizing an image is important, please take the following into consideration:

Delay = lost visitors, lost business

Reducing file sizes

Limited file format options

There are a limited amount of image file formats that web browsers can display. They are:

web file formats best for meaning of the file extension
.jpg or .jpeg photographs Joint Photographers Experts Group

images that consist of solid colors

Portable Network Graphics
.gif small, brief animations Graphics Interchange Format
.svg images that can be described mathematically using vector graphic shapes Scalable Vector Graphics

What is acceptable image quality?

When image file sizes are reduced the resulting file quality is usually reduced. The specifics of what constitutes an acceptable image is subjective. Some of the factors that are taken into consideration are:

To judge image quality take these factors into consideration:

Typical format choices

For photographs, the best choice is usually jpg compression because I provides "millions of colors" and compresses file size more effectively than if png-8 or gif were used for a photograph.

For images that consist of solid colors with little variation in color (logos, solid color shapes and letters, cartoons) the best choice is usually png using the png-8 compression option which provides 8 bits of color, 256 possible colors. The png-24 or 32 formats result in very large files. The only situation when it is typically useful to use png-32 is when needing a soft edge blend of transparent areas of the png image with the background. The svg format can be very effective as well.

The gif format is best used for small size, brief animations. The other formats do not provide for animation. It is also allows only 8 bits of color information, 256 possible colors.

Here is an example of an image saved as a png-8 with limited colors and no dithering. Note the banding of color in the sky and reflection of the sky. This type of image, a photograph with very gradual changes of color, is almost always best compressed in the jpg format.

example of banding resulting from using png-8 with a photograph

Here is an example of when not to use jpg compression. This type of image will look best when optimized as a png-8 file.

Note that the term search engine optimization (SEO) is also frequently used with respect to the web. In that context, optimization means using tools and strategies that will increase the likelihood of a webpage appearing near the top of a search results page. Do not confuse the two different kinds of optimization.

With version CC2015 came the arrival of the File > Export > Save for Web (Legacy) which is what you want to use for this exercise. Prior versions used either File > Save for Web or File > Save for Web and Devices.

For this exercise you will be using the information in the section. But next, I want you to read this very informative page from the top until the end of the section Optimize an image for the web. The reading refers to using the Save for Web and Devices menu option, but the options are the same if you use any of the menu paths in the prior paragraph. Notes about the above page:

Next, read this page through the section Customize the color table for GIF and PNG‑8 images. Notes:

Saving images in the Photoshop .psd format prior to optimization

Additional references:


  1. Download the trial version of Photoshop. Click on the Photoshop Try button.
  2. Save this zip file, then right click on it and select Extract in Windows Explorer or just double click on it in Mac Finder.
  3. Change the names of both files so that they are prepended by your lastname-firstname-
    • For example, I would save the files this way:
      • vaughan-daniel-opitimize-graphic.psd
      • vaughan-daniel-reflection-p4lrn.jpg
  4. Open the two files in Photoshop.
  5. Save the lake reflection image as a Photoshop file: File > Save As > ...then, in the Format menu at the bottom, select Photoshop and keep the root file name.
  6. Based on what you have read, optimize each image.
    1. Optimize your files to be either jpg or png-8.
    2. Do not use png-24 or gif or the any other format.
    3. For png files, do not use transparency.
    4. As you make your settings, note why you made each setting.
    5. The settings that I will consider in my grading consist of the following:
      1. Why did you decide to use jpg or png-8 for the image?
      2. For .jpg files:
        1. What Quality setting did you make and why?
      3. For .png files:
        1. How many colors did you decide to use and why?
        2. Did you use dithering or not, and why?
        3. If you used dithering, what setting did you use and why?
  7. For the reflection file, use the Save for Web dialog box to set the image size to 50% in the lower right corner.
    • FYI, this is a deceptive percentage setting because it refers to the width and height, not the overall area. With a 50% setting the resultant area is actually 25% of the original.
  8. Check the file sizes of your optimized files you created using Windows Explorer or Mac Finder.
    • The term "file size" refers to the size of the file in KB, not its dimensions.
    • Your optimized files need to be much smaller than the original files that they are derived from.
    • The reflection ought to be a lot smaller in file size than the original because the image area is 25% of the original.
  9. Write an explanation of the optimization settings that you made for each of the list of questions I listed above.
    1. Put your explanations into a file using a file format such as .docx, .txt or .rtf - please do not submit a .pages file.
    2. Specify for every optimization setting that you made why you made that setting.
    3. Name that file yourlastname-firstname-explanation
      • For example, if I were to save my file as a Word file it would be named:
  10. Create a folder named:
  11. Put the following files into the folder:
    1. Both optimized files.
    2. Your written explanation.
    3. Please do NOT send the .psd Photoshop files.
  12. Compress the folder as a zip or rar file and name that file yourlastname-yourfirstname-optimize.zip (or .rar if that's the compression you use).
      • For example, I would name mine:
        • vaughan-daniel-optimize.zip
      • To zip a file in Windows right click on the folder > Send to > Compressed file
      • On a Mac right click on it and select Compress.
  13. Submit the file to me.