In this exercise you will practice using the "save for web & devices" feature in Photoshop, a media industry standard when creating compressed images. Creating images that have visual clarity and small file size is extremely important in optimizing a website for viewing online.
File Format Exercise
- Download and 0pen the image of trees posted below in Adobe Photoshop
- Go to File / Save for Web & Devices
- Photoshop has 12 presets, save 1 example of each. Use self-descriptive file names and save them in your portfolio folder inside a new folder labeled "images"
- Create a new document in Photoshop that is 200X200 pixels, fill the image with a gradient, create a circular selection and create a new layer and fill the circular selection with another gradient, the colors can be your choice. Red is the hardest color to compress, it will show the most artifacts from compression.
- Go to File / Save for Web & Devices
- Photoshop has 12 presets, save 1 example of each. Use self-descriptive file names and save them in your portfolio folder inside a new folder labeled "images"
- Compare the results
- Create a new HTML file in your portfolio directory. Your HTML file must be UTF-8 and be properly formatted for validation, it can use the same CSS file that your portfolio page does.
- Choose the images that have the smallest file size, the best image quality and the best balance of file size and image quality. Embed these images on your file format HTML page.
- Create a link to your new file format HTML page in your Portfolio Page.
 |
| Images that have large flat areas of color such as blue sky can show compression artifacts |
 |
| Your gradient test image should look like this |
