Image File Formats

In this class, you will gain intuition about the “size” of data. You will also consider issues of digital preservation.

Preparation

First, watch:

Next, install GIMP on your computer. GIMP is a free graphics editor, and we will use it in class. Bring your computer to class, so you will have it for the in-class activity.

In Class

You should complete this activity with a partner.

As you complete the activity, fill in the template shown under the “Submit” section.

Task 1: View the File Sizes of Six Photos

  1. Use your phone to take six photos of different things around the classroom
  2. Copy these photos from your phone to your computer, using the highest-quality possible
    • If you have Apple devices, use AirDrop
    • Otherwise, copying the photos via Google Drive works well
    • Don’t email the photos, since email often reduces the size of images
  3. Record the file sizes of each photo:
    • On macOS: Right-click on a photo, then choose “Get Info”
    • On Windows: Right-click on a photo, then choose “Properties”
  4. Using the table shown below, convert the file sizes (likely displayed as MB, or megabytes) to bytes

Discuss with your partner:

Metric Size
byte \(8\) bits
kilobyte (KB) \(1000\) bytes
megabyte (MB) \(1000^2\) bytes
gigabyte (GB) \(1000^3\) bytes
terabyte (TB) \(1000^4\) bytes

Task 2: Change Image File Formats

Many different image file formats exist. Each image format stores images differently, which can impact file size. Common formats are:

First, identify the file format of the photos you took. The easiest way is by checking the file extension: just right-click on the file, and choose “Get Info” or “Properties”.

Choose one of your photos for this activity and the subsequent activities.

Next, you will convert your photo to use a different file format.

  1. Open your photo in GIMP
  2. Choose “File”, “Export As…”
    • Name your file to distinguish it from the original photo (e.g., name it “reformatted”)
    • Click “Select File Type (By Extension)”, then choose a file type different than the original type (e.g., “JPEG image”)
    • Click “Export”, then “Export” in the window that appears

Record the file size of the reformatted photo, and compare it to the original’s size. Which is larger?

Next, try exporting your photo using a third image file format. Record the file size, and compare it to the other files.

Task 3: Rescale Images

Another factor that influences file size is the number of pixels in an image. Next, you will rescale a photo, to reduce the number of pixels in the image.

  1. Open your photo in GIMP
  2. Choose “Image”, “Scale Image…”
    • A window will open, showing the dimensions of the image, in pixels.
    • Reduce the width to 500 pixels
    • Click on the height, and you will see that it is updated automatically. This is done to preserve the aspect ratio, or else the image will appear stretched.
    • Finally, click “Scale”
  3. Choose “File”, “Export As…”
    • Name your file to distinguish it from the original (e.g., name it “rescaled”)
    • Click “Select File Type (By Extension)”, and choose the same format as the file you opened
    • Click “Export”, then “Export” in the window that appears

Record the file size of the rescaled photo, and compare it to the original’s size. Which is larger?

Visually compare the quality of your original image to the resized version. Can you see a difference? If not, try zooming in.

There is an inherent tradeoff between image quality and file size: the larger an image file, the more details it can store. Resize the original photo to several different dimensions, and record how the image quality and file size change.

Task 4: Draw an Image

Next, you will see how images created in an image editor compare to photos taken with your camera.

  1. Create a blank image by choosing “File”, “New…”
  2. Draw on the image using the paintbrush tool. For example, you might sign your name.
  3. Export the image as a PNG, and record its file size
  4. Add more details to your image, re-export the image, and see how the file size changes
  5. Once your drawing is complete, export a final version as a PNG, then as a JPEG

Discuss with your partner:

Task 5: Corrupt an Image

Finally, we will see the effect of changing a small amount of data in an image file. We will use a hex editor to make these changes. A hex editor shows a file’s data, without interpreting the file format. A hex editor shows data as 0, 1, 2, …, 9, A, B, C, …, F (i.e., hexadecimal, base 16). Programmers prefer to edit hexadecimal instead of 1s and 0s (i.e., binary, base 2), simply because hexadecimal is more concise.

  1. Install Visual Studio Code and launch VS Code
  2. Install the Hex Editor plugin in VS Code
  3. Open the folder containing your photos in VS Code
  4. Duplicate one of your original photos, giving it a different name (e.g., “corrupted”)
  5. Right-click on the duplicate, choose “Open With…”, then choose “Hex Editor”

Try making a small change to the image file, saving it, and opening the file in an image viewer. Can you still open the image? Does it look any different? Try undoing your changes, making different changes, etc., and see if you discover any patterns.

You should find that it is possible to make an image file unreadable with just small changes. Although you made these changes intentionally, they can also occur randomly as hardware ages. Skim these Wikipedia pages:

Discuss with your partner:

Submit

Upload a PDF containing:

Template

Update the file names, file formats, etc. based on how you completed the activity.

Also, respond to the bolded prompts.

Task 1: View the File Sizes of Six Photos

File Name File Size (bytes) Description
IMG_4001.HEIC ??? my desk
IMG_4002.HEIC ??? the projector
IMG_4003.HEIC ??? my backpack
IMG_4004.HEIC ??? ???
IMG_4005.HEIC ??? ???
IMG_4006.HEIC ??? ???

What do you think accounts for the differences in file sizes?

Also, include the images themselves, resized so they all fit on one page.

Task 2: Change Image File Formats

File Name File Size (bytes) Notes
IMG_4002.HEIC ??? Original photo
reformatted.jpg ??? Converted to JPEG
reformatted.png ??? Converted to PNG

Task 3: Rescale Images

File Name Width (pixels) File Size (bytes) Notes on Image Quality
IMG_4002.HEIC ??? ??? Original photo
rescaled.heic 500 ??? Looks blurry
rescaled1000.heic 1000 ??? ???
… … … …

Task 4: Draw an Image

File Name File Size (bytes) Description of Drawing
blank.png ??? A blank white canvas
line.png ??? Just a black line on the canvas
doodles.png ??? A few doodles on the canvas
… … …
final.png … My masterpiece, as a PNG
final.jpg … My masterpiece, as a JPEG

What do you notice when you compare the quality and file sizes of the PNG and JPEG images?

What do you think accounts for these differences?

Task 5: Corrupt an Image

Write a few sentences, summarizing the results of your experiments with image corruption.

Write a few sentences, answering whether you think digitization will make historical preservation easier or more difficult.

Learning Goals

Students will: