Lesson 4: Optimizing GIF Images


In this lesson, you will optimize the button you have created for exporting as a gif image. You will experiment with different export settings and then make comparisons regarding file size and image quality. Using the hide layer feature, you will adjust which button text is visible and export five different buttons.

Learner Outcomes

At the completion of this exercise, you will be able to:

  1. optimize and export gif images
  2. use layer visibility to streamline graphic projects


  1. Read the sections on "Image Formats" and "JPG and PNG Basics" in Webmonkey's Site Optimization Tutorial. Then, the instructor will demonstrate how to use the optimization feature in the graphics software being used. Export one of your buttons multiple times, using different settings each time. Next,compare the file size and image quality of the different exported files to determine the best settings to use.
  2. Toggle the hide layer feature to change which button text is visible. Then, you will export four different buttons "Home," "Page 1," "Page 2," and "Page 3" using the settings you determined from the previous activity.
  3. Once you have exported your buttons, create a new section in your unit4.htm web page with heading "Sample Buttons", and add code to this section that will display your eight buttons. You do not need to link these buttons to any pages, just simply display them on the page so that your instructor may evaluate your work. Remember to place an anchor inside the heading tag, and to link to this new section from the home page of your portfolio.

Here are the simple versions of the sample buttons for this lesson:

sample button homesample button page 1sample 
button page 2sample button page 3


Here are the sample buttons with more complex use of layers and graphics:


sample button homesample button page 1sample 
button page 2sample button page 3


Resources/Online Documents

All done?

Make sure to add the buttons you created to the page for graphics projects in your portfolio website so your instructor can evaluate your work.