Learning Web Design

Chapter 24 Exercises 24-1 through 24-3

Home > Chapter Review and Exercises > Chapter 24 - Image and Asset Production > Chapter 24 Exercises

Image Asset Production

Follow the instructions on pages 675-676 (Exercise 24-1), pages 681-683 (Exercise 24-2), and page 700 (Exercise 24-3) of the Class Text.
I have already created a folder in your Ch24 folder consisting of three subfolders,: exercise 24-1, exercise 24-2, and exercise 24-3 with the images you will be using.
As reference, the Chapter 24 textbook slides are in the Class Textbook and Resources section.

GIMP Resources

Read pages 671-674 before starting Exercise 24-1.

Exercise 24-1 What you need to know for this exercise.

This chapter uses two image editing programs, Adobe Photoshop and GIMP.

- Adobe Photoshop offers a 7 day free trial by going here: https://www.adobe.com/creativecloud/catalog/desktop.html
- GIMP is a free, open source image editor available here: https://www.gimp.org/
- I don't think 7 days is enough time to get through this Chapter, so you may want to go with GIMP.

Additional image editing free software you will be interested in:

- LightShot - screen capture app. You can select areas on the screen to copy and then paste into an image editor.
- Pixlr - an online photo editor that is easy to use and very useful.
- Paint - the built image editing software in Windows.
- Fireshot - a Chrome plugin that captures an entire page, the visible part, or a selection.

The three main image formats are:

- JPEG (or JPG) - allows you to set a quality level
- PNG - the preferred website image format. Various levels of quality are available: PNG-8, PNG-24
- GIF - a lossless format for image files that supports both animated and static images.

NOTE: Lossless compression is a class of data compression algorithms that allows the original data to be perfectly reconstructed from the compressed data. There is no loss of quality. Some image file formats, like PNG or GIF, use only lossless compression.

Exercise 24-1 Walkthrough

Pages 675-675

For this first step, you will be installing the GIMP image editing program.

Step 1A

To download GIMP open your web browser and go to: https://www.gimp.org/

Step 1B

Click on the Download 2.10.24 button:

Step 1C

On the next screen, click on the orange "Download GIMP 2.10.30 directly" button:

Step 1D

Save the gimp-2.10.30-setup-3.exe file (anyplace), and then open it to install it.

When the installer starts, click Ok, click Install for all users (recommended).

Step 1E

If you get a prompt asking "Do you want to allow this app to make changes to your device", select Yes.

The Select Setup Language dialog box will appear. Click the OK button.

Step 1F

This colorful dialog box will appear. Click the Install button.

Step 1G

As GIMP installs, you will see its progress in this dialog box.

Step 1H

When GIMP has finished installing, you will see this dialog box. Click the Finish button.

Step 1I

Left-click on the Windows Start icon (red arrow) and scroll down to the GIMP 2.10.30 app (green arrow).

Step 1J

The GIMP program will start up. As it does, you will see this window.

Step 1K

When the program finally opens up, you will see its main screen.

Step 1L (Optional)

Before we begin this exercise, right-click on the GIMP icon that now appears on your toolbar (red arrow) at the bottom of your screen.

Step 1M (Optional)

When the contextual menu (also called context menu, shortcut menu, pop up, or pop-up menu) appears, left-click on Pin to taskbar (red arrow). This will keep the GIMP icon on your taskbar so that all you will need to do to start the program is to left-click on the icon once.

Step 1N

(NOTE: this step will be repeated three times, beginning here the first time, and then Steps 1W and 1X will take you back here so that you can modify the boats.png image file differently)

You will now follow these steps to open the boats.png image file into GIMP, that's in the Chapter 24 Exercise Assignment (Ch 24) sub-folder, exercise 24-1, in your Dropbox.

In GIMP, click on the File pull-down menu, and then click on Open (red arrow).

Step 1O

The Open image window will appear.

Double left-click on your PC's user name in the list. This is usually your name.
Double left-click on your Dropbox folder.
Double left-click on your Class folder.
Double left-click on your 1. Class text Exercises folder.
Double left-click on your Chapter 24 Exercise Assignment (Ch 24) sub-folder named ch24.
Double left-click on the exercise 24-1 sub-folder.
Double left-click on the boats.png file.

Step 1P

You should now see the the boats.png file appear in GIMP.

Step 1Q

You will now follow these steps to export the boats.png as a JPEG file in three different qualities (see text, page 675 bottom).

In GIMP, choose the File pull-down menu, then click on Export As (or press Shift+Ctrl+E).
At the bottom of the Export Image screen, click on the plus (+) symbol or click on the text Select File Type (By Extension).

Step 1R

A list will appear below that. Scroll down the list and click on JPEG image.

IMPORTANT: Do not click on the Export button that's at the bottom. You will do that after the next two steps.

Step 1S

IMPORTANT: At the top of the screen you will see the name it is giving the file, boat.jpg. This will be renamed in the next step.

Step 1T

Change the file name that's located at the top of GIMP from boats.jpg to boats10.jpg.

(NOTE: Steps 1W and 1X will have you name it boats60.jpg and boats100.jpg respectively)

It will now appear as boats10.jpg, as shown here:

Step 1U

Click the Export button on the lower right as shown below.

Step 1V

The Export image as a JPEG window will now appear (see below).

At the top, adjust the Quality slider to 10% (or as close to it as you can).

Finally, click on Export (at the bottom of the Export Image as JPEG window).
This will automatically save the boats10.jpg into your exercise 24-1 subfolder in the Ch24 folder.

Step 1W

Go back to Step 1N, and repeat the steps using a quality of 60% (first rename boats.jpg to boats60.jpg before clicking on Export)

Step 1X

Go back to Step 1N, and repeat the steps using a quality of 100% (first rename boats.jpg to boats100.jpg before clicking on Export).

Step 1Y

Open File Explorer and navigate to your exercise 24-1 folder in your Dropbox. Check the file sizes of the exported jpg images you created. Likewise, open the three new jpg files you created to see how they are different.

Step 1Z

As best you can, compare the quality of the images. It is rather subjective. Here is the original boats.png (on the left) and boats10.jpg (on the right). The boats.png image is 217KB in size, while the boats10.jpg image is only 10KB in size. Notice the distortion in the clouds in the upper right in the boats10.jpg image.

Here are the boats60.jpg (on the left) and the boats100.jpg (on the right) images. The boats60.jpg is 29KB in size and the boats100.jpg is 186KB in size. The cloud distortion is not evident in either of these images. The author considers the boats60.jpg as the best balance of image quality and small file size.

Step 2

You will now export boats.png as a PNG-24 image.

If boats.png isn't already in GIMP, open the boats.png image file from the Ch24 sub-folder, exercise 24-1, in your Dropbox. (NOTE: Follow Steps 1N to 1P above to do this)
Choose File --> Export As (or press Shift+Ctrl+E).
Change the file name at the top from boats.png to boats24.png.
At the bottom of the Export Image screen, click on the plus (+) symbol or click on the text Select File Type (By Extension).
Scroll down the list and select PNG image:

Click the Export button on the lower right.
The Export image as a PNG window appears.
Click on Export.

Step 3A

The next steps will convert boats.png to Indexed Color.

Click on the Image pull-down menu, click on Mode, and then click on the Indexed radio button.
The Indexed Color Conversion window will open.

Select 256 as the Maximum number of colors (it should already be set to that), and click on the Convert button at the bottom.

The boats.png image in GIMP is now configured as a 256-color indexed image.

Click on File, and then Export As.
In the Export Image window, change the file name at the top from boats.png to boats256.png.
At the bottom of the Export Image screen, click on the plus (+) symbol or click on the text Select File Type (By Extension).
Scroll down the list and select PNG image.
Click the Export button on the lower right.
The Export image as a PNG window appears.
Click on Export.

Step 3B

Now Export the Indexed color file as a GIF file.

Click on File, and then Export As.
At the bottom of the Export Image screen, click on the plus (+) symbol or click on the text Select File Type (By Extension).
Scroll down the list and select GIF image.
Note that the file name is now boats256.gif.
Click the Export button on the lower right.
The Export Image as GIF window appears.
Click on Export.

Step 4

Open File Explorer, and look at the file sizes in the exercise 24-1 folder. Open up the images to compare them. The boats256.png (on the left) and the boats256.gif (on the right) images are shown below. Note again the distortion in the clouds in both of the images, especially in the upper right.

The files sizes of the images you have made are shown here:

Conclusion: The best format for the boats image is JPEG, and a quality of around 60% gives the best balance of image quality and small file size. The PNG-8 and GIF versions are twice as large and they look pretty bad. Of course, “quality” is subjective. You might decide that an image is so important that pristine 100% quality is worth the extra download time, but generally, you can shave a lot of bytes off an image while keeping quality acceptable.

Step 5

For step 5, you will repeat the above steps using the asian.png image instead.

Conclusion: For the asian image, the PNG-8 with a reduced color palette is the winner. Sure, the 10% JPEG file size is smaller, but the quality is disastrous! The PNG-8 offers the smallest file size while keeping the flat colors artifact-free.

Read pages 676-680 before starting Exercise 24-2.

Exercise 24-2 What you need to know for this exercise.

Transparency is where parts of a background color, or image, shows through another image.
Binary transparency is where the pixels of an image are either entirely transparent or entirely opaque. It's all or none.
Both GIF and PNG-8 files support binary transparency.
Alpha transparency is where the pixels can vary up to 256 levels of opacity.
PNG files support alpha transparency.

Exercise 24-2 Walkthrough

Pages 681-683

Step 1

You will create a new file that is 250 pixels wide and high. Start GIMP.

NOTE: The three image files you will create here have already been completed in the exercise 24-2 subfolder. So you may want to save the ones you do here in a different folder, such as your My Documents folder.

Click the File pull-down menu, and select New.

2. The Create a New Image dialog box will appear.

3. Set the width to 250 pixels (px) and the height also to 250 pixels.

4. Click on Advanced Options.

5. More items will be displayed.

6. Change both the X and the Y resolution to 72,000 pixels per inch.

7. In the Fill with section, select Transparency.

8. Remove the words in the Comment section, "Created with GIMP".

9. Click OK at the bottom.

10. You should now have a new image window filled with a gray, checkered background.

11. Click on the File pull-down menu, and select Save As.

12. The Save Image dialog box will appear.

13. Change the Name from Untitled.xcf to circle.xcf (red arrow).

14. In the Save in Folder box (green arrow), navigate to your Documents folder.

15. At the bottom of the dialog box, click on Save.

Step 2

You will now create a circle with a color of your choice.

Click on the Tools pull-down menu, and select Selection Tools. Then select Ellipse Select.
The Ellipse Select tool will now appear in the lower left of GIMP.

3. Select Feather Edges, and set the radius to 10,

4. With your mouse, point to the upper left corner of the checkered image.

5. Holding the left mouse button down, drag the mouse pointer down to the lower right corner, and release the left mouse button.

6. This will create a large circle with a dashed line border.

7. Select a color for your circle. Click on the black square, which represents the foreground color.

8. The Change Foreground Color dialog box will appear.

9. Select a point in the range of colors in the multi-colored column shown here. (I have clicked in the green area.)

10. Next, in the colored box to the left of the multi-colored column, choose a color hue you like.

11. Click the OK button at the bottom of the dialog box.

12. The black square box, which represents the foreground color, will now have changed to the color you selected.

13. Hover your mouse over the foreground color box, hold down the left mouse button, and drag the mouse to the circle. Release the left mouse button.

14. Your circle will now be the foreground color you selected.

Step 3

You will now export the image as circle24.png. NOTE: as mentioned previously, there already is a circle24.png file in your Exercise 24-2 folder. So you might want to save it in your Documents folder.

Click on the File pull-down menu and select Export As.

2. The Export Image dialog box will open.

3. Change the Name from circle.png to circle24.png.

4. Click the Export button at the lower right.

5. The Export Image as PNG dialog box will appear.

6. Clear ALL of the check boxes

7. Finally, click on the Export button.

What did we just do? You created an image of a colored circle, and then saved it as a PNG image file named circle24.png. The image is RGB (see page 306 for an explanation of RGB color values) with transparent areas, i.e. the grey checkered background. By clicking on Export, you created a 24-bit PNG image file with alpha transparency.

Besides RGB, the other color mode is indexed color (see page 648), where the colors in an image are stored in a color table. This is the palette from which the image gets its colors.

Step 4

Let's see how GIMP does binary transparency. As mentioned above, Binary transparency is where the pixels of an image are either entirely transparent or entirely opaque. It's all or none.

Click on the Image, pull-down menu, select Mode, and then on Indexed....

2. The Indexed Color Conversion dialog box will appear. NOTE: If the dialog box doesn't appear, click on Image, then Mode, and then RGB. Then click on Image, then Mode, and then finally Indexed...

3. Set the Maximum number of colors to 256.

4. Leave the “Enable dithering of transparency” box unchecked.

5. Click Convert.

6. Once the image appears, left-click once on the image to make the rotating circle go away. Note that the soft edges of the circle are gone. Because the image is a binary transparency, the pixels are either opaque (the color you chose) or transparent (the checkered boxes).

7. REMINDER: At any time, you can press CTRL + Z to backup as many steps as needed, and CTRL + Y to advance.

8. To illustrate this, increase the zoom setting at the bottom to 200% or even 400% (red arrow).

NOTE: At 400%, the green circle might fill the entire work area and you may not see the stair-stepped edge. Use the slider bars on the bottom and the right side to move to different parts of the image.

9. Notice the the stair-stepped edges of the binary transparency image.

Step 5

The next step requires that we revert the image from Indexed Color back to RGB, and then convert it from RGB back to Index Color with Dithering enabled. To do this, follow these steps:

Click the File pull-down menu and select Revert.

2. The Revert Image dialog box will appear.

3. Click the Revert button.

4. The image is now back to being RGB.

5. Click on the Image pull-down menu, then Mode, and then Indexed.

6. The Indexed Color Conversion dialog box will appear.

7. Select Maximum number of colors to 256.

8. This time, check the Enable dithering of transparency checkbox.

9. Click on the Convert button.

10. Increase the zoom to 200% or 400%.

11. Note the blurred edges of the circle caused by the dithering effect.

12. Click on the File pull-down menu, and then select Export As.

13. The Export Image dialog box will appear.

14. Change the name from circle24.png to circle8.png.

15. Click the Export button at the lower right.

16. The Export Image as PNG dialog box will appear.

17. Click on Export.

18. We want to save this same image as a GIF file to compare it to the others.

19. Click on the File pull-down menu, and then select Export As.

20. The Export Image dialog box will appear.

21. Click on Select File Type.

22. Scroll down to, and select, GIF image.

23. Change the name of the file from circle8.gif to circle.gif.

24. Click the Export button at the lower right.

25. The Export Image as GIF dialog box will appear.

26. Uncheck the GIF comment checkbox.

27. Click on Export.

Step 6

The next step is to compare these three images.

In your Dropbox, go to the Chapter 24 Exercise Assignment folder.
Open the exercise 24-2 subfolder.
Open the transparency.html file in a text editor.

<!DOCTYPE html>

<html>

<head>

<title>Transparency test</title>

<style>

body {background-color: teal;}

p {text-align: center;}

img {margin: 2em;}

</style>

</head>

<body>

</body>

</html>

4. Change the background-color from teal to white:

<!DOCTYPE html>

<html>

<head>

<title>Transparency test</title>

<style>

body {background-color: white;}

p {text-align: center;}

img {margin: 2em;}

</style>

</head>

<body>

</body>

</html>

5. Open transparency.html in a browser. The three images should appear as it does on the right, with the white background.

6. In your text editor, change the body background-color setting in the transparency.html file to teal.

7. Save the transparency.html file.

<!DOCTYPE html>

<html>

<head>

<title>Transparency test</title>

<style>

body {background-color: teal;}

p {text-align: center;}

img {margin: 2em;}

</style>

</head>

<body>

</body>

</html>

8. Open transparency.html in a browser. The three images should appear as they do on the right.

9. Note the difference between the alpha and binary transparency images. All the images have dithering on the outer edge of the circles.

10. You can clearly see the white halo on the GIF image on the left. With binary transparency, the pixels are either opaque or transparent. Since the pixels are opaque, none of the teal background color gets mixed in with the circle's outer white ring.

11. Both the PNG-8 and the PNG-24 versions have smooth alpha transparency. The pixels in alpha transparency can be any of 256 levels of transparency. So the teal background color comes through along the outer edges of the circle, where the dithering is, in varying degrees.

Read pages 684-699 before starting Exercise 24-3.

Exercise 24-3 What you need to know for this exercise.

This final exercise shows how to use an online image optimizer to simplify the process of reducing the file size of images while attempting to keep their clarity.

Exercise 24-3 Walkthrough

Page 700

Step 1

For this exercise, you will be using the two image files located in the exercise 24-3 subfolder in the Chapter 24 Exercise Assignment folder (Ch24) in your Dropbox.

Go to the image optimization website, kraken.io.
Click on the Try Free Web Interface button (as noted by the red arrow in the image below).

The Kraken Free Online Image Optimizer dialog box will appear.

Set the optimization mode to Lossless.
This mode will save as much file size as possible without altering a single pixel, hence the name "lossless" - meaning no information is lost whatsoever. Use this mode when your requirement is that the image should retain 100% of its initial visual information - such as for sensitive brand and marketing visuals.

From the exercise 24-3 subfolder, drag the asian-32.png image file into the lower part of the Kraken Free Online Image Optimizer dialog box (red arrow).
The asian-32.png is a 32 pixel color image saved as a PNG-8.

The Kraken.io image optimizer will reduce the file size from 3.35 KB down to 2.96 KB, a 11.80 % savings.
The Kraken.io image optimizer will also automatically save this file into the exercise 24-3 subfolder.
Scroll down the page to see the summary:

Step 2

Now let’s see what we can do with the boats-60.jpg image.

Next, drag the boats-60.jpg image into the image optimizer.

The image optimizer will reduce the boats-60.jpg file size from 34.74 KB down to 31.56 KB, a 9.16% savings.

Change the optimization mode to Lossy.
The Kraken.io intelligent lossy optimization typically produces savings of at least 60% of the initial file size; with savings of 80% to 90% occurring frequently. Their default intelligent lossy algorithm has been specifically designed to always produces images of outstanding quality, and never of unacceptable quality degradation. In most cases, you will not be able to tell the optimized result from the original, even upon close inspection. Kraken.io recommends this mode to most of their users, and for most use-cases.

Drag the boats-60.jpg image into the image optimizer again.

Using Lossy optimization, the image optimizer will reduce the boats-60.jpg file size from 34.74 KB down to 24.90 KB, a 28.32% savings.
Lossy optimization, has a greater reduction in file size than the previous optimization using Lossless.

Here is the original asian-32.png:

Here is the Lossless optimized asian-32.png:

Here is the original boats-60.jpg:

And here is the Lossless boats-60.jpg and the Lossy boats-60.jpg:

There isn't much difference between these two boats-60.jpg images, so using the Lossy version (the one on the right), with its smaller file size would be the one to go with.

FINAL NOTE: Running exported images through an optimizer, such as this, is well worth the effort. However, doing each one individually, as you did here, could get a little cumbersome, so if you have a lot of images to produce, consider using a tool that allows several images to be optimized at once.

The End

Report abuse