Fall 2016, CS-116A Lecture: Graphics file formats

Graphics file formats
CS-116A: Introduction to Computer Graphics
Instructor: Rob Bruce
Fall 2016

SLIDE 1: Raster or bitmapped graphics

Raster or bitmapped graphics

Images represented as 2-dimensional array of colored pixels.
Images have an implied resolution (resolution dependent).

Examples:

GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
TIFF (Tagged Image File Format)

SLIDE 2: Raster graphics: aliased vs. anti-aliased

Side-by-side comparison of aliased and anti-aliasing of a line and a circle. Aliasing gives images a stair-step effect while anti-aliasing gives a smooth non-jagged appearance.

Modified from source: https://commons.wikimedia.org/wiki/File:Anti-aliasing.jpg

SLIDE 3: Raster graphics: aliased vs. anti-aliased

Stair-step aliasing effects (pointed to by arrow) are also known as "jaggies".

Side-by-side comparison of aliased and anti-aliasing of a line and a circle. An arrow is pointing to the stair-step aliasing effect also known as "jaggies".

Modified from source: https://commons.wikimedia.org/wiki/File:Anti-aliasing.jpg

SLIDE 4: Vector graphics

Vector graphics

Images are described mathematically as primitives such as points, arcs, and lines.
Images are resolution independent (scalable)

Examples:

Scalable Vector Graphics (SVG). W3 standard for displaying vector graphics on the World Wide Web.
Flash format by Adobe.

SLIDE 5: Raster vs. vector graphics

Side-by-side comparison of a vector graphic letter "S" with one that is displayed as a vector graphic. The vector graphic image is much smoother because it is resolution independent.

Source: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

SLIDE 6: Raster / bitmap graphics: potentially BIG

Problem: Raster or bitmapped graphics can result in large file sizes for large resolutions and/or deep color depths.

Solution: Image compression!

SLIDE 7: Lossless compression schemes

Entropy algorithm
Example: Huffman compression
Deflation algorithm
Example: Lempel-Ziv-Welch (LZW) compression
Run Length Encoding (RLE)
Differential pulse-code modulation (DPCM)
Suitable for sequential images such as video.
Chain code algorithm
Suitable for monochrome images.

SLIDE 8: "Lossy" compression schemes

Chroma subsampling
Human visual perception is more sensitive to variations in brightness than color.
Reduced color gamut
Can be used with dithering algorithm to reduce effect of image banding (posterization).
Fractal compression
Transform compression
Fast Fourier Transform (FFT)
Discrete Cosine Transform (DCT)
Wavelet compression

SLIDE 9: "lossy" compression schemes: advantages and disadvantages

JPEG File Interchange Format (JFIF)

A "lossy" image file format suitable for complex backgrounds such as digital photographs of nature which can achieve high compression while usually retaining visual integrity of the image itself.

Advantages:

Capable of compressing complex images to significantly small file size.
Images load fast over a network!

Disadvantages:

Permanent loss of image detail.
Not suitable for logos or anything with strong geometric lines (compression artifacts will occur in such cases).

SLIDE 10: Run Length Encoding (RLE): advantages and disadvantages

Advantages:

Compressed format saves disk space
Reduced amount of data to transfer between disk and memory or over network (e.g. web server).

Disadvantages:

Computing overhead to encode/decode the scan lines.
Worst case scenario: compressed format may result in larger file size than uncompressed format (for short encoding runs).