Image Formats

For BTech(IT) 6th Semester

PNG format
Designed to replace the older and simpler
GIF format Three main advantages over GIF Alpha channels Gamma correction Two-dimensional interlacing PNG does not support multiple image format and animations like GIF

PNG format
PNG supports three main image types
Truecolor Grayscale Palette

PNG Alpha Channels

For Web Today

Avoid GIF format Use JPEG for smooth images Use PNG for unsmooth images and line
drawing Tag the necessary gamma and chromaticity information in your PNG file Otherwise it is no better than GIF in terms of
device independence and portability

BMP
BMP format is a historic format (but still
commonly used) for Windows OS Can range from Black and White (1 bit per pixel) up to 24 bit color (16.7 million colors)

BMP Structure

BMP Header (14 bytes)

start 1 size 2 name bfType stdvalue 19778 purpose must always be set to 'BM' to declare that this is a .bmp-file. specifies the size of the file in bytes. must always be set to zero. must always be set to zero. specifies the offset from the beginning of the file to the bitmap data.

3 7 9

4 2 2

bfSize bfReserved1 bfReserved2

?? 0 0

11

bfOffBits

1078

BMP Header (14 bytes)

typedef struct { unsigned short int bfType; unsigned int bfSize; unsigned short int bfReserved1, bfReserved2; unsigned int bfOffBits; } HEADER;

Info (Information) Header

40 bytes in length Fields of interest are
Image width and height Number of bits per pixel (1,4,8,24)

Compressions supported by BMP

0 - no compression 1 - 8 bit run length encoding 2 - 4 bit run length encoding 3 - RGB bitmap with mask

Never in the History has any compression

been done on BMP images, so it is always 0

24 Bit Image Data

Three bytes per pixel in B,G,R order

Info (Information) Header

TIFF
Tagged Image File Format Leading commercial and professional image
standard Supports up to 48 bits Supports most color spaces- RGB, CMYK, YUV etc TIFF files optionally use LZW lossless compression.

SVG Format

SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG integrates with other W3C standards such as the DOM and XSL

SVG Advantages
SVG images can be created and edited with any text editor SVG images can be searched, indexed, scripted, and
compressed SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoom able (and the image can be zoomed without degradation) SVG is an open standard SVG files are pure XML

SVG Format
The main competitor to SVG is Flash The biggest advantage SVG has over Flash
is the compliance with other standards (e.g. XSL and the DOM) Flash relies on proprietary technology that is not open source

Viewing SVG Files

Firefox IE9 Chrome Opera Safari

SVG Example

SVG Code in HTML

Embedding SVG

SVG Shapes

Rectangle <rect> Circle <circle> Ellipse <ellipse> Line <line> Polyline <polyline> Polygon <polygon> Path <path>

SVG Filters

feBlend - filter for combining images feColorMatrix - filter for color transforms feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage

SVG Filters

feMerge feMorphology feOffset - filter for drop shadows feSpecularLighting feTile feTurbulence feDistantLight - filter for lighting fePointLight - filter for lighting feSpotLight - filter for lighting

Chroma Subsampling

 Every pixel is encoded with its own color

This image would represent 4:4:4 color. In the real world, every sampled pixel should have its own corresponding color But no, actually very few formats use 4:4:4 color
no system in common use (such as DV, DVCAM, DVCPRO, AVC-HD,
Digital8, HDV, DVCPRO-HD, HDCAM, etc) uses 4:4:4 color

4:1:1 sub sampling

4:2:0 sub sampling

4:2:2 sub sampling

What compression will you use in which photo? Why?