Home > Chapter Review and Exercises > Chapter 23 - Web Image Basics

Instructional videos on image types

• Squarespace Images and Videos Format videos

  • Editing and formatting images

• Webflow.com - Image file types (JPG, PNG, SVG, GIF)

Kinsta image optimization 

• Image Optimization video

• Blog: How to Optimize Images for Web and Performance

Summary

Chapter 23 provides essential background information that will help budding designers and developers create images that are appropriate for the web.  It starts by discussing several options for finding images with a mind toward copyright issues.  A majority of the chapter introduces the image file formats that are most popular on the web (JPEG, PNG, GIF) as well as an up-and-comer, WebP.

Understanding what’s happening under the hood for each format helps designers choose the best format for the job.  The chapter provides a primer on screen and image resolution, including how to accommodate high-density displays.  There is also a flow chart that walks designers through a strategy to follow when producing images for responsive web sites.  Finally, it takes a look at favicons (the little icon that shows up in the browser window) and how to create them.

Takeaways

In Chapter 23, you will learn the following:

• Where to get images for sites, including creating your own, using stock images (either rights-managed or royalty-free), finding clip art online, or hiring a professional.

• JPEGs are Truecolor images with a lossy compression scheme that throws out data in order to make images as small as possible.  Because JPEG compression is optimized for smooth color transitions, JPEG is the best choice for photographs.

• The PNG format comes in several bit depths. PNG-24 is a lossless Truecolor format that is generally avoided for web images due to large file sizes; however, it is useful if variable transparency is required.  PNG-8 is an indexed, 8-bit format that works best on images with areas of flat color. PNG-8 can do binary (on/off) transparency.

• The original web image format, GIF, is an indexed, 8-bit format that is also capable of animation.

• WebP, from Google, can handle all types of image data and promises much smaller file sizes.  It is slowly growing in browser support.

• How to choose the best file format for different image types.

• How bitmapped images are displayed on screens, and how the screen’s pixel density affects the display of images.

• A strategy for producing image assets for a site with the goal of keeping file sizes as small as possible, minimizing the number of HTTP requests, not downloading more data than is needed, and sending high-quality images to high-density displays.

• How to create favicons, both the traditional way and as a larger icon set for use across different device types.

Key Terms in Chapter 23

rights-managed images

Images for which the copyright holder (or company representing them) controls who may reproduce the image. Rights-managed images are generally available for a specific use and for a fee.

royalty-free images

Images for which you do not need to pay a licensing fee.

Creative Commons License

A license by which artists may release their artwork for free with certain restrictions.

JPEG (Joint Photographic Experts Group)

An image format that is well-suited to photos because it can contain 24-bit color images and uses a lossy compression scheme to keep file sizes small.

lossy compression

A compression scheme that permanently throws out data in order to reduce

the size of the file.

lossless compression

A compression scheme that retains all the original data when the file is compressed.

Truecolor (also RGB color)

A palette of millions of colors made up of 256 levels each of red, blue, and green light.

PNG (Portable Network Graphics)

A robust file format designed to contain both 24-bit color and 8-bit indexed color images (as well as gray scale). 8-bit PNGs are the best choice for graphics with hard edges and flat areas of color.

PNG-24

A 24-bit PNG capable of storing millions of colors and multiple levels of transparency (alpha transparency).

PNG-8

An 8-bit PNG capable of storing 256 colors total and both binary and alpha transparency.

GIF (Graphic Interchange Format)

The first image format supported in web pages, it is an 8-bit indexed format that is also capable of binary transparency and animation.

8-bit

With regard to image formats, 8-bits can describe up to 256 colors (28=256).

indexed color

A color model that stores color information in a color table that is referenced by each pixel in the image. It can store a maximum of 256 colors.

palette

The collection of colors in an image.

color table (also color map)

Where colors in an indexed color image are stored. The color table for indexed images can be accessed in image editing tools.

quantization

The conversion from 24-bit RGB color to an indexed 8-bit format.

binary transparency

A model in which pixels are either fully transparent or fully opaque.

alpha transparency

A model in which pixels may be any of 256 levels of opaqueness.

alpha channel

A fourth channel (in RGB images) that stores transparency information as a gradient.

gamma

The brightness setting on a monitor.

screen designer

A new term for designers who design products intended to be viewed on screens (such as web sites, applications, and video games).

ppi

Stands for “pixels per inch,” and is a measure resolution.

resolution

The number of pixels per inch in a digital image or in a screen display.

pixel density

The resolution (ppi) of a screen.

high-density display

A screen with a pixel density that is 1.5 to 4 times higher than traditional screens.

reference pixel

A unit of measurement used by high-density devices for purposes of layout independent of the resolution of the physical pixels in the screen.

point (PT)

What Apple calls its reference pixel, equal to 1 standard device pixel.

device-independent pixel (DP)

What Android calls its reference pixel, equal to one pixel at 160ppi.

CSS pixel

The pixel unit used in CSS length measurements. The term is used interchangeably with device reference pixels because they map one-to-one.

favicon

The little icon that shows up in the browser tab and in bookmark lists.  It helps users find your site in a lineup of tabs or bookmarks and can strengthen a brand.

Exercises in Chapter 23

None.

Test Yourself

Answer the following questions to see if you got the big picture on web graphics.