JPEG Compression and Color Theory Quiz

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the primary purpose of JPEG compression?

To maintain the exact original image quality at all times

To eliminate all image data entirely

To ensure every pixel in the image stays unchanged

To reduce storage size while allowing some loss of quality (correct)

During which step of JPEG compression is the color space transformed?

Encoding

Colour space transformation (correct)

Block splitting

Quantization

In the context of JPEG compression, which of the following is true about the data that is discarded?

Data is randomly discarded without consideration

Only the most important data is discarded

Prioritization is done to retain the most perceptually significant data (correct)

All data is retained without exception

Which characteristic is best suited for JPEG compression?

Scenes where colors change continuously and softly Signup and view all the answers

What is the final step in the JPEG encoding process?

Encoding Signup and view all the answers

What is the effect of displaying a blue pattern next to a red pattern?

It causes eye fatigue. Signup and view all the answers

Which method produces a better-looking color display?

Employing tints and shades instead of pure hues. Signup and view all the answers

What is a primary color?

A color that cannot be created by mixing others. Signup and view all the answers

What does a color management system use to ensure accurate color display?

Color profiles. Signup and view all the answers

In CSS, which of the following is a correct way to specify a color using the HSL format?

p { color: hsl(0, 100%, 50%); } Signup and view all the answers

What is one proper use of the canvas element in HTML5?

For rendering interactive graphics, like games. Signup and view all the answers

What type of colors are achieved by mixing primary and secondary hues?

Tertiary colors. Signup and view all the answers

What is the primary difference between lossless and lossy compression?

Lossy compression introduces some information loss, while lossless retains all original data. Signup and view all the answers

Which compression algorithm is an example of lossless compression?

Run Length Encoding (RLE) Signup and view all the answers

What does a compression ratio measure?

The effectiveness of a compression algorithm. Signup and view all the answers

How is the file size calculated for an image with a resolution of 640 x 480 pixels at 8-bit color?

(640 x 480 x 8) / 8 Signup and view all the answers

Which of the following statements about lossy compression is TRUE?

Lossy compression is often used for multimedia resources. Signup and view all the answers

Which algorithm is NOT typically categorized as lossless compression?

JPEG Signup and view all the answers

According to the explanation given, which aspect of compression algorithms is considered asymmetrical?

The processes of compression and decompression require different amounts of time. Signup and view all the answers

What happens to the data during lossy compression?

Some original data is lost but the result is considered useful. Signup and view all the answers

Which of the following lossless compression methods is based on efficient encoding?

Both A and B Signup and view all the answers

What is the total number of bits used in Shannon-Fano coding for 'HELLO' in the first coding tree?

10 Signup and view all the answers

In the Huffman coding process, what happens during the initialization step?

All symbols are placed in a list sorted by their frequency counts. Signup and view all the answers

What is the process used to create a parent node in Huffman coding?

Combining two least frequent symbols. Signup and view all the answers

What is the primary advantage of Huffman coding compared to Shannon-Fano coding?

Huffman coding reduces redundancy more effectively. Signup and view all the answers

After the first iteration of Huffman coding for 'HELLO', which symbols remain in the list?

L, P1, H Signup and view all the answers

Which coding tree structure assigns longer codeword lengths to more frequent symbols?

Shannon-Fano coding Signup and view all the answers

What is the expected coding length for symbols with the same frequency in Huffman coding?

They will have the same length. Signup and view all the answers

What is a characteristic of the codes used in Shannon-Fano coding compared to those used in Huffman coding?

Shannon-Fano codes do not guarantee unique prefixes. Signup and view all the answers

How many bits are used for code classification for the symbol 'L' in the second Shannon-Fano coding structure?

4 Signup and view all the answers

What is the main motivation behind Extended Huffman Coding?

To assign multiple symbols a single codeword. Signup and view all the answers

What is the initial size of the dictionary in Lempel–Ziv–Welch (LZW) coding?

2l0 Signup and view all the answers

When the dictionary in LZW is filled and reaches lmax, what action is taken?

Increase the code length and continue coding. Signup and view all the answers

What is indicated by the average code length for an information source S being strictly less than η + 1?

The coding scheme achieves better compression efficiency. Signup and view all the answers

What is a key characteristic of the symbols in LZW coding?

They can be of variable lengths but are coded with fixed-length codewords. Signup and view all the answers

What is the purpose of flushing the dictionary in LZW coding?

To allow for new entries when lmax is reached. Signup and view all the answers

In Extended Huffman Coding, what happens when a probability pi is very large?

The associated symbol gets a shorter codeword. Signup and view all the answers

What happens to the code length when new entries are added to the LZW dictionary?

It can increase up to lmax. Signup and view all the answers

What determines the size of the new alphabet S(k) when k symbols are grouped in Extended Huffman Coding?

It is determined by nk. Signup and view all the answers

Study Notes

JavaScript Fundamentals

JavaScript is a programming language used to create dynamic web content
HTML and CSS are for static content, JavaScript adds interactivity and change based on user input.

Motivation

HTML & CSS only allow static web content
HTML & CSS cannot change based on user interaction
Web browsers have JavaScript engine to generate dynamic content.

JavaScript Use Cases

Interact with HTML/CSS document content and respond to events
Implements standard JavaScript API's defined in W3C standard
Extends DOM and selector APIs for multimedia, drawing, animation, geolocation, webcam etc.
Work with remote data from HTTP web servers.

Deploying JavaScript in HTML

Include in HTML file using <script> element; <script> attribute points to an external .js file.
JavaScript file can be located on a web server
Embedded script: <script> can be embedded within the HTML document.
Chrome browser includes a "REPL (read-evaluate-print-loop)" console for evaluating JavaScript code.
Run JavaScript code using a runtime environment, such as Node.js
Use the <noscript> tag to handle situations when scripts have been disabled or a browser does not support them.

JavaScript Overview & Definitions

Derived from the ECMAScript standard
Initially intended for use on Netscape Navigator
Not related to the Java programming language
Built into web browsers to add dynamic behavior to static web content.
Functions to run when HTML document loads or accompanied by form input.
Useful for creating dynamic multimedia in documents.
Primitive data types: number, String, boolean, null, undefined
Object data types.

JavaScript Primitive Types

Number: Numbers are stored in floating-point notation; include 5, 1.24, 1.1e5, Infinity, -Infinity, and NaN
String: A sequence of characters, like 'hello',
Boolean: Values are true or false
Null: Represents a null value
Undefined: A variable that has been declared but has no assigned value.
boolean, if, delete, var, function, etc. = reserved words of the JavaScript language.

Variables & Constants

The first letter of a variable: $ and _ or letters a-z, A-Z.
Variable has two scopes; global and block scope.
Var keyword is used to declare a local variable or object. If the var keyword is omitted, a global variable is declared.
The keyword new is used to create instances of wrapper objects.

JavaScript Strings

JS strings are a series of 16-bit unsigned integers, each representing a character.
Escape characters use backslash: '\n', '\t', '\'
Strings are immutable - any manipulation results in a new string
Examples for String Methods
indexOf: to search for a string inside another string
substring: to extract sub strings

JavaScript Booleans

Any value can be used as a Boolean in JavaScript (when used with logical operators).
Falsy values: null, undefined, 0, NaN, "
Truthy values: true, 6

JavaScript Null & Undefined

Null: a value that can represent a "no value" assignment to a variable.
Undefined: the variable was declared but no valid assignment was made.

Arrays

Declaring an array can use literal notation
An array constructor can also be used
Elements of any type can be included in arrays, like numbers, strings, booleans, and other objects.
array properties, push, pop, length,

Array Indices

Use zero-based indexing scheme
Arrays dynamically grow/shrink by adding/removing elements when elements are added/removed, the length property is updated automatically ■ The largest index in the array corresponds to the value of array.length - 1

Objects

Objects are used to store key-value pairs, accessible through myobject.property or myobject['property'].
Key-value pairs can be added to an object after initial declaration.

Error Objects

Error Objects Instances are created when an exception is thrown
Properties: Message–a descriptive message, and Name - type of error: TypeError, RangeError, URIError
Custom error objects can be created using throw new Error(), only positive values are permitted.

Conditionals and Loops

Conditional statements like if/else to control the flow of the program based on conditions
Loop statements like for and while to execute blocks of code repeatedly
JavaScript tries to convert strings to numbers if comparing them to other numbers.

JavaScript Operators and Expressions

Unary operators include typeof, and increment/decrement operators (++, --)
Binary operators include fundamental arithmetic operators: (+, -, /, *). Modulus operator (%)
Concatenation is achieved using + or the concat method.
Equality operators include === which checks for both type and value

Comparing Objects

Objects are only equal if variables point to identical object references.

Declaring & Using Functions

Functions are blocks of self contained reusable code and begin with the keyword "function".
Function name follows; function parameters are in parentheses
Curly braces contain the code to execute in the function
Function can explicitly return a value using the "return" statement
Or implicitly return undefined by default;
Functions can be defined using an expression that can be stored in a variable.
Functions accept a variable number of parameters.

Creating Custom Objects

use the keyword "new" when creating custom objects
The data associated to an object is accessed through dot notation (myobject.property).
Data can still be added or removed from objects after they are created and initiated.

Prototypes

Object instances inherit properties and methods from their object prototype.
Built in JavaScript objects that can be constructed using the new keyword have built-in prototypes.
All JavaScript objects have prototypes
Script can add or override custom properties and methods to the prototype. This will change the behaviour of the objects without affecting the static object prototypes.

Debugging JavaScript

Write messages to the browser's developer console
Use an addXToThePage function for in page debugging.

Asynchronous JavaScript (1)

JavaScript programs in browsers are event-driven.
JavaScript programs that are server based typically wait for requests to be complete before doing anything.
JavaScript Core language does not have asynchronous capabilities,
The JavaScript language does provide functionalities that enable asynchronous programming, such as: promises, async, await and for/await

Asynchronous JavaScript (2), Common Methods

• Using Callbacks • Using Promises • Using async and await • Using asynchronous iteration

Asynchronous Programming with Callback

Derived from functional programming.
Often employed to add interactivity in HTML documents
JavaScript callback functions are functions that are passed as arguments to other functions and executed inside them. ▪ When a certain condition is met in called function, the callback is invoked.
Common Forms: • Events: Events-driven JavaScript programs can register callback functions for specified event types. • Timers: Set and clear timers using setTimeout and setInterval. • Network Events: Fetching data from a web server using XMLHttpRequest.

DOM Events

Source element - this (the element that the event occurred to)
Event object - properties of events: general, keyboard, and mouse
events load, keyboard{keydown, keypress, keyup}, mouse{ mouseenter, mouseleave, mousemove, mouseup, mousedown, click, dblclick}

Assigning DOM Event Handlers

By HTML Event Handlers- using attributes. Example onclick
Using Node properties - assign a function to an event. Example, btn.onclick = function() .
By Event Handlers: addEventListener() (removeEventListener()) – allow for multiple event handlers to be added.

Intrinsic Events in Web App

Scripts may be assigned to an element through an intrinsic attribute.
Events like onload, onclick, onmouseover, onfocus, onkeyup, onsubmit, onselect.

Colors

Different color models.
RGB; Red, Green, Blue - additive color model
CMYK; Cyan, Magenta, Yellow, Black - subtractive color model
HSB: Hue, Saturation, Brightness
HSL: Hue, Saturation, Lightness
Color gamut.
Complementary colors

Displaying Colors

Using CSS to define colors in a variety of ways: Name, hex, shorthand hex, decimal color value, HSL
Tools for selecting colors.

Colour Wheel

A visual representation of colors, arranged according to their chromatic relationship.
Primary, secondary and tertiary colors defined by mixtures.

Colour Conversion

Converting between color models occurs when processing images and data.

RGB Color Model

The tristimulus theory of color vision. ■ It states that human eyes perceive color through the stimulation of the three visual pigments in the cones of the retina ■ Red, Green and Blue.
RGB model can be represented by a unit cube defined on R,G and B axes.
Ex. of colors with 8 bits/channel: 256 power 3 =16,777,216 colours.

CMYK Color Model

A subtractive color model, useful for printing using pigments on a surface with light reflecting
Color is produced by mixing color pigments with white and black pigments
Based on Cyan, Magenta, and Yellow primary pigments, plus added black pigment.
Unit representation - white at origin.
Transformation from RGB to CMYK and vice versa.

HSB Color Model

A cylindrical-coordinate representation for colors.
Involves Hue, Saturation, and Brightness.

HLS Color Model;

Another cylindrical-coordinate representation for colors.
Involves Hue, Lightness and Saturation.

YIQ Color Model

A color encoding used for forming a composite video signal used for color television
Conversion matrix from RGB to YIQ and vice versa.

Lab Color Model

A device-independent color model, that describes how colors appear to the human eye.
Uses lightness, green-red and blue-yellow components.

Grayscale Color Model

Generates shades of gray by varying intensity/brightness

Comparison of Colors Models

Color Selection & Applications

Graphical packages can offer color selection tools for better user experience .
Including color sliders, wheels, and other visual aids for selecting values instead of raw numerical values.
Guidelines for app design- use guidelines for spacing colors to prevent eye fatigue, and using tints and shades for visual appeal.

CSS Color and Properties

CSS allows for various ways of specifying color values, such as color names (e.g., red, blue), using hexadecimal color values (e.g., #FF0000), and decimal values (e.g., rgb(255,0,0))

SVG

A two-dimensional graphics format that employs an XML grammar
Supports various shapes, colors, and attributes,
Attributes for specifying, shapes, coordinates, colors, and other features,
Supports interaction between these elements,
Uses CSS and JavaScript for further customization.

Data Persistence

In the context of cookies and other data persistence mechanisms
Cookies are tied to a domain and can store data in variable length strings
Can be tied to a specific domain, or subdomain (e.g mydomain.com subdomain.mydomain.com)
Cookies used for authentication for instance
Cookies have expiration dates - enabling automatic cookie deletion
Different means of storage exist besides using cookies, these methods will differ based on app requirements and functionality.

Workers and Messaging

Single threaded JavaScript challenge for use cases that span across multiple events or processes.
Introduce workers (dedicated web workers or shared web workers) to use to handle long operations in the background; to offload these tasks onto a separate thread
JavaScript workers enable many concurrent processes to run independently.
Allows communication with their parent thread using asynchronous messaging.

Web Games

Using multiple canvas elements that can be stacked, or layered on a single page for more complex games
Working at >60 frames per second using the requestAnimationFrame API; using dedicated processing threads to prevent the main thread from freezing
Data for audio, images and textures can be included through the Web Audio API, and other HTML elements for displaying media and handling effects and interactivity, using event listener methods.

Progressive Web App (PWA)

Hybrid application combining web apps and native app capabilities
Built using standard web technologies (HTML, CSS and JavaScript)
Functions like being installable (as an app) through the main browser
Using a service worker enables offline functionality
Use a manifest to define the app's functionality and behaviour as well as specify icon images, etc.

Digital Video Fundamentals

Digital video consists of stored images (frames) shown at a certain rate
Frames are captured at a given rate, e.g 24, 25, 30 or 60 frames per second
Analog video is represented as a time-varying signal and requires certain encoding and decoding methods to view on a device.

Analog Video Signals

Component video - Higher-end systems that use red, green, and blue color signals
Composite video - color and intensity signals mixed into a single carrier wave
S-video- uses two wires: one for luminance and another for a color chrominance signal.

Standards for Analog Color TV

NTSC - U.S., Japan, Taiwan, parts of the Caribbean, and South America
PAL - Australia, New Zealand, Western Europe, and Asia
SECAM - France, former Soviet Union, and Eastern Europe
Conversion methods (e.g., the matrix from RGB to Y'IQ) and frame rates (e.g., 30 fps for NTSC) differ by standard.

How CRT Monitors and TVs Display Pictures

CRT monitors display pictures by tracing horizontal lines across the screen
Lines are traced sequentially from top to bottom in steps
Progressive and Interlaced scanning are two methods of tracing.

Video Sequence Access

Time code and frame numbers provide access into the sequence of frames within the video recording.

Digital Video Standards

Standard definition
High definition
Digital television

The DV Term

DV compression, and DV format-specific types of compression and format
Used specifically by digital video formats.

Common Video File Types

.mov
.avi
.mpeg
.divx
.ogg/.ogv
.webm
.flv
.f4v
.wmv

Image Types

Raster (pixel-based) images- composed of discrete points
Vector (path-based) images - define images through geometric shapes instead of continuous colours

Image File Compression Strategies

Lossless Compression
Lossy Compression

Lossless Compression

A lossless compression method reduces the file size but does not lose any image quality
Compression and decompression techniques always go together.
Ex. Run length encoding (RLE) - based on repetitions in the image
Ex. Huffman Coding, Shannon-Fano Algorithm, and Arithmetic Coding

Lossy Compression

A lossy compression method reduces the file size by discarding some image data, but the loss is generally unnoticeable in typical images, or multimedia.
Commonly used techniques: JPEG, MPEG, MP3
Suitable for images/videos, but not suitable for text files

Compression Ratio

Compression Ratio is a calculation used to determine the effectiveness of a compression algorithm.
calculated by dividing the number of bits before compression by the number of bits after compression

MPEG Video Codec

Used for digital moving pictures and audio storage/archival
MPEG standards for encoding video in different formats

MPEG Family (1), MPEG (2), MPEG (4)

MPEG-1, MPEG-2, MPEG-4
Main features, video types (I-frame, P-frame, B-frame) and structure
Each MPEG version is designed to create certain advantages over their predecessors, especially better compression and handling of various quality outputs/in puts

MPEG Goals

Optimized for applications that support a continuous transfer bit rate of about 1.5mbps.
Does not support interlaced sources, and was initially used for Web and CD ROM playback, rather than for TV programming.
Designed for high resolution video, used for DVD video format, and high quality video transmission.

Streaming Audio

streaming audio - Play audio immediately after the request
Advantages- addresses long download times; controls distribution and copyhright
Disadvantage - sound quality may be affected by low speed or unstable connections

D3.js

Web-accessible, sophisticated data visualisation framework.
Based on HTML and CSS elements, and provides a visual framework and tools to enable data-driven interactions
Data-driven transformations instead of recreating the data display elements
Visualisation is possible to many types of structured data like JSON/CSV inputs
Enabling various graphic interfaces like maps, charts, and other types of graphical displays are possible

Data Visualisation with D3.js

Charts
Interactivity
Maps
Networks
Hierarchical layouts
MVC Dashboard
Extends D3
Optimization

D3 Core Functions

Core functions to help create D3 visualisation through manipulating selections, mapping data, and data-element joins
D3 Selects function enables elements selection to subsequently change their appearance using CSS and other options

Scales

Scale functions- D3.js scaling functions map values from a given domain range to a new visual space.
Three categories of scales: ordinal, quantitative and others

Line (and Area) Generators

D3.js data binding patterns enable easy construction of dynamically changing lines and regions on a canvas with various data mappings, such as those constructed from object types
By using D3.js data binding functions, and mapping functions, the transformation of data into visual lines/regions is handled seamlessly.

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Description

Test your knowledge on JPEG compression techniques and color theory in this comprehensive quiz. Covering key concepts such as color space transformation, compression types, and color specifications in CSS, this quiz is essential for understanding digital image processing.