Lesson 3: Optimizing GIF Images

Overview

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.

Activities

  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. First, hide the layer with the camera image and make sure the layer with the mail image is visible. Export your button multiple times using different settings each time for the number of colors in your gif. Compare the images to see which export settings give you the best balance of high quality and low file size.
  3. Once you have determined the best settings to use, hide the layer with the mail image and make the image with the camera image visible. Now export your button again, saving it with a different filename. You should now have two buttons exported, one for your email button and one for your camera button.
  4. Once you have exported your buttons, create a new section in your graphics.html web page with heading "Sample Buttons" and id="buttons". Add code to this section that will display your two buttons. Try coming up with this code on your own, but if you get stuck, refer back to the earlier lesson on adding images to your web page.
  5. Once you've finished adding your buttons to graphics.html, add the email button to the header of your portfolio site's home page (index.html). Position the button directly above or adjacent to your email address that is already there. If the image is too large to fit, you can resize it slightly by changing the values of the width and height attributes.
  6. After you've positioned the email button where you want it on your home page, add an email link to the image, targeting your email address. This way, users can send you an email by clicking on the email button.
  7. Next, in the Unit 4 section of your portfolio home page, add the camera button, and link that image to your graphics.html file.

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. When finished, proceed to the next lesson.