Bitmapped images, also known as raster images, are made up of tiny dots called pixels. In Web design, you might refer to these pixels as CSS pixels, as mentioned earlier. The image of the “H” in Figure 6.20 gives an illustration. It is made up of both the white background and the “H,” which are inseparable.
Representing images in pixels inevitably produces properties that can be used to describe bitmapped images. These properties revolve around how many pixels are there in an image or specific area of it. They influence image quality and therefore have design implications. The three main properties are image resolution, pixels per unit length, and color depth.
1. Image Resolution
Image resolution describes how many pixels an image has, and it is specified in two ways. One is as pixel dimensions, and the other is as megapixels. Pixel dimensions are the width and height of an image in pixels. For example, 800 x 600 means that an image has width and height of 800 and 600 pixels, respectively. The term megapixels, on the other hand, describes the total number of pixels in an image and is expressed in megapixels. It is typically used for specifying the maximum resolution that a digital camera can produce and is the product of the width and the height of an image, in pixels. For example, a black and white image with a pixel dimension of 800 x 600 is about 0.48 megapixels (i.e., 480,000 pixels). A higher image resolution produces a bigger image when displayed or printed. Figure 6.21 shows an illustration. The design implication is that images that are too big for the screen, even when intended to be the only element on the screen or page; this often compels vertical and horizontal scrolling in order to view all parts of the image, essentially compromising user experience.
Pixel dimension should be determined when creating an image in order to prevent significant resizing later. Failing this, the usual practice is to, at least, create images of larger pixel dimensions than needed and then reduce and sharpen them in a graphics program, if necessary. Making small pixel dimensions bigger is much like trying to spread fewer than enough pixels over a larger area, which the computer responds to by, for example, creating “fake pixels,” based on the values of original pixels, to make up for missing ones, resulting in a poorly defined image. This technique of using “fake pixels,” or pixels with estimated values, is known as image interpolation, and there are various ways of achieving it. Figure 6.22 demonstrates the effects of image enlargement. The general practice is to not reduce size to the point where an image is so small that important details are no longer discernible or, in the case of enlargement, to gradually increase size (e.g., by 10% each time) to the point where an image starts getting blocky or blurry.
1.1. About Image Resizing
If images must be resized, then necessary things need to be done to preserve as much of the original characteristics as possible. There are a number of ways to achieve this. A graphics program, HTML, or CSS may be used to specify the desired size. The image may also be cropped. When an image is sized by specifying new dimensions, a possible byproduct that holds relevance in image display quality is image aspect ratio (IAR), which is the width of an image divided by its height, or the ratio of width to height. The aspect ratio of an image is established from the starting width and height when the image is created, and width and height are specified in various ways, depending on how the image is created. For an image created with a graphics program, width and height are among the parameters specified for a new document. For a scanned image, they are the dimensions of
the document that is scanned, but they may also be specified. For example, if the size of the document scanned or the dimensions set is 5 x 3 inch and scanning resolution is 300 pixels per inch (ppi), then the aspect ratio of the image created is:
= (width x resolution):(height x resolution) =
(5 x 300):(3 x 300) = 1500:300 = 5:3
The aspect ratio of an image must be retained; otherwise, distortion can occur, as shown in Figure 6.23.
In contrast, when images are cropped, there is no aspect ratio problem, because a new aspect ratio is created when an image is cropped, which means that cropping can also be used to change an image’s aspect ratio. Image cropping is the trimming off of the edges of an image, and it is typically done in a graphics editor. The only issue with cropping is that it may adversely reduce the scope of an image, because some important details at the edges that complement the main elements in the image may be removed.
However, cropping could also be used deliberately for this purpose in order to remove unwanted details from an image and better focus on the important elements. In such a case, an image may first be enlarged and then cropped, or vice versa. Figure 6.24 shows an example. Notice the difference in presence, focus, and aspect ratio.
2 Pixels per Unit Length
Pixels per unit length (or pixel density) describes the number of pixels per unit length and is also, confusingly enough, referred to as resolution in some context. In Englishspeaking countries, the pixels per unit length most commonly used is pixels per inch (ppi), followed by pixels per centimeters (ppcm). Although it is a measure more commonly used to describe the quality of a display device, it is actually a more definite indicator of quality in bitmapped images than in pixel dimensions or megapixels. For example, if you are told that an image has a resolution of 72 ppi, this immediately conveys the sense of how densely packed pixels are in the image and therefore what quality to expect. On the other hand, if you are told that an image has a resolution of 398 x 265 pixels, or 0.10 megapixels, there is no indication of pixel density. In order for these values to make more sense in terms of quality, it would be necessary to know the physical dimensions of the image, so as to judge how densely packed the pixels are and therefore how much details are represented in the image.
Like aspect ratio, the ppi value of an image is determined at the point of creation. It
affects the pixel dimensions of the image and the number of pixels that the image contains. For example, a 4 x 6 inch photograph scanned at 100 ppi will result in a bitmapped image that has a ppi value of 100, pixel dimensions of 400 x 600, and a total pixel number of 240,000 (i.e., 400 x 600). On the other hand, the same photograph scanned at 300 ppi will produce an image that has a 300 ppi value and a total pixel number of 2,160,000 (i.e., 1200 x 1800). The ppi specified when an image is created is usually saved with it. This is why it is sometimes referred to as embedded resolution. Generally, the choice of ppi depends on how an image will be outputted, since ppi affects image display and printing differently.
2.1. PPI and Displayed Image Quality
Incidentally, when an image is intended for display on a monitor screen, ppi affects quality only indirectly. This is because monitors do not display images in pixels per inch but based on pixel dimensions; that is, a 300 x 400 pixel image with 100 ppi, for example, is displayed on a standard-resolution screen with 300 pixels across and 400 pixels down. This means that no matter what ppi is used to create an image, it will not necessarily affect its display quality. To demonstrate, a 5 x 4 inch document scanned at 72 ppi and 300 ppi will produce images with pixel dimensions of 360 x 288 (i.e., [72 x 5] x [72 x 4]) and 1500 x 1200, respectively, which will be different in size when displayed, as shown in Figure 6.25, in which the two images are displayed together in a Web browser. This basically means that when an image is displayed on the screen, ppi only affects the size at which it is displayed, not the quality. Naturally, zooming can then be used to increase or decrease the size of the image.
So, what ppi should be used when creating images for Web design? Although computers and other devices used to access websites generally have ppi that is higher than 72 ppi, there is no logical reason to produce images intended for screen display at anything more than 72 ppi, since higher ppi will only result in larger files. However, it is a different matter when images are intended to be printed.
2.2. PPI and Printed Image Quality
In contrast to its effects on displayed images, ppi affects the quality of printed images directly. So, typically, what looks good on screen may not look good when printed. This is because printers generally print based on dots per inch (dpi) and also at a much higher resolution than computer monitors. Modern printers, for example, commonly have a resolution of 600 dpi and higher. This means that an image needs to be 600 ppi or more to ensure good quality when printed. If the resolution of an image is much lower than a printer’s resolution (say a 72 ppi image is outputted on a 600 dpi printer), then the printed image will be either too small in size or not detailed enough to be considered good quality.
Generally, higher ppi values ensure better-quality printed images with finer details and subtler color transitions. The implication of this is that if images are intended to be printed, then it is important to ensure that they are produced using high enough ppi/dpi values. It is also important to know that a low-quality (low-ppi) image cannot be improved by
printing it at a higher dpi. Increasing print resolution will only make pixels larger, resulting in pixelation. Likewise, once an image is created, increasing its ppi in a graphics program will not necessarily improve its quality. This means that where you want an image to be available both for screen viewing and printing, then separate versions should be provided.
3. Color Depth
To better understand the meaning of color depth, it is useful to know how color is produced on a device screen. A color display screen is made up of tiny dots called pixels, each of which can be made to produce any of many colors at a time by mixing three different colors in varying degrees. Each color component is represented with a number of bits, and color depth (also known as bit depth or pixel depth) is the total number of bits used to represent the three color components. Color depth is also referred to as bits per pixel (bpp), even bytes per pixel (bpp), and it determines the number of distinct colors available to use for a pixel as well as the color quality of an image. For example, 24-bit color depth (known as true color), which provides 16,777,216 colors theoretically produces better color quality than 8-bit color depth, which provides 256 colors. In theory, the higher the color depth, the more accurately the colors of an image can be represented, and therefore, the more realistically rich colors can be represented. Of course, the file size is also bigger. Figure 6.26 shows the same photograph represented with different color depths. Notice the depreciation in color quality and the posteriza- tion effect (i.e., the banding of colors in different areas) as color depth drops to 4-bit and 1-bit. Although, in theory, 24-bit produces better quality than 8-bit, in reality, the difference is usually not visible.
Some technologies used for creating images, such as scanners, offer higher color depths than 24-bit, such as 32-bit and 48-bit, but these are unlikely to produce any discernable benefits, since humans are capable of differentiating only between about 10 million colors, most, if not all, of which are covered by 24-bit color depth. Also, humans are not very good at distinguishing between close variations of the same color, unless they are placed close to each other. However, higher color depths can be useful, because the extra bits can be used for other functions. For example, in 32-bit color depth, 8 bits are used, each for the red, green, and blue color components (or channels) and the extra 8 bits for an alpha channel (or transparency channel). An alpha channel specifies which parts of an image should be transparent and by how much. Its value ranges from 0 to 255. When it is set to 0, the specified area of an image is fully transparent, and when set to 255, it is fully opaque. The channel is usually controlled with the opacity feature in graphics-editing programs and is usually specified as a value between 0% and 100% or between 0 and 1.0. The alpha channel has an important role in the production of images.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.