Computer graphics: 3 credits (32 hours1.

Digital images
Bitmap images
Vector images
Characteristics of bitmap images
Image compression
Final improvements of images
Practicals on the creation buttons and
images for the Web
2. Sound
Definition of sound
Characteristics of sound
Digitalization of sound
Mono and stereo sound
Size of a sound file
Sound compression
3. Video
Definition of video
Analogue video
Digital video
Compression of digital video (notion on
Codec)
Field Applications of Computer Graphics

Computer graphics has a wide range of field applications, where it is

utilized to create visually engaging and informative content. Let's
explore some of the key fields where computer graphics finds
significant application:

1. Entertainment Industry:
o Film and Animation: Computer graphics plays a crucial role
in creating stunning visual effects, realistic animations, and
computer-generated imagery (CGI) in movies, TV shows,
and animated films.
o Video Games: Computer graphics is essential for creating
immersive and visually appealing game environments,
characters, and special effects.
2. Advertising and Marketing:
o Graphic Design: Computer graphics is extensively used in
designing logos, advertisements, brochures, and other
promotional materials to communicate messages
effectively.
o Visual Effects: Computer-generated visuals and animations
are employed to enhance advertisements and create
attention-grabbing marketing campaigns.
3. Engineering and Manufacturing:
o CAD/CAM: Computer-aided design (CAD) and computer-
aided manufacturing (CAM) utilize computer graphics to
create precise 2D and 3D models of products, components,
and prototypes.
o Simulation and Visualization: Computer graphics is used to
visualize complex engineering simulations, such as fluid
dynamics, structural analysis, and mechanical systems.
4. Medical Imaging and Visualization:
o Medical Imaging: Computer graphics plays a vital role in
generating detailed visualizations of medical scans, such as
 CT scans, MRI images, and ultrasound data, aiding in
diagnosis and treatment planning.
o Surgical Simulations: Computer graphics is utilized in
surgical training and simulations to create realistic virtual
environments for practicing procedures and improving
surgical techniques.
5. Education and Training:
o E-Learning: Computer graphics is employed in educational
materials, interactive learning modules, and virtual
laboratories to enhance understanding and engagement in
various subjects.
o Virtual Reality Training: Computer graphics combined with
VR technology offers immersive training simulations for
industries like aviation, military, and healthcare.
6. Geographic Information Systems (GIS):
o Mapping and Visualization: Computer graphics is used to
create interactive maps, visualize geographical data, and
analyze spatial relationships, aiding in urban planning,
environmental studies, and navigation systems.
7. Virtual Reality (VR) and Augmented Reality (AR):
o Simulation and Training: Computer graphics is employed in
creating realistic virtual environments for training
simulations in fields like aviation, military, healthcare, and
emergency response.
o Entertainment and Gaming: VR and AR technologies
leverage computer graphics to create immersive
experiences, whether it's exploring virtual worlds or
overlaying computer-generated elements onto the real
world.
8. Data Visualization:
o Infographics: Computer graphics is utilized to represent
complex data sets visually, making it easier to understand
and interpret information in fields like statistics, economics,
and market analysis.
o Scientific Visualization: Computer graphics techniques
enable the visualization of scientific data, such as molecular
structures, climate patterns, and astronomical phenomena,
aiding in research and analysis.
9. Simulation and Virtual Prototyping:
o Engineering Simulations: Computer graphics is used to
simulate physical phenomena, such as fluid dynamics,
structural mechanics, and electromagnetic fields, allowing
engineers to test designs and optimize performance
virtually.
o Product Prototyping: Computer graphics assists in creating
virtual prototypes of products, enabling visualization,
design evaluation, and cost-effective iterations before
physical production.
10. Art and Visual Expression:
o Digital Art: Computer graphics provides artists with tools to
create digital paintings, illustrations, and sculptures,
pushing the boundaries of visual creativity.
o Visual Effects in Live Performances: Computer graphics is
employed in live events, concerts, and theater productions
to enhance performances with interactive visuals, projection
mapping, and real-time effects.
11. Scientific Research and Data Analysis:
o Molecular Modeling: Computer graphics allows scientists to
visualize and study complex molecular structures, aiding in
drug discovery and bioinformatics research.
o Astronomy and Astrophysics: Computer graphics assists in
visualizing astronomical data, including celestial objects,
galaxies, and cosmological simulations, helping scientists
understand the universe.
Unit 1: Introduction to Bitmap Images
Bitmap images are one of the fundamental types of
digital images. In this section, we will explore the
characteristics of bitmap images, their representation,
and how they are used in computer graphics.
1. Bitmap Images:
o Bitmap images are composed of a grid of

individual pixels, where each pixel represents a

single color. The arrangement of these pixels
forms the image.
o Each pixel in a bitmap image is assigned a

specific color value, which determines its

appearance.
o Bitmap images are resolution-dependent,
meaning their quality and level of detail are
determined by the number of pixels per inch
(PPI) or dots per inch (DPI).
2. Vector Images:
o In contrast to bitmap images, vector images are

based on mathematical descriptions of shapes

 and lines. They are composed of geometric
primitives such as points, lines, curves, and
polygons.
o Vector images are resolution-independent,
meaning they can be scaled up or down without
losing quality.
o Unlike bitmap images, which require a large

amount of storage space, vector images are

typically smaller in file size.
3. Characteristics of Bitmap Images:
o Resolution: The resolution of a bitmap image

refers to the number of pixels it contains. Higher

resolution images have more pixels, resulting in
sharper and more detailed representations.
o Color Depth: Bitmap images have a specific

color depth, which determines the number of

colors that can be represented. Common color
depths are 8-bit (256 colors), 24-bit (true color),
and 32-bit (including an alpha channel for
transparency).
o File Format: Bitmap images can be saved in

various file formats such as JPEG, PNG, GIF,

and BMP, each with its own advantages and
limitations.
4. Image Compression:
 Bitmap images can be compressed to reduce file size
and optimize storage and transmission. There are two
main types of compression: lossless and lossy
compression.
  Lossless Compression: This compression method
reduces file size without sacrificing image quality.
Examples include ZIP, PNG, and GIF formats.
 Lossy Compression: This compression method achieves
higher compression ratios but sacrifices some image
quality. JPEG is a commonly used lossy compression
format.

1. Lossless Compression:
o Lossless compression algorithms reduce the file

size of an image without sacrificing any visual

quality. This means that when the compressed
image is decompressed, it will be identical to the
original image.
o Lossless compression is suitable for images that

contain sharp edges, text, or graphics with

distinct patterns, where maintaining the exact
pixel values is crucial.
o Common lossless compression formats include

PNG (Portable Network Graphics) and GIF

(Graphics Interchange Format).
o Lossless compression is achieved through
various techniques such as run-length encoding,
Huffman coding, and Lempel-Ziv-Welch
(LZW) compression.
2. Lossy Compression:
o Lossy compression algorithms achieve higher

compression ratios but sacrifice some image

quality. This means that when the compressed
image is decompressed, there may be a slight
loss of detail or visual artifacts.
 o Lossy compression is suitable for images where
some loss of quality is acceptable, such as
photographs, natural scenes, or images with
smooth gradients.
o The most common lossy compression format for
images is JPEG (Joint Photographic Experts
Group).
o Lossy compression achieves higher
compression ratios by discarding some image
data based on perceptual factors and visual
masking.
Practical considerations for image compression:
1. Choosing the appropriate compression format:
Depending on the image content and the desired
level of compression, you need to select the right
format. For example, PNG for lossless compression
or JPEG for lossy compression.
2. Adjusting compression settings: With lossy
compression, you can typically adjust the level of
compression to balance file size and image quality.
Higher compression ratios result in smaller file sizes
but may introduce more noticeable artifacts.
3. Previewing and comparing compression results: It is
essential to preview the compressed image and
compare it with the original to ensure the desired
level of quality is maintained. This step allows you
to make adjustments if necessary.
4. Iterative compression: In some cases, compressing
an image multiple times with a lossy compression
 algorithm can lead to a cumulative loss of quality.
It's advisable to keep the original image as a backup
and work with copies to avoid degradation.

Use case
When it comes to web design and development, image
compression plays a crucial role in optimizing website
performance and improving user experience. Let's
explore some practical techniques for compressing
images specifically for web design and development:
1. Choosing the Right File Format:
o For images with a limited color palette or

transparency, consider using PNG format,

which supports lossless compression. PNG-8 is
suitable for simple graphics with a limited
number of colors, while PNG-24 can handle
more complex images with transparency.
o For photographs or images with gradients,

JPEG format is more appropriate due to its

efficient lossy compression. Adjusting the
compression level can balance image quality
and file size.
2. Resizing and Cropping:
o Before using images on a website, resize them

to the exact dimensions required for display.

This eliminates unnecessary data and reduces
file size.
 o Crop images to remove any unwanted areas,
focusing on the essential elements. This helps
reduce file size and ensures that only relevant
content is displayed.
3. Optimizing Image Quality and Compression Levels:
o For JPEG images, experiment with different

compression levels to find the sweet spot

between image quality and file size. Higher
compression ratios result in smaller files but
may introduce more noticeable artifacts.
o Utilize image editing software or online
optimization tools to adjust image quality,
remove unnecessary metadata, and apply
additional compression techniques.
4. Lazy Loading and Responsive Images:
o Implement lazy loading techniques to delay the

loading of off-screen images until they are

needed. This improves page load times and
reduces initial bandwidth consumption.
o Use responsive images with the HTML "srcset"

attribute to serve different image sizes based on

the user's device and viewport. This ensures that
images are appropriately sized for different
screen resolutions.
5. Content Delivery Networks (CDNs):
o Consider using a CDN to store and serve your

website's images. CDNs distribute content

across multiple servers globally, ensuring faster
image delivery to users in different geographic
locations.
6. Image Compression Tools:
o Explore image compression tools such as
TinyPNG, JPEGmini, or Kraken.io. These tools
automatically optimize image files without
significant loss in quality, making the process
more efficient.
5. Final Improvements of Images:
 Image Editing Software: Bitmap images can be enhanced
and modified using image editing software such as Adobe
Photoshop, GIMP, or Pixlr. These tools allow adjustments
to color, contrast, brightness, and other image attributes.
 Image Filters and Effects: Various filters and effects can
be applied to bitmap images to achieve artistic or stylistic
enhancements, such as blurring, sharpening, or adding
textures.

1. Image Editing Software:

o Adobe Photoshop: Adobe Photoshop is a
powerful and widely used image editing
software, offering a comprehensive set of tools
and features. It allows you to adjust color,
contrast, brightness, saturation, and other image
attributes with precision. You can also crop,
resize, and retouch images, remove
backgrounds, and perform advanced editing
techniques.
o GIMP (GNU Image Manipulation Program):

GIMP is a free and open-source alternative to

Adobe Photoshop. It provides similar
functionality, including image retouching, color
 correction, and various selection tools. GIMP is
a great option for those who don't have access to
Photoshop or prefer open-source software.
o Pixlr: Pixlr is a web-based image editing tool

that offers a simplified interface and basic

editing features. It is accessible from any web
browser, making it convenient for quick edits
and adjustments on the go.
2. Image Filters and Effects:
o Filters: Image filters are predefined
transformations that can be applied to images to
alter their appearance. Some common filters
include blur, sharpen, noise reduction, color
correction, and artistic filters like sepia or black
and white. Filters can be adjusted in intensity to
achieve the desired effect.
o Effects: Effects are stylized enhancements that

can be applied to images to create unique looks

or moods. Examples include adding vignettes,
lens flares, gradients, textures, or other creative
elements. Effects can be combined with filters
and other editing techniques to achieve specific
visual outcomes.
By utilizing image editing software and applying filters
and effects, you can take your bitmap images to the next
level, enhancing their visual impact and creating unique
artistic expressions.
 6. Practicals on Creating Buttons and Images for the
Web:
 Creating Web Graphics: Bitmap images are widely used in
web design, including buttons, icons, banners, and other
graphical elements. Web graphics need to be optimized for
fast loading and minimal file size.
 Image Editing for the Web: We will explore practical
techniques for creating and optimizing bitmap images
using image editing software. This includes resizing,
cropping, compressing, and exporting images in
appropriate web formats.

Creating buttons and images for the web involves

using bitmap images and optimizing them for fast loading
and minimal file size. Let's explore practical techniques
for creating and optimizing web graphics using image
editing software:
1. Creating Web Graphics:
o Identify the purpose: Determine the purpose of

the graphic, whether it's a button, icon, banner,

or any other graphical element. Understanding
its purpose will help you design an appropriate
and visually appealing graphic.
o Define dimensions: Determine the dimensions

of the graphic based on where it will be placed

on the web page. Consider factors such as screen
resolutions and responsive design principles.
o Design elements: Use image editing software to

create the desired design elements, such as

 shapes, colors, typography, and effects. Ensure
that the design is visually appealing and aligns
with the overall website aesthetic.
2. Image Editing for the Web:
o Resizing: Resize the graphic to the exact

dimensions required for display on the web.

This reduces file size and ensures the graphic
fits seamlessly into the web page layout.
o Cropping: Remove any unnecessary areas from

the graphic to focus on the essential elements.

Cropping helps eliminate unnecessary data and
reduces file size.
o Compression: Utilize image compression
techniques discussed earlier to optimize the file
size of the graphic without compromising visual
quality. Adjust compression settings based on
the graphic's complexity and importance.
o Exporting: Save the graphic in an appropriate

web format such as PNG or JPEG. Ensure that

the file format supports the desired level of
compression and maintains the visual quality
required for web display.
By following these practical techniques, you can create
visually appealing web graphics while optimizing their
file size for efficient loading and seamless user
experience.
Exercise 1: Creating a Simple Web Button
Task:
Create a simple web button with the following specifications:

 Dimensions: 200 pixels wide and 50 pixels high.

 Background color: #FF0000 (red).
 Text color: #FFFFFF (white).
 Text content: "Click Me".

Practical Task 1:
Create a button that matches the specifications mentioned above using
your preferred image editing software. Save the button as a PNG file
with an appropriate name.

Exercise 2: Optimizing Web Graphics

Task:
Optimize a high-resolution image for web usage.

 Image: A photograph of a landscape with dimensions of 1920

pixels wide and 1080 pixels high.
 Reduce the file size while maintaining an acceptable level of
visual quality.

Practical Task 2:
Using your image editing software, resize the image to a web-friendly
size, such as 800 pixels wide and 450 pixels high. Apply appropriate
compression techniques to reduce the file size without significant loss
of visual quality. Save the optimized image as a JPEG file.

Exercise 3: Creating a Web Banner

Task:
Create a web banner with the following specifications:

 Dimensions: 1200 pixels wide and 300 pixels high.

 Include a visually appealing background image or color gradient.
 Add text content relevant to the banner's purpose.

Practical Task 3:
Design a web banner based on the specifications mentioned above
using your image editing software. Incorporate an appropriate
background image or color gradient. Add relevant text content using
suitable font styles and colors. Save the banner as a PNG or JPEG file.

Exercise 4: Designing an Icon Set

Task:
Design a set of icons for a mobile app with the following
specifications:

 Dimensions: 48 pixels by 48 pixels.

 Each icon should represent a different function or feature of the
app.

Practical Task 4:
Using your preferred image editing software, design a set of icons that
meet the specifications mentioned above. Ensure that each icon
effectively represents its respective function or feature. Save each icon
as a separate PNG file.

Exercise 5: Creating a Thumbnail Gallery

Task:
Create a thumbnail gallery for an online portfolio with the following
specifications:

 Dimensions: Each thumbnail should be 200 pixels by 200 pixels.

 Include a grid layout with multiple thumbnails showcasing
different projects or images.

Practical Task 5:
Using your image editing software, create a thumbnail gallery based
on the given specifications. Design a grid layout with multiple
thumbnails, each sized at 200 pixels by 200 pixels. Populate the
gallery with images representing different projects or images. Save the
thumbnail gallery as a PNG or JPEG file.

Exercise 6: Designing a Website Header

Task:
Design a visually appealing website header with the following
specifications:
  Dimensions: 1200 pixels wide and 300 pixels high.
 Incorporate relevant imagery, branding elements, and navigation
menus.

Practical Task 6:
Using your image editing software, design a website header that meets
the provided specifications. Incorporate relevant imagery, branding
elements (such as a logo), and navigation menus into the header
design. Ensure that the header visually represents the purpose and
aesthetics of the website. Save the website header as a PNG or JPEG
file.