6.6 Chapter Summary

This chapter has covered the essential concepts and terms in web media, which include not just image files but also audio and video files as well. The chapter focused on the most important media concepts as well as the four different image formats. The chapter also covered HTML5’s support for audio and video files.

6.6.1 Key Terms

6.6.2 Review Questions

  1. How do pixels differ from halftones?

  2. How do raster images differ from vector images?

  3. Briefly describe the RGB, CMYK, and HSL color models.

  4. What is opacity? Provide examples of three different ways to set it in CSS.

  5. What is color depth? What is its relationship to dithering?

  6. With raster images, does resizing images affect image quality? Why or why not?

  7. Describe the main features of the JPEG file format.

  8. Explain the difference between lossy and lossless compression.

  9. Describe the main features of the GIF file format.

  10. Describe the main features of the PNG file format.

  11. What is anti-aliasing and what issues does it create with transparent images?

  12. Describe the main features of the SVG file format.

  13. Explain the relationship between media encoding, codecs, and container formats.

  14. How many colors do you typically need for a website?

  15. Why is using the HSL color model a sensible choice when picking colors for a website?

6.6.3 Hands-On Practice

Project 1: Resizing

Difficulty Level: Basic
Overview

Perform the crop and resize activities shown in Figure 6.39 using whatever graphical editor you are using in your course. Open-source tools such as the Gnu Image Manipulation Program (GIMP) are free alternatives to commercial tools like Adobe’s Photoshop.

Instructions

  1. Crop ch06-proj1-crop.jpg as indicated in Figure 6.39.

  2. Save the cropped file as cropped.jpg.

  3. Resize ch06-proj1-medium.jpg to 200×255. Save resized file as small.jpg. Resize small.jpg to 1000×1273 and save file as big-from-small.jpg. Notice the dramatic loss of quality when you make a small raster image larger!

  4. Reopen ch06-proj1-medium.jpg and resize to 1000×1273. Save file as big-from-medium.jpg.

  5. Open both big-from-small.jpg and big-from-medium.jpg. Compare the quality. Notice how making a small raster image larger gives you much lower quality.

  6. Open ch06-proj1-alias.tif. Save as a GIF and as a PNG with the background color set as the transparent color.

Figure 6.39 Completed Project 1
The figure has 3 sets of images showing the original state and final state of an image after performing the operations mentioned in the project.
Testing

  1. Create a simple HTML file that displays each of these created images. Use CSS to set the background color to blue.

Project 2: Art Store

Difficulty Level: Intermediate
Overview

Use a graphical editor to experiment with different quality settings and color depth values.

Instructions

  1. Open artwork-original.tif in editor. Save three different JPG versions, one with maximum quality (100, or 10 if editor is using a 10-point scale), one with medium quality (50), and one with the lowest quality setting (10). Name the files artwork-quality100.jpg, artwork-quality50.jpg, and artwork-quality10.jpg.

  2. Open artwork-original.tif in the editor again. Resize to 250×323. Save five different PNG-8 (that is, 8-bit) versions, each with different color depths: 256 colors, 128 colors, 64 colors, 32 colors, and 16 colors. Name the files artwork-256colors.png, artwork-128colors.png, etc.

  3. Open logo-raster.png in the editor. Resize this image: one at 350×188 pixels, the other at 525×282 pixels. Name the files logo-raster-2x.png and logo-raster-3x.png. Notice the dramatic loss of quality when you make a small raster image larger!

  4. Resize ch06-proj1-medium.jpg to 200×255. Save resized file as small.jpg. Resize small.jpg to 1000×1275 and save file as big-from-small.jpg. Notice the dramatic loss of quality when you resize an image that has been resized!

  5. Edit ch06-proj2.html and add the appropriate <img> tags for your new images to the <figure> elements so the page will appear as shown in Figure 6.40. Edit the <figcaption> for each to reflect the actual file size.

  6. Edit ch06-proj2.html and add the appropriate <img> tags for the logo-vector.svg file. Resize it using the width attribute of the <img> elements.

Testing

  1. View ch06-proj2.html in the browser. It should look similar to that shown in Figure 6.40.

Figure 6.40 Completed Project 2
The figure has a Browser Window, 4 sets of images showing the original state and the final state of images after performing the operations mentioned in the project.

Project 3: Share Your Travel Photos

Difficulty Level: Intermediate
Overview

Use the <video> element along with CSS gradients. The final result will look similar to that shown in Figure 6.41.

Figure 6.41 Completed Project 3
The figure shows a Browser with 3 videos as the output after performing the operations mentioned in the project.
Instructions

  1. Open ch06-proj3.html in the browser.

  2. Add a <video> element to a <figure> element that will play either paris.mp4, paris.webm, or paris.ogv in the element. (The files are in the media folder). Do the same for the lake and sunset videos. Test in different browsers.

  3. Modify the CSS file to add a gradient to the <header> element and to the <body> element.

Testing

  1. View ch06-proj3.html in the browser. It should look similar to that shown in Figure 6.41.