CPE 101 Lecture Note (L2-N1)

Images: Introduction
An image is a visual representation of data stored in binary form. They take the form of
photographs, graphics and individual video frames. For this purpose, a digital image is a picture
stored in electronic form. An image can also be described in terms of vector graphics or raster
graphics. An image stored in raster form is sometimes called a bitmap. An image map is a file
containing information that associates different locations on a specified image as a Charged
Coupled Device (CCD). The CCD counts the number of electrons per cell and lights the cells
(or a grid of cells) that create visual colors (see Fig. 1). Each cell in an image is called a pixel
and corresponds to one color. Each pixel is stored in four bytes, and its color is drawn using
the RGB scheme.

Every color is created from

pure or a combination of red,
green, and blue (RGB), and
each of these colors has a range
of numbers from 0 - 255. Digital
technology allows the computer
to store the images and display
them based on the screen Fig. 1: Image map with an array of pixels
resolution. The screen resolution measures how fine the image can be. Pixels are measured in
"dots-per-inch" (dpi), calculated by:

𝑑𝑝𝑖 = (𝑛𝑢𝑚𝑏𝑒𝑟 𝑜𝑓 𝑝𝑖𝑥𝑒𝑙𝑠) / (𝑛𝑢𝑚𝑏𝑒𝑟 𝑜𝑓 𝑠𝑞𝑢𝑎𝑟𝑒 𝑖𝑛𝑐ℎ𝑒𝑠) (1)

An image is usually represented as [x × y] pixels for horizontal and vertical components of

the array, respectively. A full HD (for example is): 1920x1080 pixels = 2073600 pixels (2.073
Megapixels or simply 2.073M)

The aspect ratio of a display unit is the number of pixels horizontally divided by the number of
pixels vertically (x/y).

Standard digital image file formats include the following.

JPEG

JPEG is a graphic image file produced according to the Joint Photographic Experts Group
standard. This group of experts develops and maintains standards for a suite of compression
algorithms for computer image files. JPEGs usually have a .jpg file extension.

GIF
GIF stands for Graphics Interchange Format. GIFs use a two-dimensional (2D) raster data type
and are binarily encoded. GIF files usually have the .gif extension.
GIF89a is an animated GIF image format. The primary benefit of this format is the ability to
create and play an animated image on a webpage. A twirling icon, a banner with a hand that
waves or letters that magically get larger are examples of animated GIFs. GIF89a can also be
specified for interlaced GIF presentations.

PNG

PNG is the Portable Network Graphics file format for image compression. It provides several
improvements over the GIF format. Like a GIF, a PNG file is compressed in a lossless manner,
meaning that all image information can be restored when decompressing the file for viewing.
PNG files typically have a .png extension.
SVG

SVG (Scalable Vector Graphics) is a vector file used to display 2D graphics, charts and
illustrations online. SVG files do not depend on unique pixels to create images so they can
scale up or down without losing resolution. This means that the file can be viewed on a
computer display of any size and resolution, such as the small screen of a smartphone or a large
widescreen display on a PC.

SVG files are also searchable and indexable since they use an Extensible Markup Language
(XML) format. Any program, such as a browser, that recognizes XML can display the image
using the information provided in the SVG file. SVG files usually have an .svg extension.

TIFF

TIFF (Tag Image File Format) is a standard format for exchanging raster graphic (bitmap)
images between application programs, including those used for scanner images. TIFF files have
a .tiff or .tif file name suffix.

Images-1: Digital Images

We see images on computers all the time. They are everywhere and look natural and smooth,
but behind the scenes, they are made of a lot of numbers. Here, we will look behind the curtain,
seeing how images are put together. In the computer, what looks like a whole image to us is a
structure made of many little numbers.
Here is a digital image of some yellow flowers (Fig. 2). When Zoom-In (10x) on the upper left,
a large number of tiny squares (the pixels) become visible as shown in Fig. 3. Each pixel shows
only one color. A typical digital image has 5-20 megapixels.

Fig. 2: Image of a flower Fig. 3: Pixelated zoom of Fig. 2

2
(X, Y) Grid of Pixels

We will not work with individual (x, y) coordinates too much. You just need to appreciate that
there is this (x, y) coordinate system, so that every pixel in an image has some (x, y) coordinate
that identifies its location within the image grid as we have earlier shown in Fig. 1. The pixels
are organized as a (x, y) grid such that:

• X grows going to the right

• Y grows going down
• x=0, y=0 “origin” at upper left - (0, 0)
• x=1, y=0 neighbor to the right of origin - (1, 0)
• x=0, y=1 neighbor below the origin - (0, 1)
This coordinate system allows us to locate any pixel and change its color based on the RGB
system.

RGB Everywhere

The RGB – (red, green, blue) scheme is used to represent the color of any pixel. Other schemes
are HEX, CMYK, LAB, HSL, XYZ, LUV and HWB.

The RGB color light is represented by a number between 0 and 255; 255 = maximum
brightness, and 0 = turned off. Therefore any color can represented by three numbers 0 – 255.
Not just 0 and 255, intermediate values (12, 238, 39) e.g. r:250 g:10 b:240 - purple, or just say
(250, 10, 240); r:100 g:100 b:0 - dark yellow, or just say (100, 100, 10).

RGB is interpreted almost everywhere by display units, which include but not limited to human
vision (human retina receptors), digital camera sensors, the Liquid Crystal Display, Light
Emitting Diode (LED), Organic LED (OLEM), and Active-Matrix OLED (AMOLED).

Assignment No.1: Find the meaning of the last 7 color schemes and give the RGB number
for grey and their equivalent in other schemes.