College of Engineering and Technology

Department of Computer Science

3rd year 2nd semester Regular students

Course Title: Computer Graphics

Course Code: CoSc 3072

Name Id

1.Ebrahim Tufa RU0589/14

2.Madiso Melese RU1085/14

3.Tsedeke Tgstu RU1617/14

4.Bezawork Ketema RU3494/14

5.Betelihem Getinet RU1801/14

Submitted to: - Mr. Ashagire A.

Submission Date: 05/10/2016 E.C

Table of Contents
Chapter 8: Color and Images....................................................................................................................1

Introduction...........................................................................................................................................1

8.1. Color in Computer Graphics TGB, CIE.......................................................................................2

8.1.1 The RGB color model...............................................................................................................2

8.1.2 CIE Chromaticity Diagram in Computer Graphics...............................................................4

8.2. Image Formats and Their Applications: GIF, JPG, PNG............................................................6

Conclusion............................................................................................................................................15

Reference..............................................................................................................................................16
Chapter 8: Color and Images
Introduction
Color is a fundamental aspect of computer graphics. Colors are used to communicate visually in
several ways, for example an image full of cold colors (blue, gray, green) give us completely
different sensations than an image with hot colors (red, yellow, orange). Colors also influence
our attention, for example the color orange captures the attention of an observer more than other
colors.

A color model is an orderly system for creating a whole range of colors from a small set of
primary colors. There are two types of color models, those that are subtractive and those that are
additive. Additive color models use light to display color while subtractive models use printing
inks.

Images are fundamental to computer graphics systems, both from a hard ware and a software
point of view. For this reason, it is particularly important to understand how an image is
represented, which types of images exist, how the graphics hardware handles them, and so on.
Here, we provide some basic knowledge about images and their representation.

Images are (at the most basic level) arrays of values, where a value is a collection of numbers
describing the attributes of a pixel in the image (in bitmaps, e.g., the values are single binary
digits). Often these numbers are fixed-point representations of a range of real numbers; for
example, the integers 0 through 255 often are used to represent the numbers from 0.0 to 1.0.
Often, too, these numbers represent the intensity at a point in the image (gray scale) or the
intensity of one colour component at that point. The dimensions of the array are called the width
and height of the image, and the number of bits associated with each pixel in the array is called
the depth.

1|Page
8.1. Color in Computer Graphics TGB, CIE
8.1.1 The RGB color model
The RGB color model is based on the Young–Helmholtz theory of trichromatic color vision,
developed by Thomas Young and Hermann von Helmholtz in the early to mid-nineteenth
century, and on James Clerk Maxwell's color triangle that elaborated that theory (c. 1860).

The RGB color model is one of the most widely used color representation method in computer
graphics. It uses a color coordinate system with three primary colors:

R(red), G(green), B(blue)

Each primary color can take an intensity value ranging from 0(lowest) to 1(highest). Mixing
these three primary colors at different intensity levels produces a variety of colors. The collection
of all the colors obtained by such a linear combination of red, green and blue forms the cube
shaped RGB color space.

Figure 1 RGB Color Model

The corner of RGB color cube that is at the origin of the coordinate system corresponds to black,
whereas the corner of the cube that is diagonally opposite to the origin represents white. The

2|Page
diagonal line connecting black and white corresponds to all the gray colors between black and
white, which is also known as gray axis.

In the RGB color model, an arbitrary color within the cubic color space can be specified by its
color coordinates: (r, g, b).

Example:

(0, 0, 0) for black, (1, 1, 1) for white,

(1, 1, 0) for yellow, (0.7, 0.7, 0.7) for gray

Color specification using the RGB model is an additive process. We begin with black and add on
the appropriate primary components to yield a desired color. The concept RGB color model is
used in Display monitor.

A color in the RGB color model is described by indicating how much of each of the red, green,
and blue is included. The color is expressed as an RGB triplet (r, g, b), each component of which
can vary from zero to a defined maximum value. If all the components are at zero the result is
black; if all are at maximum, the result is the brightest representable white.

Figure 2 A typical RGB color selector in graphics software.

These ranges may be quantified in several different ways:

 From 0 to 1, with any fractional value in between. This representation is used in

theoretical analyses, and in systems that use floating point representations.
 Each color component value can also be written as a percentage, from 0% to 100%.
 In computers, the component values are often stored as unsigned integer numbers in the
range 0 to 255, the range that a single 8-bit byte can offer. These are often represented as
either decimal or hexadecimal numbers.
 High-end digital image equipment are often able to deal with larger integer ranges for
each primary color, such as 0..1023 (10 bits), 0..65535 (16 bits) or even larger, by

3|Page
 extending the 24-bits (three 8-bit values) to 32-bit, 48-bit, or 64-bit units (more or less
independent from the particular computer's word size).

For example, brightest saturated red is written in the different RGB notations as:

Notation RGB triplet

Arithmetic (1.0, 0.0, 0.0)

Percentage (100%, 0%, 0%)

(255, 0, 0)
Digital 8-bit per channel #FF0000 (hexadecimal)

(4095,0,0)
Digital 12-bit per channel
#FFF000000

(65535,0,0)
Digital 16-bit per channel
#FFFF00000000

(16777215,0,0)
Digital 24-bit per channel
#FFFFFF000000000000

(4294967295,0,0)
Digital 32-bit per channel
#FFFFFFFF0000000000000000

8.1.2 CIE Chromaticity Diagram in Computer Graphics

The CIE 1931 color spaces are the first defined quantitative links between distributions of
wavelengths in the electromagnetic visible spectrum, and physiologically perceived colors in

4|Page
human color vision. The mathematical relationships that define these color spaces are essential
tools for color management, important when dealing with color inks, illuminated displays, and
recording devices such as digital cameras. The system was designed in 1931 by the "Commission
Internationale de l'éclairage", known in English as the International Commission on
Illumination.

The CIE 1931 RGB color space and CIE 1931 XYZ color space were created by
the International Commission on Illumination (CIE) in 1931. They resulted from a series of
experiments done in the late 1920s by William David Wright using ten observers and John Guild
using seven observers. The experimental results were combined into the specification of the CIE
RGB color space, from which the CIE XYZ color space was derived.

The CIE 1931 color spaces are still widely used, as is the 1976 CIELUV color space.

The CIE specification is supposed to be able to accurately represent every single color the human
eye can perceive. The CIE color space was created back in 1931 in order to map out all the
colors that can be perceived by the human eye. It was made independent of any technology that
may present colors, which is why it is considered to be the most accurate color model. The CIE
Color model is a three-dimensional model that takes account of the chromatic response of the
eye; a response which changes as the cones across the retina differ in their reaction to light and
color in different areas of the retina. The CIE color space was the result of a series of
experiments done in the 1920s by John Guild and W. David Wright, which led to the
development of a model that was completely independent of any means of reproduction by any
device as it is based very closely to how humans perceive color. As a result, the CIE color model
is unsuitable for use with many technologies, including monitors and printers, although it is
widely considered the most accurate color model.

C.I.E. Color Space:

It uses combination of 3 color values that are close to red, green and blue values which are
plotted on a 3D space. Mapped physical wavelengths to perceived colors. It is used to identify
the relative similarity and differences between colors. It is used to represents the wide range of
colors.

Here,

5|Page
X: Perceived color

Y: Perceived luminance

Z: Perceived color

Colors perceivable by the human eye:

Uses of C.I.E Chromaticity Diagram in Computer Graphics:

 It is used to evaluate a color against a gamut(range).

 It is used to represent all chromaticity’s visible to the average person.

 It is used to find the range of colors.

 It is used to find dominant and complementary colors.

Advantages:

 Simple geometric construction for mixing two or more colours.

 Both Perceptual attributes used: hue and saturation.

8.2. Image Formats and Their Applications: GIF, JPG, PNG

Images are fundamental to computer graphics systems, both from a hard ware and a software
point of view. For this reason, it is particularly important to understand how an image is
represented, which types of images exist, how the graphics hardware handles them, and so on.
Here, we provide some basic knowledge about images and their representation.

6|Page
An image file format is a file format for a digital image. There are many formats that can be
used, such as JPEG, PNG, and GIF. Most formats up until 2022 were for storing 2D images, not
3D ones. The data stored in an image file format may be compressed or uncompressed. If the
data is compressed, it may be done so using lossy compression or lossless compression. For
graphic design applications, vector formats are often used. Some image file formats
support transparency.

An Image Format describes how data related to the image will be stored. Data can be stored in
compressed, Uncompressed or vector format. Each format of the image has a different advantage
and disadvantage. Image types such a TIFF are good for printing whereas image types of JPG or
PNG, are best for web.

Figure 3 Categorization of image formats by scope

GIF

GIF (Graphics Interchange Format) is a digital file format developed by CompuServe in 1987 to
compress images and short animations without any loss of information at the time, it was popular
due to its support of 256 different colors, which was considered significant. GIF uses a
compression algorithm called LZW, which was invented by Lempel, Ziv, and Welch, and
allowed for file sizes to be minimized. However, in 1994, Unisys Corporation, which owned a
patent for LZW, caused controversy when they sought royalties from users. Even though Unisys
Corporation’s patents related to LZW, the compression algorithm used in GIF, expired by 2004,
the controversy over royalties led to the development of an alternative to GIF, the portable

7|Page
network graphics (PNG) format, which offered a wider range of colors and different compression
techniques. While JPEG is commonly used to transmit high-quality images, it usually results in
larger file sizes. However, despite the competition, GIF remains widely used and popular.

Usage of GIF

 GIF animations are a great way to illustrate products, either through CGI or video loops.

 ‘How-to’ guides can use multiple GIFs to break down steps, accompanied by text.

 Animations can be used for websites, presentations, and app demonstrations.

 GIFs can also be used for fun, such as reactions in comments or emails.

 GIFs have gained significant popularity on social media, with many becoming especially
well-known. Instagram users often create GIFs on their stories that relate to their business
or modify existing popular GIFs to fit their message.

Advantages of GIF

 Easy to create using a series of images.

 Small file size compared to other formats, resulting in faster loading times without
compromising quality.

 Can be viewed without any additional software.

 Ability to convey messages and emotions effectively.

 Support transparent backgrounds, giving images a professional look.

 Supported by all major web browsers.

Disadvantage of GIF

 Using too many GIFs on a single webpage can slow down the page speed.

 Once a GIF is created, it cannot be edited again.

 Limited color depth (256 bit) compared to other image formats, resulting in blocky images.

8|Page
 A high-speed internet connection is still required for optimal loading times, despite the small
file size.

JPEG

The Joint Photographic Experts Group (JPEG) is a commission to maintain standards for image
rendering in technology. The acronym JPEG is much more commonly recognized as a file
extension for image files, representing the standard set by the international JPEG commission. A
JPEG file may also be abbreviated as JPG. Efforts to create standards for digital images led to
the creation of JPEG to promote consistency in software and hardware products. JPEG continues
to look at issues of image compression and new technology methods like wavelets, which can
promote a high standard for the creation and use of digital images in many devices, from
computers to handheld devices and other hardware. It is a very common format and is good for
digital cameras, nonprofessional prints, E Mail, Powerpoint etc., making it ideal for web use.

The Joint Photographic Experts Group created the standard in 1992. JPEG was largely
responsible for the proliferation of digital images and digital photos across the Internet and later
social media. JPEG compression is used in a number of image file formats. JPEG/Exif is the
most common image format used by digital cameras and other photographic image capture
devices; along with JPEG/JFIF, it is the most common format for storing and transmitting
photographic images on the World Wide Web. These format variations are often not
distinguished and are simply called JPEG.

The compression method is usually lossy, meaning that some original image information is lost
and cannot be restored, possibly affecting image quality. There is an optional lossless mode
defined in the JPEG standard. However, this mode is not widely supported in products.

The most common filename extensions for files employing JPEG compression
are .jpg and .jpeg, though .jpe, .jfif and .jif are also used.[46] It is also possible for JPEG data to
be embedded in other file types – TIFF encoded files often embed a JPEG image as
a thumbnail of the main image; and MP3 files can contain a JPEG of cover art in the ID3v2 tag.

9|Page
PNG(.png)

Portable network graphics (PNG) refers to a raster graphics image format used on websites and
Web applications. It is a type of open and bitmapped graphical file format that is built on the
concept of lossless data compression. It was created and conceived by the World Wide Web
Consortium as a replacement to graphics interchange format (GIF).

PNG files have the ".png" file extension and the "image/png" MIME media type. PNG was
published as an informational RFC 2083 in March 1997 and as an ISO/IEC 15948 standard in
2004. Unlike GIF, PNG is completely patent and license free, including its data compression
algorithm. It adds on to a GIF and JPEG image format by providing alpha channels, gamma
correction and a two-dimensional interlacing feature.

Its features make it possible to enhance and modify the image to a greater extent than its
predecessors. For example, a PNG image supporting alpha channel scan can have its background
changed without inferring with the rest of its appearance. It supports up to 48-bit true color and
16-bit grayscale imagery, and doesn’t deteriorate the image quality if it’s re saved or formatted.
What PNG lacks is multiple-image support that provides the animations as seen in a GIF.

PNG or Portable Network Graphics files are a lossless image format. It was designed to replace
gif format as gif supported 256 colors unlike PNG which support 16 million colors.

PNG offers a variety of transparency options. With true-color and grayscale images either a
single pixel value can be declared as transparent or an alpha channel can be added (enabling any
percentage of partial transparency to be used). For paletted images, alpha values can be added to
palette entries. The number of such values stored may be less than the total number of palette
entries, in which case the remaining entries are considered fully opaque.

PNG uses a 2-stage compression process:

 pre-compression: filtering (prediction)

 compression: DEFLATE

PNG uses DEFLATE, a non-patented lossless data compression algorithm involving a

combination of LZ77 and Huffman coding. Permissively licensed DEFLATE implementations,
such as zlib, are widely available.

10 | P a g e
Compared to formats with lossy compression such as JPEG, choosing a compression setting
higher than average delays processing, but often does not result in a significantly smaller file
size.

PNG is a lossless format, PNG encoders can preprocess image data in a lossy fashion to improve
PNG compression. For example, quantizing a truecolor PNG to 256 colors allows the indexed
color type to be used for a likely reduction in file size.

Advantages of PNG

 Portability: Transmission is independent of the software and hardware platform.

 Completeness: it's possible to represent truecolor, indexed-color, and grayscale images.

 Coding and decoding in series: allows to generate and read data streams in series, that
is, the format of the data stream is used for the generation and visualization of images at
the moment through serial communication.

 Progressive presentation: to be able to transmit data flows that are initially an

approximation of the entire image and progressively they improve as the data flow is
received.

 Soundness to transmission errors: detects the transmission errors of the data stream
correctly.

 Losslessness: No loss: filtering and compression preserve all information.

 Efficiency: any progressive image presentation, compression and filtering seeks efficient
decoding and presentation.

 Compression: images can be compressed efficiently and consistently.

 Easiness: the implementation of the standard is easy.

 Interchangeability: any PNG decoder that follows the standards can read all PNG data
streams.

 Flexibility: allows future extensions and private additions without affecting the previous
point.

11 | P a g e
  Freedom of legal restrictions: the algorithms used are free and accessible.

TIFF (.tif, .tiff)

TIFF was created as an attempt to get desktop scanner vendors of the mid-1980s to agree on a
common scanned image file format, in place of a multitude of proprietary formats. In the
beginning, TIFF was only a binary image format (only two possible values for each pixel),
because that was all that desktop scanners could handle. As scanners became more powerful, and
as desktop computer disk space became more plentiful, TIFF grew to accommodate grayscale
images, then color images. Today, TIFF, along with JPEG and PNG, is a popular format for deep-
color images.

TIFF(.tif,.tiff) Tagged Image File Format (TIFF) is a standard file format that is largely used in
the publishing and printing industry. The extensible feature of this format allows storage of
multiple bitmap images having different pixel depths, which makes it advantageous for image
storage needs. Since it introduces no compression artifacts, the file format is preferred over
others for archiving intermediate files. Although TIFF does not use compression much compared
to other image file formats, it supports different types of data compression. In the case of
photographic images, TIFF makes use of the Lempel-Ziv-Welch lossless compression method.

TIFF files can be either compressed or uncompressed but are significantly larger than JPEGs and
hence consume more space. However, this format has a few advantages over the JPEG format,
such as the ability to store multiple layered images under a single TIFF file and to use a bit depth
of 8 bits per channel or 16 bits per channel. Again, free exchange is possible between computer
platforms and applications that use TIFF. A TIFF file uses the file extension ".tif" or ".tiff". TIFF
is also known for its flexibility and has more features and capabilities than other image file
formats. Often, these add to the complication to learn and understand its features. A TIFF file is
organized into an image file header, an image file directory and a bitmap data, with the previous
two being considered mandatory.

TIFF is largely used in imaging and 3D applications, medical imaging and desktop publishing.
Most image editing software or applications are capable of working with TIFF files. TIFF,
however, has a few drawbacks. One of them is the lack of mechanism to specify the multi-layer
relationships between different TIFF pages. Also, in some ways, it lacks standard support for

12 | P a g e
advanced imaging capabilities. Another major drawback lies in the size limitation. As the format
makes use of 32-bit offsets, the file size is limited to 4 gigabytes.

Bitmap(.bmp)

Bitmap (BMP) is an image file format that can be used to create and store computer graphics. A
bitmap file displays a small dot in a pattern that, when viewed from afar, creates an overall
image. A bitmap image is a grid made of rows and columns where a specific cell is given a value
that fills it in or leaves it blank, thus creating an image out of the data. To create a bitmap, an
image is broken into the smallest possible units (pixels) and then the color information of each
pixel (color depth) is stored in bits that are mapped out in rows and columns. The complexity of
a bitmap image can be increased by varying the color intensity of each dot or by increasing the
number of rows and columns used to create the image. However, when a user magnifies a bitmap
image enough, it eventually becomes pixelated as the dots resolve into tiny squares of color on a
grid.

MPEG

The Moving Picture Experts Group (MPEG) is the family of standards and file formats which are
used in digital video. MPEG was developed by the working group formed by IEC and ISO,
which is also known as moving picture experts’ group. Because of the various sophisticated
compression techniques used, MPEGs, when compared to most audio and video formats, are
smaller in size and more or less of same quality. MPEG is a popular file format for audio and
video. For broadcasting applications with limited resources, MPEG is one of the best options as
it allows streaming high-quality video on platforms like the Internet. The file format is supported
by most electronic products and can be played using software like Windows Media Player,
Cyberlink PowerDVD, Apple Quick Time Player, etc.

MPEG Features:

13 | P a g e
  Compared to most formats, are smaller in size.
 Sophisticated compression techniques.
 Compared to most formats, superior audio and video quality.
 Major standards are: MPEG1, MPEG2, MPEG3, MPEG4, and MPEG7 MPEG21.
 Many simple, cheap decoders.
 Supported by all popular browsers.
 Both a non-commercial and cross-bros
 High image resolution and multi-channel sound technique.
 Uses asymmetric compression methodology.

EPS(.eps)

Adobe developed the EPS format in the late 1980s to become a standard for exchanging images
across different platforms and devices. While various applications and users adopted the format,
other image formats overshadowed it, such as .JPEG and .PNG.

Although EPS never became as widely used as Adobe intended, graphics professionals
commonly save their artwork in the format, such as icons and drawings. For example, graphic
designers often use professional vector image editors, such as Adobe Illustrator or Serif Affinity
Designer, to save artwork as EPS files for large print jobs (e.g., posters, banners, and billboard
advertisements) because of the format's scalability.

Encapsulated PostScript file is a common vector file type. EPS files can be opened in
applications such as Adobe Illustrator or CorelDRAW.

RAW Image Files (.raw, .cr2, .nef, .orf, .sr2)

These Files are unprocessed created by a camera or scanner. Many digital SLR cameras can
shoot in RAW, whether it is a .raw, .cr2, or .nef. These images are the equivalent of a digital
negative, meaning that they hold a lot of image information. These images need to be processed
in an editor such as Adobe Photoshop or Lightroom. It saves metadata and is used for
photography.

14 | P a g e
A RAW file is a type of image file created by modern digital cameras. All enthusiast and
professional-level cameras will give you the option to shoot in RAW. And even some beginner
digital cameras provide that option too.

Unlike other image files, a RAW format file holds on to the unchanged information from the
camera sensor. This gives you much more freedom to edit your image in post-processing.

Conclusion
In conclusion, understanding color models like TGB and CIE, as well as image formats like GIF,
JPG, and PNG, is essential in computer graphics. The RGB model provides a way to represent
colors by combining red, green, and blue channels, while the CIE model offers standardized
color spaces for consistent color reproduction. Image formats like GIF, JPG, and PNG serve
different purposes based on factors like file size, image quality, and transparency support. By
utilizing these models and formats effectively, computer graphics professionals can create
visually appealing and realistic digital images.

Color models and image formats are the linchpins of computer graphics, determining the
accuracy and usability of digital images. While models like RGB and CIE ensure that colors are
rendered and perceived consistently, image formats like GIF, JPG, and PNG provide the
flexibility and efficiency needed for various graphic applications. They cater to the diverse needs
of digital content, from simple web graphics to rich, detailed photographs.

As computer graphics technology continues to evolve, the interplay between color models and
image formats will remain crucial in shaping the visual experience. Whether it's for web design,
photography, or digital art, an understanding of these concepts is essential for anyone working
with digital images. The choice of color model and image format is a decision that impacts the
quality, accessibility, and effectiveness of visual content in our increasingly digital world.

15 | P a g e
Reference
Richard S. Wright et.al. OpenGL® SuperBible: Comprehensive Tutorial and Reference,
Fifth Edition Addison-Wesley Professional
Glen W Rowe, Computer Graphics with Java, PALGRAVE, 2001

16 | P a g e