Chapter 11
Images

Good design is clear thinking made visible.
—Edward Tufte

Good diagrams and interesting illustrations are visually arresting and create documents that are distinct and memorable. Illustrations can convey complex quantitative or spatial information quickly, transcending language barriers, and can combine with text to complement many styles of information gathering and learning. New tools have increased our ability to create information graphics, and the web provides a full-color multimedia forum unbounded by the costs of publishing and distributing paper.

Web Imaging Strategies

Interface and branding

Consistent interface and identity graphics across a collection of web pages define the boundaries of a web “site.” Although web designers could build a site without images, most users would not readily recognize a collection of bare pages as a cohesive “site,” and such a site would seem unpleasantly odd, well outside of design norms and user expectations. Site-defining identity graphics do not need to be elaborate, but they do need to be consistent across the range of pages in a site for the user to establish a sense that your pages are a discrete region—related perhaps to a larger whole if you work in a major enterprise, but in some ways distinct as a “place.”

Content images

Content images serve a number of purposes, complementary to text content:

A chart or diagram is an implicit promise to the user that you’ll make a complex world easier to understand. Our advice on graphic communications is the same as on written communications:

About Web Images

Understanding image types

Bitmap or raster images

Bitmap (or raster) images are composed of a fine grid of pixels (picture elements). Each pixel has a particular color, and because the pixels are small and can be any one of millions of colors, the raster image format is typically used for photographs and complex artwork.

Vector images

Vector images use mathematical descriptions of lines, polygons, points, curves, and fill effects to create an image. Vector images are typically simple and diagrammatic, like graphs, charts, and diagrams, and rarely have the depth or complexity of raster images like photographs. But vector images have some critical advantages over raster images:

Scalable vector graphics—SVG

SVG images are vector graphics saved in an open-format xml file type, instead of a proprietary vector image format like Adobe Illustrator (.ai) files. Most Illustrator graphics can be saved in SVG format and used directly on web pages. As vector images, SVG graphics can be scaled to any size without a loss of quality, and they are compact in size, making them increasingly popular for creating graphics for mobile applications and responsive web sites, at least for relatively simple images and shapes.

CSS-based graphics

Cascading style sheet (CSS) visual styling has long been used to create simple—or complex—graphic effects on web pages through CSS code alone. Probably the most common CSS graphics are graphic buttons, where pure CSS techniques are used to transform simple HTML spans, divs, and links into graphic buttons in any color or shape, with shading, edges, drop-shadows, hover and click states, and other effects. CSS techniques can create complex graphic effects on web pages that actually have no embedded JPEG, GIF, or PNG graphics: just HTML elements styled with CSS.

Icon fonts

Icon fonts provide a convenient way to load dozens or even hundreds of vector-based symbols and icons into your web site in an extremely compact form. Instead of alphanumeric characters, an icon font is full of icons, so with a single http request your web page now has hundreds of vector-based symbols available. Icon fonts allow you to easily use CSS to change the size, color, drop-shadow, or other graphic characteristics of the icons.

Understanding image file formats

The primary web file formats are raster images in GIF (pronounced “jiff”), JPEG (“jay-peg”), and PNG (“ping”) files. All three common web graphic formats are so-called bitmap graphics, made up of a checkerboard grid of thousands of tiny colored square picture elements, or pixels. Bitmap files are the familiar types of files produced by cell phone and digital cameras, and are easily created, edited, resized, and optimized for web use with such widely available tools as Adobe’s Photoshop or Elements, Corel’s Paint Shop Pro and Painter, or other photo editing programs.

For efficient delivery over the Internet, virtually all web graphics are compressed to keep file sizes as small as possible. Most web sites use both GIF and JPEG images. Choosing between these file types is largely a matter of assessing:

GIF

The CompuServe Information Service popularized the graphic interchange format (GIF) in the 1980s as an efficient means to transmit images across data networks. In the early 1990s the original designers of the World Wide Web adopted GIF for its efficiency and widespread familiarity. Many images on the web are in GIF format, and virtually all web browsers that support graphics can display GIF files. GIF files incorporate a “lossless” compression scheme to keep file sizes at a minimum without compromising quality. However, GIF files are 8-bit graphics and thus can accommodate only 256 colors.

The GIF file format uses a relatively basic form of file compression (Lempel Zev Welch, or lzw), which squeezes out inefficiencies in data storage without losing data or distorting the image. The lzw compression scheme is best at compressing images with large fields of homogeneous color, such as logos and diagrams. It is much less efficient at compressing complicated “photographic” pictures with many colors and complex textures (fig. 11.6).

You can take advantage of the characteristics of lzw compression to improve its efficiency and thereby reduce the size of your GIF graphics. The strategy is to reduce the number of colors in your GIF image to the minimum necessary and to remove colors that are not required to represent the image. A GIF graphic cannot have more than 256 colors, but it can have fewer. Images with fewer colors will compress more efficiently under lzw compression. For example, when creating GIF graphics in Photoshop, don’t save every file automatically with 256 colors. A simple GIF image may look fine at 8, 16, or 32 colors, and the file size savings can be substantial. For maximum efficiency in GIF graphics, use the minimum number of colors that gives you a good result.

The conventional (noninterlaced) GIF graphic downloads one line of pixels at a time from top to bottom, and browsers display each line of the image as it gradually builds on the screen. In interlaced GIF files the image data are stored in a format that allows browsers that support this feature to build a low-resolution version of the full-sized GIF picture on the screen while the file is downloading. Some people find the “fuzzy-to-sharp” animated effect of interlacing visually appealing, but the most important benefit of interlacing is that it gives the user a preview of the full picture while the picture downloads into the browser.

Interlacing is best for larger GIF images such as illustrations of 200 × 100 pixels or greater. Interlacing is a poor choice for small GIF graphics such as navigation bars, buttons, and icons. These small graphics will load onto the screen much faster if you keep them in conventional (noninterlaced) GIF format. In general, interlacing has no significant effect on the file size of average GIF graphics.

The GIF format allows you to pick transparent colors from the color lookup table of the GIF. You can use image-editing software such as Photoshop to select a single color in a GIF graphic’s color palette to become transparent. Usually the color selected for transparency is the background color in the graphic. Unfortunately, the transparent property is not selective; if you make a color transparent, every pixel in the graphic that shares that color will also become transparent, which can cause unexpected results.

JPEG

The other graphic file format commonly used on the web to minimize graphics file sizes is the Joint Photographic Experts Group (JPEG) compression scheme. Unlike GIF graphics, JPEG images are full-color images that dedicate at least 24 bits of memory to each pixel, resulting in images that can incorporate 16.8 million colors.

JPEG images are used extensively among photographers, artists, graphic designers, medical imaging specialists, art historians, and other groups for whom image quality and color fidelity is important. A form of file called “progressive JPEG” gives JPEG graphics the same gradually built display seen in interlaced GIFs. Like interlaced GIFs, progressive JPEG images often take longer to load onto the page than standard JPEGs, but they do offer the user a quicker preview.

JPEG compression uses a sophisticated mathematical technique called a discrete cosine transformation to produce a sliding scale of graphics compression. You can choose the degree of compression to apply to an image in JPEG format, but in doing so you also determine the image’s quality. The more you squeeze a picture with JPEG compression, the more you degrade its quality. JPEG can achieve incredible compression ratios, squeezing graphics down to as much as one one-hundredth the size of the original file. This is possible because the JPEG algorithm discards “unnecessary” data as it compresses the image, and it is thus called a “lossy” compression technique. Notice in Figure 11.8 how increasing the JPEG compression progressively degrades the details of the image. The checkered pattern and the dark “noise” pixels in the compressed image are classic JPEG compression artifacts. Note the extensive compression noise and distortion present in the image at the right, particularly around the type labels.

Save your original uncompressed images! Once an image is compressed using JPEG compression, data are lost and you cannot recover them from that image file. Always save an uncompressed original file of your graphics or photographs as backup. If your digital camera produces JPEG images, set aside the “camera original” JPEG files and work with copies when you edit the files for web use. Each time you save or resave an image in JPEG format, the image is compressed further and the artifacts and noise in the image increase.

PNG

Portable network graphics (PNG) were designed specifically for use on web pages, and they offer a range of attractive features, including a full range of color depths, support for sophisticated image transparency, better interlacing, and automatic corrections for display monitor gamma. PNG images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.

PNG supports full-color images and can be used for photographic images. However, because it uses lossless compression, the resulting file is much larger than with lossy JPEG compression. Like GIF, PNG does best with line art, text, and logos—images that contain large areas of homogeneous color with sharp transitions between colors. Images of this type saved in the PNG format look good and have a similar or even smaller file size than when saved as GIFs. However, widespread adoption of the PNG format has been slow. This is due in part to inconsistent support in web browsers. In particular, Internet Explorer does not fully support all the features of PNG graphics. As a result, most images that would be suitable for PNG compression use the GIF format instead, which has the benefit of full and consistent browser support.

Using Web Images

Choosing the right file format

Having a good understanding of the strengths and weaknesses of the various graphics formats can save you a lot of “weight” on your overall web page download sizes, as well as a lot of heartache when your well-crafted graphics don’t look right, or prove to be too big for your page performance budget. There are no magic formulas that say “always use JPEGs for this; always use PNGs for that.” Make your best calculations about what format is likely to work well, but then test your assumptions by exporting your graphics in different formats and checking the file sizes. In larger image sizes (say, bigger than 150 × 150 pixels) the file format choices are pretty straightforward, but small graphics can fool you. A small, hard-edged icon graphic ought to work well as a GIF, but sometimes a JPEG or a PNG actually looks better and isn’t much larger.

Interface elements

Small page navigation graphics, buttons, and graphic design elements such as logos and icons are often handled as noninterlaced GIF or PNG graphics. In reviewing your page comps in Photoshop, you should always be looking for opportunities to handle elements like background color fields, frames, rules, and buttons with CSS3 graphic effects rather than with graphics. Often the best, lowest-cost graphics are no graphics at all.

The combination of icon fonts, CSS sprites (graphics referenced in CSS code), and CSS graphic effects can give you a lot of visual flexibility at very low download cost, particularly if you invest in creating custom icon fonts that contain only the icons you are likely to use. Free icon fonts such as Font Awesome (originally developed for Twitter Bootstrap) are a great resource, but there is little point in downloading hundreds of icons when you are probably using only ten or fifteen of them in your site. Icon font utilities such as IcoMoon (icomoon.io) allow you to create custom icon fonts, and can also convert SVG icons and symbols to font characters.

Scalable vector graphics (SVG) can also be useful for simple graphic shapes, icons, and small iconic illustrations without many complex effects, such as graduated fills or transparencies. As the name suggests, SVG graphics are based on mathematical description of curves, points, lines, and other shapes, and can be scaled to any size without a loss of quality. This is a powerful advantage in this transitional period in computer displays, where 72–96-ppi “conventional” or “1x” display screens are being replaced with “retina” or “2x” displays with more than 200 pixels per inch (see below for more on retina displays). Because an SVG graphic can scale independent of screen resolution, an SVG graphic looks good on both kinds of displays.

Sophisticated browser support for SVG graphics gets better all the time, but there are drawbacks to SVG as a format for more complex vector graphics such as illustrations. To display a vector SVG graphic on a web page the browser must render the SVG into pixels, a process that takes time and can be unpredictable for very complex illustrations, data graphics, and maps produced in vector drawing programs like Adobe Illustrator (fig. 11.11). Until browser support for complex vector graphics becomes more accurate and reliable, it’s best to create the illustrations in tools like Adobe Illustrator, but then to render the final results in PNG or JPEG graphics that can reliably capture the subtleties of shading and transparency.

Although there can be problems with converting complex vector graphics to the SVG format, vector graphics are an excellent investment because:

Photographs and illustrations

JPEG is the file format most widely used for complex color illustrations and photographs. In general JPEG graphics are efficient in compression and produce excellent results on modern display screens and in print uses. On the new retina or 2x display screen a suitably sized JPEG photograph or illustration easily rivals the best print renditions of graphics and photographs.

If you use a lot of JPEGs in your web work you need to be particularly careful always to preserve the camera-original photos (JPEG or Camera raw) or original Photoshop artwork at full resolution, even though such original images are rarely used at full resolution on web pages. JPEG uses a “lossy” image compression system that degrades the quality of an image when it is saved in JPEG format. Normally this trade-off of image compression versus image quality is not obvious to the casual web reader, but lossy compression has important implications if you ever need to rescale or edit your JPEG images. Thus when working in the JPEG format, it is good practice to work only on copies of the original files to avoid the quality loss of recompressing a JPEG photo.


Color terminology

Color is the response of our eye and brain to various wavelengths of light. Readers with normal vision can sense wavelengths of light from 400 nanometers (near ultraviolet) to 700 nm (near infrared).

Computer screens use an additive color system that combines phosphors of red, green, and blue primary colors, which, when added together in various proportions, produce the more than sixteen million colors possible on RGB screens. The maximum brightness of all three RGB primaries produces white light on the screen.

In computer graphics you’ll see these common terms used to describe the characteristics of colors, known as the HSB color system (for hue, saturation, and brightness), commonly used in graphics programs like Adobe Photoshop.

Four classic formulas for combining colors, called “color harmonies,” are used in all forms of design.


Providing alternatives for images

HTML has built-in fallbacks designed to allow web pages to work under different conditions. One of these is the alt attribute of the <img> tag. The alt attribute allows you to supply an alternate text description with any images you place on your page. Users who cannot see your images will see or hear the text you supply using the alt attribute:

<img src="banner.gif" height="30" width="535" alt="Web Style Guide">

In the above example, people accessing the site using screen reader software would hear the phrase “Web Style Guide” read aloud. Google Images would use the alternate text, or alt-text, to catalog the image.

Writing good alt-text is an epigrammatic art, challenging your ability to describe the content and function of an image in just a few words. The point is not to use words to express the details and nuances of an image but rather to describe the image within the context of the page. This distinction is critical in deciding how much, or how little, to say about an image.

For functional images, such as buttons, logos, and icons, the text should say in words the same thing that the image says visually. A banner graphic that identifies the company should do the same with the text alternative: “Acme Carpet Cleaners.” Interface icons should describe the functionality represented by the icon: “Play,” “Pause,” “Rewind,” “Fast Forward.”

At times alt-text is not useful—for example, for a print icon next to a “Print this page” link. In cases where an image is there for visual purposes only, and does not provide additional information, you should include an empty alt attribute (alt=""). An empty alt attribute hides the graphic from assistive technologies like screen reader software.

Complex content images, such as illustrations, diagrams, and charts, require more lengthy descriptions than can be included in an alt attribute. In many cases, the best approach is to include a caption with the image, which benefits all users in comprehending the information contained in the image. For example, for a chart that shows lifespan increase over time, include the data in an accessible table with the image. That way screen reader users have access to the same information, and people who comprehend numbers better than visualizations also benefit. HTML5 provides the <figure> and <figcaption> elements to make a programmatic connection between image and caption.

The W3C’s document HTML5: Techniques for Providing Useful Text Alternatives is an excellent resource for understanding the best approach to take when describing images in different contexts (www.w3.org/TR/html-alt-techniques/).

Optimizing images for the screen

The computing and web world is currently caught in an awkward straddle between the old 72–96-ppi (pixels per linear inch) or 1x display standard and the newer “retina” or 2x high-resolution display screens. In retrospect it’s surprising how long the 72–96-ppi display resolution lasted. Virtually everything else in computing has changed enormously in the twenty-five years of the web’s existence, but several factors combined to leave us stuck with the 72–96-ppi standard for so long.

We’ve made a major transition in display technologies, from the old huge cathode ray tube monitors to new flat screens capable of displaying very high resolutions. But flat screens were very expensive when they first appeared on the market, so the old 72–96-ppi standard hung on to keep the costs of the new screens reasonable. The combination of maturing flat screen technologies and increasing computing power even on mobile devices has now made dramatically higher screen resolutions possible, and over the next few years screens of 200 ppi or more will become the new standard for all kinds of computing displays.

The rise of mobile computing and the change in display resolutions leaves web developers with two major challenges in dealing with graphics:

The good news is that the HTML5 and CSS3 standards already give us many of the tools we’ll need to make the transition to better graphics on the web. However, the technology is still in transition and probably will be for a few years to come until browser makers fully implement the new tools we need to quickly identify what kind of screen our pages have landed upon, and the most efficient means to supply graphics in both mobile and desktop situations.

Efficiency

Responsive web design (rwd) has given us the conceptual framework and many of the tools for producing web content that works well for all screen sizes. For background and core page framework graphics specified in CSS the solution to dealing with various screen resolutions is straightforward: in your various CSS “breakpoint” solutions for small, medium, and large screens, you can specify small, medium, and large versions of your bitmap graphics suitably sized for each range of screen widths. Web designers can also use vector-based graphics like icon fonts and SVG graphics that work well at any resolution, or use CSS-based graphic effects that don’t require any additional graphics files at all.

This leaves us with the question of how to optimize the response to HTML-based graphics placed in-line within the page content, specified with image <img> tags. Luckily, the HTML5 specification has already proposed a useful solution to this problem: a means to specify various image size alternatives within the new <picture> element, keyed to screen width (fig. 11.15). The source attribute lets us specify a set of possible images to be served, based conditionally on the minimum width of the screen (in CSS pixels). <picture> elements must always include a conventional image element <img> as well. The built-in <img> tag provides a graceful fallback for browsers that don’t support the <picture> element. If the <picture> element is unsupported, the browser simply uses the built-in <img> element, so that everyone sees at least a medium-resolution image.

Resolution and pixel density

The second major challenge in our transition to high-resolution screen media is sending the right image to the right screen: serving moderate-resolution images to 1x devices (of whatever screen size) and high-resolution images to 2x or retina screens, except perhaps where such large images might affect page performance, as in mobile devices.

One immediate challenge web developers have faced and dealt with is how you describe sizes and distances when the number of physical or device pixels has more than doubled with new retina screens. In the older 1x world of 72–96-ppi screens the answer was obvious: one pixel in the image directly equated to one physical pixel on the display screen. If you suddenly doubled the density of display pixels and made no other changes, every image would have the same number of pixels, but on a 2x screen it would look half the size, and text would similarly be miniaturized on retina screens.

The answer to this puzzle is virtual measurements, where the pixel numbers specified by HTML and CSS no longer have a 1:1 relationship to physical or device pixels. These “CSS pixels” more or less equate the measurements of older 1x screens. Instead of a one-to-one relationship of CSS pixel to screen pixel, one “CSS pixel” would actually describe the area covered by four device pixels on a 2x screen (fig. 11.16). For typography on new high-resolution screens, responsive web design already uses the relative measure of em units, where one em is roughly the equivalent of 16-point type, regardless of the screen resolution.

Similarly, bitmap image sizes specified in HTML or CSS pixels now use virtual pixels: on a conventional 1x display one image pixel equates to one screen pixel. On a retina or 2x screen, each virtual “CSS pixel” equates to about four device pixels (fig. 11.17).

The web world is in transition, and the available methods for identifying retina or 2x screens and serving up high-resolution image just to those screens is currently pretty gimcrack, with a number of JavaScript or server-size technologies vying to fill the gap between what we need and what current web browsers can reliably deliver.

Luckily, the longer-term solution is obvious and already part of or proposed HTML5 and CSS3 code standards. The @media query tag that much of responsive web design is based upon can do a lot more than just determine screen width: media queries can also determine the resolution of the display, and the resolution versus physical size of the display—at least theoretically. The HTML5 srcset attribute and <picture> element can automatically send the right-sized image for a given screen size—at least theoretically. Much will depend on how quickly web browser makers adopt these vital image-quality tools, and exactly how consistently they are implemented.

Recommended Reading

Figures from Chapter 11: Images