Chapter 2 ■ an IntroduCtIon to Content CreatIon: 2d new MedIa asset FundaMentals
Digital Image Resolution and Aspect Ratio: Defining Your Image Size
and Shape
As you probably know, digital imagery is made up of two-dimensional (2D) arrays of pixels. Pixels is short
for Picture (pix) Elements (els). The number of pixels in an image is expressed by its resolution, which
is the number of pixels in the image Width (or W, sometimes referred to as the x-axis) and Height (or H,
sometimes referred to as the y-axis) dimensions. The more pixels your image has, the higher the resolution
is said to be. This is similar to how digital cameras work, as the more megapixels there are in your image
capture device (which is usually your camera’s Charged-Coupled Device (CCD), which captures the image
data), the higher the image quality that can be achieved.
To find the total number of image pixels, multiply the width pixels by the height pixels. For instance, a
wide VGA 800x480 image will contain 384,000 pixels, which is exactly 3/8ths of 1MB. This is how you would
find the size of your image, both as far as kilobytes (or megabytes) used and height and width on the display
screen.
The shape of a digital image asset is specified using the image aspect ratio. Aspect ratio is the
width:height ratio for the digital image and defines a square (1:1 aspect ratio) or rectangular (also known
as widescreen) digital image shape. Displays featuring a 2:1 (widescreen) aspect ratio, such as 2160x1080
resolution, are widely available.
A 1:1 aspect ratio display or image is always perfectly square, as is a 2:2 or 3:3 aspect ratio image. An
IoT developer might see this aspect ratio on a smart watch, for instance. It is important to note that it is the
ratio between these two width and height numbers, or X and Y variables, that define the shape of an image
or a display screen, not the actual numbers themselves. The actual numbers define the resolution, or total
pixel array capability, for a screen.
An aspect ratio should always be expressed as the smallest pair of numbers that can be achieved
(reduced) on either side of the aspect ratio colon. If you paid attention in high school while you were
learning about the lowest common denominator, then an aspect ratio will be very easy for you to calculate.
I usually do aspect ratio calculation by continuing to divide each side of the colon by 2. For instance, if you
take the SXGA 1280x1024 resolution, half of 1280x1024 is 640x512, and half of 640x512 is 320x256. Half of
320x256 is 160x128, half of that again is 80x64, half of that is 40x32, and half of that is 20x16. Half of 20x16 is
10x8, and half of that gives you the 5:4 aspect ratio for SXGA.
Digital Image Color Theory and Color Depth: Defining Precise Image
Pixel Colors
The color values for each digital image pixel can be defined by an amount of three different colors, red,
green, or blue (RGB), which are present in different amounts in every pixel. Consumer electronic display
screens leverage additive colors, which is where wavelengths of light for each RGB color channel are
summed together in order to create 16.8 million different color values. Additive color is utilized in LCD,
LED, or OLED displays. It is the opposite of subtractive color, which is used in printing. To show you the
different results, under a subtractive color model, mixing red with green (inks) will yield purple colors,
whereas in an additive color model, mixing red with green (light) creates a vibrant yellow coloration.
Additive color can provide a much broader spectrum of colors than subtractive color can provide.
There are 256 levels of brightness for each red, green, and blue color value that is held for each pixel.
This allows you to set 8 bits of data value range, or zero through 255, controlling color brightness variation
for each of the red, green, and blue values. This data is represented using hexadecimal notation, from a
minimum of zero (#00, or off, all dark, or a black color) to a maximum of 255 (#FF, or fully on, or a maximum
RGB color contributed, making white).
The number of bits that are used to represent the number of digital image pixel colors supported is
referred to as color depth for an image and uses “power of 2” just like 3D does for texture mapping, which
we will get into in the next chapter. So, PNG8 images use 256 colors, PNG7 uses half as many as that (128),