Home > Chapter Review and Exercises > Chapter 24 - Image and Asset Production
With the background information about web graphic files out of the way, this chapter focuses on image production. We start by simply exporting and saving in a variety of web-appropriate formats, including an exercise that demonstrates how the format affects file size. The next section is a deep dive on binary and alpha-layer transparency. We take a look at the ways modern image editing tools support making images for responsive sites and for high-density displays. Finally, and most importantly, we look at measures every designer and developer can take to optimize each image type so they have the smallest file size as possible.
In Chapter 24, you will learn the following:
How to export and save in web formats in Adobe Photoshop CC and GIMP, including what options are available.
That file format and compression scheme has a big impact on the file size of the image asset.
How binary, alpha, and alpha-palette transparency work.
How to avoid a “halo” of mismatching pixels around a transparent PNG or GIF.
How to create images with transparent areas in Photoshop and GIMP.
Using modern image editing tools to create images for use in responsive layouts and on high-density displays.
The importance of optimizing images to improve performance.
General guidelines for optimizing all images and special tips for optimizing JPEGs, PNGs, and GIFs.
An overview of optimization tools that can make files exported from image editing programs even smaller.
binary transparency
Pixels are either entirely transparent or entirely opaque, like an on/off switch.
alpha transparency
A pixel may be one of 256 levels of transparency from entirely opaque to entirely transparent. Only PNG, WebP, and JPEG 2000 support alpha transparency.
halo
The term used for the fringe of pixels around the edges of the image that do not blend in with the background color.
alpha channel
A fourth channel in RGB images that stores transparency information as a gradient from black to white, where white areas are opaque, black areas are transparent, and grays are a scale in between.
alpha-palette PNG (or PNG8+alpha)
An 8-bit, indexed color PNG file that stores transparency levels in its color map.
upscaling
Taking a bitmapped image and resizing it larger (usually resulting in blurry or lower image quality).
dithering
A speckle pattern that results when colors from a palette are mixed to simulate an unavailable color.
24-1: Formats and file size
Two different types of images are saved in various file formats and compression rates then the resulting quality and file sizes are compared. The lesson is that JPEG is most efficient for photos and PNG is the best for flat colors.
24-2: Creating transparent images
In this exercise, students create an image with a soft edge and save it with the transparency preserved as binary, alpha, and PNG-8+alpha. The resulting images are compared by placing them on a web page against a colored background.
24-3: Optimize some images
The best images from Exercise 24-1 are run through an online optimizer to see if they can be compressed down even smaller. (Spoiler: they can!)
1. What are your file format options if you want multiple levels of transparency in a bitmapped image?
2. What is your number one tool for optimizing a JPEG?
3. What is your number one tool for optimizing an indexed-color image like PNG-8 or GIF?
4. How does dithering affect the file size of an indexed color PNG or GIF?
5. How does adding a blur affect the file size of a JPEG?
6. sRGB: Yes or no? Why?
7. Why might you need to create @2x and @3x scales of an image?
8. Why might you hire a company like Cloudinary or Akamai?
Are you interested in knowing about all the things you can do in GIMP? These two sources are some of the best.
Logos By Nick
Daves Media Design