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:
- Whenever you click on a link, a request is sent to a Web Server for an html file to be sent back to you.
- The code in that html file will usually specify other files that are also needed for the page to look correct and behave properly.
- The HTML file and those other files usually need to be sent to your device and downloaded there.
- The amount of time that it takes for all the files to reach your device and be rendered by your web browser will determine when and how properly the web page will be displayed.
Delay = lost visitors, lost business
- The amount of time that it takes for a web page to be rendered properly depends on server speed, bandwidth between your computer and the web server, and, to a very large extent, how large those other files are.
- Studies have shown that visitors to web pages have limited patience for the time it takes for a page to load.
- An optimal load time in 2016 is about 2-3 seconds.
- Just five seconds is the average threshold time beyond which visitors will abandon their attempt to view a web page.
- That means that half the people leave in less than five seconds.
Reducing file sizes
- Image files are usually the largest files that need to be downloaded and therefore are often the culprit responsible for slow webpage load times.
- As a result, a lot of effort is made to minimize the size of those files.
- Therefore, it is in your interest as a web developer to reduce the time it takes for the page to load especially by reducing the file sizes of your image files.
- For code files, minification is used to remove unnecessary blank spaces. Blank spaces require code to be saved with the file even though you cannot see the spaces!
- More on code minification:
- For images, image file size optimization is used.
- Note that larger, higher resolution images almost always have larger file sizes than smaller, lower resolution images.
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:
- If the image is of a featured product or person, the image quality ought to be commensurate with that relative value or importance of what is depicted.
- For this reason, larger, higher resolution images with more detail are often loaded only as needed; smaller images are provided in the interim.
- If there are only one of two images on a page, then increased quality might be afforded those images without overly impacting download time.
- If there are many images to be shown on one page, then some additional reduction in quality may be acceptable.
To judge image quality take these factors into consideration:
- hair detail
- edges of objects
- jpg compression generates artifacting (distortion) along hight contrast edges.
- The distortion looks like dirty color. See the image below.
- bands of colors - an artifact of png-8 and gif when used with subtle shifts of tone, such as a gradient.
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:
- The web preview button will require you to locate and specify the browser you want to use.
- The download speed used for the displaying the time it will take for the image to download can be changed by clicking on the menu next to the download time.
- There is no need to take gamma values into consideration - they were only useful for CRT monitors which are now almost non-existent.
- You will not be using slices for this exercise. Ignore any references to it.
- Do not be concerned with the sRGB setting or meta data.
Next, read this page through the section Customize the color table for GIF and PNG‑8 images. Notes:
- Ignore any information below the above referenced section.
Saving images in the Photoshop .psd format prior to optimization
- Note that when the original file is saved as a Photoshop .psd file prior to being optimized, it allows for the information about the optimization settings and the location the optimized file was saved in to be saved as part of the Photoshop file.
- This provides a distinct advantage when you are required to re-optimize the image with different settings.
- Also, a Photoshop file allows you do create several different sizes of the image all within one file and optimize each individually if necessary.
- Finally, by creating a Photoshop file from the original image file you are not touching the original image, which is something you should not do. Original images should never be edited but set aside in case it is needed.
- Download the trial version of Photoshop. Click on the Photoshop Try button.
- Save this zip file, then right click on it and select Extract in Windows Explorer or just double click on it in Mac Finder.
- 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:
- Open the two files in Photoshop.
- 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.
Based on what you have read, optimize each image.
- For example I would name mine:
For the reflection file, use the Save for Web dialog box to set the image size to 50% in the lower right corner.
Check the file sizes of your optimized files using Windows Explorer or Mac Finder.
- Optimize your files to be either jpg or png-8.
- Do not use png-24 or gif or the other formats.
- Do not use transparency.
Write an explanation of why you decided to make the optimization settings that you did.
- Your files need to be much smaller than the originals.
Create a folder named:
- Put your explanation into a file using a file format such as .docx, .txt or .rtf - please do not submit a .pages file.
- Specify each optimization setting that you made and why you made that setting.
- For example, why did you choose jpg or png-8?
- Did you use dithering? Fewer colors?
- Why did you set what specific settings you made and why you made them for the files.
- Name that file yourlastname-firstname-explanation
- For example, if I were to save my file as a Word file it would be
Put the following files into the folder:
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).
- Both psd files.
- Both optimized files.
- Your written explanation.
Submit the file to me.
- For example, I would name mine:
- 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.