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

What is acceptable image quality?

When image file sizes are 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:

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:


Instructions

  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 pre-pended 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 other formats.
    3. Do not use transparency.
  7. For the reflection file, use the Save for Web dialog box to set the image size to 50% in the lower right corner.
  8. Check the file sizes of your optimized files using Windows Explorer or Mac Finder.
    1. Your files need to be much smaller than the originals.
  9. Write an explanation of why you decided to make the optimization settings that you did.
    1. Put your explanation into a file using a file format such as .docx, .txt or .rtf - please do not submit a .pages file.
    2. Specify each optimization setting that you made and why you made that setting.
    3. For example, why did you choose jpg or png-8?
    4. Did you use dithering? Fewer colors?
    5. Why did you set what specific settings you made and why you made them for the files.
      1. Name that file yourlastname-firstname-explanation
        • For example, if I were to save my file as a Word file it would be
          vaughan-daniel-explanation.docx
  10. Create a folder named:
    yourlastname-yourfirstname-optimize
  11. Put the following files into the folder:
    1. Both psd files.
    2. Both optimized files.
    3. Your written explanation.
  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.