You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

Resizing/Scaling Images

In the section, we are going to progressively resize/scale images to better understand the relationship between image resolution and file size.

1. Create a folder called lab5.
2. Open the GIMP program. You can find it by searching on the start bar.
3. Download img4000.jpg to your lab5 folder by right-clicking and selecting "Save As..."
4. Note that this image is 4000px wide by 3000px tall and approximately 5.8MB.
5. Open the image that you just saved using GIMP. Use the top menu (File -> Open) and navigate to your lab5 folder.
6. So you can see the entire image, select the top menu (View -> Zoom -> Fit Image In Window)
   
7. Next, we are going to create progressively smaller versions of this file to better understand the relationship between image resolution and file size.
8. Resize the image by selecting the top menu:
   
9. Set the width to 3000px. Note that the height should change proportionally to 2250px.
10. Export the image by selecting to top menu:
    
11. Make sure you save the image in your lab5 folder and rename the file img3000.jpg:
    
12. Make sure the quality level is 95:
    
    Note: 100 is the highest quality level.
13. Repeat this process (Steps 8-12) and create the following smaller versions. Due to upgrades to compression algorithms, the sizes of each file may not be exactly the same as these, but you should notice a progression of smaller and smaller sizes.
    

Changing Image Quality

In the next section, we are going to progressively Export images using different quality values to understand the relationship between image quality and file size.

1. Open the original img4000.jpg image. Use the top menu (File -> Open) and navigate to your lab5 folder.
2. So you can see the entire image, select the top menu (View -> Zoom -> Fit Image In Window)
3. Export the image by selecting to top menu:
   
4. Make sure you save the image in your lab5 folder and rename the file qual90.jpg.
5. Make sure the quality level is 90.
6. Repeat this process (Steps 3-5) and create the following smaller versions:
   

Understanding File Resolution vs. Display Resolution

1. Download test.html to your lab5 folder by right-clicking and selecting "Save As..."
2. View test.html in Chrome to understand what it is doing. Each file has a different native resolution. We are testing how each file looks when displayed at 400px X 300px
3. Open test.html in Notepad++
4. For each image, add the file size as we did for the 4000px image, i.e., 4000px (5.8MB).
5. Based on this information, which file is the best to use when displaying the image at 400px X 300px? Explain your answer.
6. Put your answer right after the text of the image you selected. For example, "1000px (582 KB) is the best because..."

Understanding JPG Quality

1. In Notepad++, rename test.html to test2.html.
2. For each image, change the src to display the "qual" images instead of the "img" images. For example, change "img4000.jpg" to "qual90.jpg"
3. Be sure to include all the quality images:
   
4. For each image, change the info from the width to the quality level. For example, change "4000px" to "Quality 90"
5. Update the file size so it matches the actual file. For example, update the first image to "Quality 90 (4.5MB)"
6. In the img tag, change the display width from "400" to "4000" so you can see the images as their full native resolution.
7. Examine test2.html in Chrome.
8. Which image is the first one where you can see a visible loss of quality.
9. Note that the image with the next higher quality level may be ideal because it is smaller than the "Quality 90" image but may not be noticeably different. This is what we call an ideal quality level.
10. Which image do you think has the ideal quality level, i.e., smallest file size with no noticeable loss of quality?
11. To indicate your answer, make the text above the image bold and underlined. For example, if you think the "Quality 70 (2.4MB)" is ideal, use the strong and u tags to highlight this text.

Color Balance

In the next section, we are going to change the color of an image to understand GIMP's capabilities to alter the color of an image.

1. Open the img1000.jpg image. Use the top menu (File -> Open) and navigate to your lab5 folder.
2. So you can see the entire image, select the top menu (View -> Zoom -> Fit Image In Window)
3. Adjust the color balance:
   
4. Make the highlights more red:
   
5. Export the image by selecting to top menu:
   
6. Make sure you save the image in your lab5 folder and rename the file redhighlights.jpg.
7. Make sure the quality level is 90.
8. Repeat the process (Steps 1-7) and create two other versions by changing the color balance:
   greenshadows.jpg (make the Shadows more green) and
   bluemidtones.jpg (make the Midtones more blue)
   

Color Hue, Lightness and Saturation

In the next section, we are going to change the Hue, Saturation and Lightness of an image to understand these properties.

1. Open the img1000.jpg image. Use the top menu (File -> Open) and navigate to your lab5 folder.
2. So you can see the entire image, select the top menu (View -> Zoom -> Fit Image In Window)
3. Adjust the color Hue-Saturation:
   
4. Set the color saturation to the minimum level:
   
5. Export the image by selecting to top menu:
   
6. Make sure you save the image in your lab5 folder and rename the file saturationmin.jpg.
7. Make sure the quality level is 90.
8. Repeat the process (Steps 1-7) and create five other versions by changing the hue, saturation and lightness:
   saturationmax.jpg (set Saturation to maximum level) and
   lightnessmin.jpg (set Lightness to minimum level)
   lightnessmax.jpg (set Lightness to maximum level)
   purplesky.jpg (set Hue so that the sky is purple)
   bluegrass.jpg (set Hue so that the grass is blue )