Prof.

Tirup Parmar

Unit V
PRINCIPLES OF ANIMATION

1 Squash and stretch 7 Arcs

2 Anticipation 8 Secondary action
3 Staging 9 Timing
4 Straight ahead action and pose to 10 Exaggeration
pose 11 Solid drawing
5 Follow through and overlapping 12 Appeal
action
6 Slow in and slow out
Squash and stretch
This is probably the most important rule of
animation: it refers to the natural
deformation, weight and flexibility of
objects.

It's a phenomenon we can observe in real

life, watching a ball bounce, for example.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 1

https://E-next.in
 Prof. Tirup Parmar

If you apply a lot of squash and stretch, you'll get a cartoon-type of animation,
pleasing to the eye, often wanted in motion design video.

Rigidity
The most important animation principle is called squash and stretch. When an object moves, its
movement indicates the rigidity of the object. Many real world objects have little flexibilty, such
as furniture, however most organic objects have some level of flexibility in their shape.

Take for example a bouncing ball. A rubber ball bounces higher and squashs more upon impact
than a hard league ball. The ease with which an object squashs and stretches defines the rigidity
of the material making up an object.

Volume
When a person smiles, the shape of the face is determined by the movement of muscles
underneath a layer of skin. During a smile, though the head seems to increase in size, with the
widening of the mouth and jaw, it does not. The object is simply displacing its matter into the
stretched shape. The most important rule to squash and stretch is that no matter how squashed or
stretched out an object gets, its volume remains constant.

Guidelines
The squashed position depicts the form either flattened out by an external pressure or constricted
by its own power. The stretched position always shows the same form in a very extended
condition.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 2

https://E-next.in
 Prof. Tirup Parmar

Anticipation
Anticipation is the rule of animation where you introduce a movement by another
one.
For example, a baseball player, before throwing the ball, will prepare for the action
by moving his arm back (and in fact his whole body will take a special "pose").
This allows you to prepare your audience for what will happen next and get a more
"realistic" impact. In motion design, for example, if you want to animate a rotating
object, make a slight rotation in the opposite

For example, a man preparing to run fast would crouch down, "gathering like a spring"
for the main action. This is called the anticipation for the main action. Equally, a golfer
making a swing has to anticipate the swing by swinging the club back first, just as a
baseball pitcher must "wind up" before throwing the ball. This technique was borrowed
from the theatre, and was important in holding the audience's attention. The audience
might not know exactly why a character was doing something, but they would at least
know what he was doing (or what he was about to do).
The technique can also be used for less physical actions, such as a character looking
off-screen to anticipate someone's arrival, or attention focusing on an object that a
character is about to pick up.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 3

https://E-next.in
 Prof. Tirup Parmar

At the Disney studio, Walt Disney pushed his animators to improve their work, and he
was especially insistent that visual gags should be clear, wishing to make sure that the
audience could always see everything clearly so they could anticipate what was going
to happen. He called this technique "aiming," and would act out actions himself,
exaggerating them so that the animators could clearly capture the effect.
Les Clark, one of Disney's most talented animators, and later one of Disney's so-
called Nine Old Men later said of this discovery, "Today it may look simple to us; at the
time it wasn't. It was something that hadn't been tried before or proved.
By contrast, the anticipation pose can also be omitted in cases where it might be
expected. The resulting sense of anticlimax will produce a feeling of surprise in the
viewer, and can often add comedy to a scene. This is often referred to as a 'surprise
gag'.

Staging
Staging is the presentation of an idea so that it is clear. This idea can be an action, a
personality, an expression, or a mood. The key idea is that the idea is made clear to the
viewer.

An important objective of staging is to lead the viewers eye to where the action will
occur so that they do not miss anything. This means that only one idea at a time occur,
or else the viewers may be looking at the wrong thing. So, the main object should be
contrasted in some way with the rest of the scene. A good example is motion, since the
eye is drawn to motion in an otherwise still scene. In a scene with everything moving,
the eye is drawn to a still object.

The animator must use different techniques to ensure that the viewer is looking at the
correct object at the correct time. For example, in Luxo, jr. The Father appears first, and
so is the center of attention. Then the son bounds in, moving rapidly, so the center of
attention shifts to him. At a certain point the son stops and looks up at the father,
refocusing the attention on the father.

In the early days at Disney all characters were black and white, with no gray. All action
was shown in silhouette (to the side), because if a character moved its black arm in
front of its black body it would disappear, so the action had to be against the white
background. The Disney animators realized that even without this technological
limitation action was more clearly visible in silhouette.

Even with modern color 3D graphics, silhouette actions are more clearly delineated and
thus to be preferred. over frontal action. An example would be a character waking up
and scratching its side, it is easier to understand what it is doing than if it scratched its
stomach.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 4

https://E-next.in
 Prof. Tirup Parmar

Staging is one of the 12 Basic Principles of Animation and, oftentimes, is overlooked by animators
and unnoticed by audiences. But it is a powerful tool that can inform an audience about character
and narrative. Staging is connected to acting, timing, cinematography, and setting. When an
animator understands staging, he or she controls the attention of the audience and helps drive the
story.

Here are 3 tips on staging that will help you with your shot.

1. Halves and thirds

One easy technique keeps the characters of interest in the a half or third of the camera frame. If
you divide a frame of the shot in half or thirds and place the character in those sections, you
control the attention of the audience while communicating the importance of that character.

This is a shot from Star Wars.

With Princess Leia in the middle third, our attention is focused on her. At this point in the story she
is communicating important information about the Empire and about her character. So the staging
allows us to pay better attention to what she is saying. She is also surrounded by stormtroopers
which tells us that she’s in trouble.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 5

https://E-next.in
 Prof. Tirup Parmar

This shot shows Luke in training.

This part of the story focuses on Luke’s training, so Luke and Yoda are set in the middle, which
focuses the audience’s attention on them. The left and right thirds have dark foreground objects
and further pushes our attention inward.

Here Anakin is the main focus of the shot, so he is staged in the center of the frame. He is also in
the foreground, making him appear larger and more important—another staging technique.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 6

https://E-next.in
 Prof. Tirup Parmar

Here we see Anakin meeting with the Jedi council.

Anakin is set on the left side of the frame showing is division from the Jedi Council. He is also set
on the dark side of the frame telling the audience something about his state of mind at this point in
the story.

2. Lines of focus
By using sets, other characters, and camera angles, one can create lines of focus that can draw
the attention of the audience where you intend it to be.

Here all the pilots have their eyeline toward Princess Leia, thus drawing our attention to her. It tells
us that she is saying something important.

She is also dressed in white, while being surrounded by orange and framed by the 2 foreground
pilots. This draws our attention to her, so we pay attention to what she is saying.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 7

https://E-next.in
 Prof. Tirup Parmar

In this shot of two Jedi and young Anakin in the Jedi High Council Chamber, the same technique is
used.

With all the Jedi council members focused on the three in the middle, our eye is immediately
drawn to them. They are also in the middle of the frame fully lit while the council members are in
darkness, further drawing our eye to them.

In this shot, we see how the pipes and machinery of the destroyer bridge draw lines to Darth
Vader. He is also in the center of the shot framed by the center window

3. Consistent Screen Direction

Screen direction is the direction that a character appears to be moving or speaking. Having a
consistent screen direction is important to convey information to your audience clearly.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 8

https://E-next.in
 Prof. Tirup Parmar

This sequence is an important conversation between Luke and Obi Wan. To avoid confusion, the
screen direction of both characters remains constant throughout the sequence. Luke is always on
screen right while Obi Wan is always on screen left even when only one of them is on screen. This
simple technique keeps the audience from becoming disoriented and distracted during this
conversation.

You’ll notice that other staging techniques are employed here as well. The staging is in thirds or
halves. Luke and Obi Wan are brightly lit when they are speaking while the set is dark drawing out
attention to them.

There are many techniques in staging that can help an animator, filmmaker, or storyteller, tell
his/her story effectively. Proper staging can add to a character’s thoughts, a story point, or mood.
The key is making an idea clear to the viewer.

Straight ahead action and pose to pose

These are two different ways to animate something. "Straight ahead" animation is
when you animate a character or something as it is moving, like when you move in
real life, you animate it frame by frame, without a plan.
On the other hand, "pose-to-pose" animation is when you begin by placing the most
important states, or "keyframes" of your animation, creating the transition between
two keyframes.
That way, you have a preview of what your animation will look like without having
to animate the whole thing.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 9

https://E-next.in
 Prof. Tirup Parmar

This allows you a lot more flexibility, if some pose has to be changed; you don't have
to re-do the whole thing.
Nowadays, all animators work in "pose-to-pose", and computer animation software
allows us to be even more efficient as it automatically generates the "in-between"
frames.

Straight Ahead Action in hand drawn animation is when the animator starts at the first
drawing in a scene and then draws all of the subsequent frames until he reaches the
end of the scene. This creates very spontaneous and zany looking animation and is
used for wild, scrambling action.

Pose-to-Pose Action is when the animator carefully plans out the animation, draws a
sequence of poses, i.e., the initial, some in-between, and the final poses and then
draws all the in-between frames (or another artist or the computer draws the inbetween
frames). This is used when the scene requires more thought and the poses and timing
are important.

This is similar to keyframing with computer graphics but it must be modified slightly
since the inbetweens may be too unpredictable. For example, objects or parts of objects
may intersect one another. Computer keyframing can take advantage of the hierarchical

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 10

https://E-next.in
 Prof. Tirup Parmar

model structure of a complex object. Different parts of the hierarchy can be transformed
at different keyframes. For example, in a jump, translation keyframes can be set for the
entire model in the X and Z directions. Then other rotation or translation keyframes can
be set for portions of the model, e.g., the legs and arms.

Follow through and overlapping action

These are two ways of drawing animation. Straight ahead action is where you draw
each frame of an action one after another as you go along. With pose-to-pose, you
draw the extremes – that is, the beginning and end drawings of action – then you go
on to the middle frame, and start to fill in the frames in-between.

Pose-to-pose gives you more control over the action. You can see early on where
your character is going to be at the beginning and end instead of hoping you’re
getting the timing right. By doing the main poses first, it allows you to catch any major
mistakes early. The problem with it is that sometimes it’s too neat and perfect

Straight ahead action is less planned, and therefore more fresh and surprising. The
problem with it is that it’s like running blindfolded… you can’t figure out where you’re
supposed to be at any one time.

Mastering both techniques and combining them is the best approach to being a
successful animator because then you can get both structure and spontaneity. And
incidentally, this distinction is just as important in computer animation, where molding
a pose at each keyframe is the equivalent of making a drawing.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 11

https://E-next.in
 Prof. Tirup Parmar

Slow in and slow out

When you start your car, you don’t get up to 60 mph right away. It takes a little
while to accelerate and reach a steady speed. In animation speak, we would call this
an Ease Out.
Likewise, if you brake, you’re not going to come to a full stop right away. (Unless you
crash into a tree or something.) You step on the pedal and decelerate over a few
seconds until you are at a stand-still. Animators call this an Ease In.
Carefully controlling the changing speeds of objects creates an animation that has a
superior believability.
When you move your arm, it won't move at a defined speed all the time.
The movement is like a robot's where it starts slowly, accelerates and then slows
down to get to its final destination.
It also allows us to emphasize the key-poses of our animation which in a way, gives
more time for the viewer to see it.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 12

https://E-next.in
 Prof. Tirup Parmar

Arcs
Here we are talking about the trajectory of your animated element through time.
An arched trajectory really helps when it comes to the realism and the impact of
your animation,
as the movement appears smoother and gentler.

Life doesn’t move in straight lines, and neither should animation. Most living beings
– including humans – move in circular paths called arcs.

Arcs operate along a curved trajectory that adds the illusion of life to an animated
object in action. Without arcs, your animation would be stiff and mechanical.

The speed and timing of an arc are crucial. Sometimes an arc is so fast that it blurs
beyond recognition. This is called an animation smear

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 13

https://E-next.in
 Prof. Tirup Parmar

Secondary action
It's always good to add some secondary animation to your character/object.
For example, a female character running will have her hair moving according to the
speed of her run. Another is to imagine a bull with a ring in the nose. The ring is an
independent object that deserves his own animations but are related to the bull's
face movement.

A secondary action is an action that results directly from another action. Secondary
actions are important in heightening interest and adding a realistic complexity to the
animation.

The secondary action of Luxo Jr's forward motion is the rippling of his power cord.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 14

https://E-next.in
 Prof. Tirup Parmar

Conflict
If a secondary action conflicts with, becomes more interesting, or dominates in any
way, it is either the wrong choice or is staged improperly.

Facial Animation Dangers

Generally, in facial animation, the movement is a secondary action, subordinate to the
bodies movement. The danger with facial animation isn't that it will dominate the
scene, but that it will not be seen. The change in expression should happen before or
after a move, changes in the middle of a major move will mostly likely go unnoticed.

Timing
this is one of the most important rules. Timing is the number of images it takes for
an animation to move from one key image to another.
This will set the rhythm of the animation and allow you to have some non-linear
action.
That will increase a lot the quality and generate more interest for your animation.
Spacing is the difference between two frames. In other words, it’s the detail of the
timing.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 15

https://E-next.in
 Prof. Tirup Parmar

Timing, or the speed of an action, is an important principle because it gives meaning

to movement. The speed of an action defines how well the idea will be read to the
audience.

Weight
Timing can also defines the weight of an object. Two similar objects can appear to be vastly
different weights by manipulating timing alone.

For example, if you were to hit a croquet ball and a balloon with a mallet, the result would be
two different actions. The croquet ball would require more force to place it into motion, would
go farther, and need more force to stop it. On the other hand, the balloon would require far less
force to send it flying, and because of it's low mass and weight, it wouldn't travel as far, and
would require less force to stop it.

Scaling Properties
Timing can also contribute to size and scale of an object or character. A larger character has
more mass, more weight and more inertia than a tiny character, therefore it moves slower. In
contrast, a tiny character has less mass, weight, and inertia, therefore its movements are quicker.

Determining Emotion
Timing plays an essential role in illustrating the emotional state of an object or character. It is the

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 16

https://E-next.in
 Prof. Tirup Parmar

varying speed of the characters movements that indicate whether a character is lethargic, excited,
nervous, or relaxed.

Exaggeration
When it comes to cartoon or non-realistic animation, exaggerating a movement will
always bring more quality to your animation.
It allows your object or character to not look static and fixed but fluid and with their
own way of
thinking.

One of the key things to note is that you can

generally exaggerate in your animation a LOT
more than you think you can. The nature of our
human vision is that our eyes can only take in so
much information at a time. When you’re working
on a pose, you’re looking at a still image of that
pose, and you can see it in full detail. When that
pose is implemented as part of a moving
animated shot, especially when it’s a breakdown
pose, that pose is only viewed for (usually)
1/24th of a second. Because of our persistence
of vision, our eyes will see less of that most
exaggerated pose, and more of the frames on
either side of that pose that are less exaggerated
versions of it. Therefore, you need to push the
pose FURTHER than you think, when you are
creating it. It’s much harder to over-exaggerate,
than it is to under-exaggerate.

IMPORTANT NOTE: Principles that are not listed below are generally applied more in relation to
the ones that are are listed, as far as exaggeration goes. In other words, they will be proportionally
used relative to how much or how little exaggeration is used

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 17

https://E-next.in
 Prof. Tirup Parmar

Solid drawing
Solid drawing generally refers to the ability to render a three-dimensional character in two-
dimensional space and give it weight, depth, and balance. Since the 12 Basic Principles of
Animation were written before computer animation existed, the solid drawing principle is more
fundamental for a traditional animator. In order to make his animation convincing, a traditional
animator has to be able to draw a character from any angle. Although great draughtsmanship is
not a necessity for a computer animator, an understanding of what makes a good drawing can
definitely help. Maybe in this computer age, we should call this principle “Solid Poses.”

I recommend life drawing for every animator—not so much for the goal of making beautiful
drawings, but to train the eye to recognize natural poses and to study how bones, muscles, and fat
work together with gravity to form dynamic poses.

When I started at Disney on The Fox and the Hound, my mentor Eric Larson (one of Walt’s “Nine
Old Men”) stressed that you should spend half your time planning and half your time animating,
and that you shouldn’t start animating until you know exactly what you’re going to do. The fastest
way to plan a scene is with thumbnail drawings—small exploratory drawings where you work out
the staging and poses. You can do quite a few quick thumbnails in the time it takes to work out one
good pose in Maya.

Here are some of my thumbnail drawings of Danny and Sawyer from Cats Don’t Dance:

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 18

https://E-next.in
 Prof. Tirup Parmar

These are not the first sketches I did, by the way. My first pass is very rough— sometimes more
like stick figures. Then I go back over the poses, clarifying and exaggerating them. I repeat the
process until I feel that I have a strong plan for the scene. As I draw thumbnails, some of the things
I’m thinking about are:

Line of Action
A strong line of action goes through the whole body, illustrates the force of the action, unifies the
pose, and makes a clear statement. When possible, I try to reverse the curve of the spine from one
main pose to the next. Here’s an example from a scene I animated for The Little Mermaid:

Weight and Balance

I think about the effect of gravity on the character and how he’s supporting himself. Make sure he’s
in balance and isn’t on the verge of falling over, unless that’s part of the scene.

Twinning
It’s best to avoid symmetry in a pose. If the arms mirror one another, it can make the drawing look
flat. Raise one arm or bring it closer to camera to make it more interesting and more dimensional.
Here’s a great example from The Illusion of Life, by Frank Thomas and Ollie Johnston.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 19

https://E-next.in
 Prof. Tirup Parmar

Notice that in the drawing of Mickey on the right, his head is forward and his hips are back. Keep in
mind that the entire body should be involved in the pose. When creating a pose, it’s often a good
idea to start with the hips or pelvis, rotating and translating the torso. In the drawing on the left,
Mickey’s torso is straight and vertical, creating a very static and boring pose.

Silhouette
A clear silhouette helps the viewer to instantly understand a pose. You can get a surprising
amount of information from just the silhouette—the gender, age, attitude, costume, etc. Hopefully
you can recognize the character in these silhouettes:

Twists
Twisting the body tends to give more dimension and interest to the pose. This is a drawing of
Timon (by me) from a Disney educational film:

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 20

https://E-next.in
 Prof. Tirup Parmar

Contrapposto (counterpose in English)

When the hips tilt in one direction, the shoulders tend to tilt in the opposite direction to keep the
body in balance. Wait, did I just put my cartoon drawing next to one of the greatest masterpieces
of western art?

Appeal
The difference between appealing animation and unappealing animation is not limited to subject
matter, what matters is how you present the ideas, concepts, and emotional highs/lows to the
audience—it’s about presentation. Learn more about this incredibly important principle from
mentor and Disney Toon Studios animator Ethan Hurd!

What do cute fuzzy bunnies and the Joker from The Dark Knight have in common? They’re both
incredibly appealing. I bring this up to get a simple idea out of the way before I continue this article.
Subject matter has nothing to do with appeal, disturbing can be just as appealing as cute. The
difference between appealing and not appealing is not subject matter, it’s what you do with it, it’s
presentation.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 21

https://E-next.in
 Prof. Tirup Parmar

If you look at the list of principles of animation by Frank and Ollie in The Illusion of Life you’ll see
that “Appeal” lives at the bottom of the list. Number twelve. Like the old Sesame Street song “One
of these Things is Not Like the Other,” it stands out. It’s different than the other principles.

Here we are talking about the charisma of your animation.

If we we’re talking about an actor, we would refer to it as their acting ‘game’.
If you want something to be positive, design it with the appropriate features: a
smile, round shapes, light colors… and if you want to express a bad thing, use de-
saturated dark and sad colors, mad eyes, spikes, triangle and square shapes.

Image
An image is a visual representation of something. In information technology, the term
has several usages:

1) An image is a picture that has been created or copied and stored in electronic form.
An image can be described in terms of vector graphics or raster graphics. An image

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 22

https://E-next.in
 Prof. Tirup Parmar

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 with hypertext links.

Common image file formats online include:

 JPEG (pronounced JAY-peg) is a graphic image file produced according to a

standard from the Joint Photographic Experts Group, an ISO/IEC group of experts
that develops and maintains standards for a suite of compression algorithms for
computer image files. JPEGs usually have a .jpg file extension.

 GIF (pronounced JIF by many, including its designer; pronounced GIF with a hard G
by many others) stands for Graphics Interchange Format. The GIF uses the
2D raster data type and is encoded in binary. GIF files ordinarily have
the .gifextension.

 GIF89a is an animated GIF image, formatted according to GIF Version 89a. One of
the chief advantage format is the ability to create an animated image that can be
played after transmitting to a viewer page that moves - for example, a twirling icon or
a banner with a hand that waves or letters that magically get larger. A GIF89a can
also be specified for interlaced GIF presentation.

 PNG (pronounced ping ) is a Portable Network Graphics) is a file format for image
compression that was designed to provide a number of improvements over the GIF
format. Like a GIF, a PNG file is compressed in lossless fashion (meaning all image
information is restored when the file is decompressed during viewing). Files typically
have a .png extension.

 SVG is Scalable Vector Graphics, the description of an image as an application

of XML. Any program such as a browser that recognizes XML can display the image
using the information provided in the SVG format. Scalability means that the file can
be viewed on a computer display of any size and resolution, whether the small

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 23

https://E-next.in
 Prof. Tirup Parmar

screen of a smartphone or a large widescreen display in a PC. Files usually

have .svgextension.

 TIFF (Tag Image File Format) is a common format for exchanging raster
graphics (bitmap) images between application programs, including those used
for scanner images. A TIFF file can be identified as a file with a .tiff or ".tif" file name
suffix.

2) A disk image is a copy of the entire contents of a storage device, such as a hard
drive or DVD. The disk image represents the content exactly as it is on the original
storage device, including both data and structure information.

3) Another use of the term image is for a section of random access memory (RAM) that
has been copied to another memory or storage location.

JPEG Image Compression

What is Image Compression?
The objective of image compression is to reduce irrelevant and redundant image data in order
to be able to store or transmit data in an efficient form.

Types

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 24

https://E-next.in
 Prof. Tirup Parmar

Overview
• JPEG, which stands for Joint Photographic Experts Group (the name of the committee that
created the JPEG standard) is a lossy compression algorithm for images.
• A lossy compression scheme is a way to inexactly represent the data in the image, such that
less memory is used yet the data appears to be very similar. This is why JPEG images look
almost the same as the original
images they were derived from most of the time, unless the quality is reduced significantly, in
which case there will be visible differences.
• The JPEG algorithm takes advantage of the fact that humans can't see colours at high
frequencies. These high frequencies are the data points in the image that are eliminated during
the compression. JPEG compression also works best on images with smooth colour transitions.

What is JPEG compression?

JPEG is a commonly used method of lossy compression for digital images. The degree of
compression can be adjusted, allowing a tradeoff between storage size and image quality with a
compression ratio 10:1; but with little perceptible loss in image quality.

Why JPEG?
JPEG uses transform coding, it is largely based on the following observations:
– A large majority of useful image contents change relatively slowly across images, i.e., it is
unusual for intensity values to alter up and down several times in a small area, for example,
within an 8 x 8 image block. A translation of this fact into the spatial frequency domain, implies,
generally, lower spatial frequency components contain more information than the high
frequency components which often correspond to less useful details and noises.
– Experiments suggest that humans are more immune to loss of higher spatial frequency
components than loss of lower frequency components. Human vision is insensitive to high
frequency components.

JPEG Schematic

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 25

https://E-next.in
 Prof. Tirup Parmar

Algorithm
• Splitting: Split the image into 8 x 8 non-overlapping pixel blocks. If the image
cannot be divided into 8-by-8 blocks, then you can add in empty pixels around the
edges, essentially zero-padding the image.
• Colour Space Transform from [R,G,B] to [Y,Cb,Cr] & Subsampling.
• DCT: Take the Discrete Cosine Transform (DCT) of each 8-by-8 block.
• Quantization: quantize the DCT coefficients according to psycho-visually
tuned quantization tables.
• Serialization: by zigzag scanning pattern to exploit redundancy.
• Vectoring: Differential Pulse Code Modulation (DPCM) on DC components
• Run Length Encoding (RLE) on AC components
• Entropy Coding:
– Run Length Coding
– Huffman Coding or Arithmetic Coding

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 26

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 27

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 28

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 29

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 30

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 31

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 32

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 33

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 34

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 35

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 36

https://E-next.in
 Prof. Tirup Parmar

Example of Run Length Encoding

Merits of JPEG Compression

• Works with colour and grayscale images, but not with binary images.
• Up to 24 bit colour images (Unlike GIF)
• Target photographic quality images (Unlike GIF)
• Suitable for many applications e.g., satellite, medical, general photography, etc.

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 37

https://E-next.in
 Prof. Tirup Parmar

Video lectures @ https://www.youtube.com/c/TirupParmar & Notes @ https://t.me/bscit Page 38

https://E-next.in