image files - technionwebcourse.cs.technion.ac.il/234325/winter2012-2013/ho/wcfiles/...png was...

Image Files

1

This is not yellow

Image Files - Center for Graphics and Geometric Computing, Technion 2

Common File Formats

Need a standard to store images Raster data

Photos

Synthetic renderings

Vector Graphic

Illustrations

Fonts

3

Common File Formats

Raster Graphics

Good for texture

4

Vector Graphics

Bad for texture

Common File Formats

Raster Graphics

Bad for resizing

5

Vector Graphics

Good for resizing

Desirable Features High quality

Lossy vs Lossless formats

Channel depth – bit per pixel – number of possible colors

Small file size

Quality of compression

Small overhead

Application data

Save application specific data

6

Common File Formats

One of the common image formats available

And the simplest!

Used in Windows

Very easy to implement

inefficient storage

A matrix of pixels

7

What is a bitmap?

Like most common image formats, a bitmap image

consists of

Header – which contains descriptive information about the

image, such as width, height, etc.

Body – which contains the actual (raster scanned) colors of the

image pixels.

8

BMP Format

9

BITMAPFILEHEADER

BITMAPINFO

BITMAPINFOHEADER

RGBQUAD (Palette)

Pixels

BMP Structure

typedef struct {

WORD bfType; //Magic number “BM”

DWORD bfSize; //Size of file in bytes

WORD bfReserved1;

WORD bfReserved2;

DWORD bfOffBits;

} BITMAPFILEHEADER;

10

BITMAPFILEHEADER

BITMAPINFO

RGBQUAD (Palette)

Pixels

BITMAPINFOHEADER

BITMAPFILEHEADER

The BITMAPFILEHEADER fields are:

bfType - Specifies the file type. It must be BM.

bfSize - Specifies the size, in bytes, of the

bitmap file.

bfOffBits - Specifies the offset, in bytes, from

the BITMAPFILEHEADER structure to the

bitmap data.

A BITMAPINFO structure immediately

follows the BITMAPFILEHEADER

structure in the DIB file

11

BITMAPFILEHEADER

BITMAPINFO

RGBQUAD (Palette)

Pixels

BITMAPINFOHEADER

BITMAPFILEHEADER – Cont.

typedef struct BITMAPINFO

{

BITMAPINFOHEADER bmiHeader;

RGBQUAD bmiColors[1];

} BITMAPINFO;

The BITMAPINFO structure

combines the

BITMAPINFOHEADER structure

and RDBQUAD.

Bitmap Format - Center for Graphics and Geometric Computing, Technion 12

BITMAPFILEHEADER

BITMAPINFO

RGBQUAD (Palette)

Pixels

BITMAPINFOHEADER

BITMAPINFO

typedef struct BITMAPINFOHEADER

{

DWORD biSize;

LONG biWidth;

LONG biHeight;

WORD biPlanes;

WORD biBitCount;

DWORD biCompression;

DWORD biSizeImage;

LONG biXPelsPerMeter;

LONG biYPelsPerMeter;

DWORD biClrUsed;

DWORD biClrImportant;

} BITMAPINFOHEADER;


BITMAPFILEHEADER

BITMAPINFO

RGBQUAD (Palette)

Pixels

BITMAPINFOHEADER

BITMAPINFO

biSize – size of the struct in bytes

biWidth – width in pixels

biHeight – height in pixels

biPlanes – layers in bitmap – must be 1

biBitCount – bit per pixel

1,2,4,8,16,24,32

Use 24 bits for 3 channels with no palette images.

More fields – look at Visual .Net manual for the rest of

the fields. The above are the most important.


BITMAPINFOHEADER

GIF File Format

Created in ’89 by CompuServe for the

internet

Limited to 256 color palette

Uses LZW compression Lossless

Works better on uniform color areas

Features transparent colors and

animation

4-pass Interlacing


PNG was developed to replace the GIF file format.

Gif has a patent problem LZW is patented by Unisys.

Alpha channel support - transparency

Gamma correction – hardware independence.

Color space Up to 16 bit grayscale images

Up to 48 bit true color

PNG is a lossless image format Compression is done using the free gzip library.

No degradation during image manipulation and resaving

Interlacing Improve transmission times

2D interlacing effect – like jpeg


PNG File Format – Features

8-byte Signature

The same for every png file

Sequence of “Chunks”

4-byte header

The “name” of the chunk

“IDAT” for pixel data chunks

Contain information like pixel data, gamma correction data, text data …

Ends with 32bit CRC

Pixel ordering in IDAT

Pixels in a scan-line come from left to right

Scan-lines are ordered from top to bottom


PNG File Format

IHDR chunk Must appear first

Contain the following fields

Width: 4 bytes

Height: 4 bytes

Bit depth: 1 byte

Color type: 1 byte

Compression method: 1 byte

Filter method: 1 byte

Interlace method: 1 byte

IEND chunk The IEND chunk must appear LAST.

It marks the end of the PNG data stream.

Contains empty data field.


PNG File Format – other chunks

You are provided with a C++ class for the png library

With it you can load, save and manipulate png images.

The tool consists of:

PngWrapper.h

PngWrapper.cpp


The PNG Tool

#include "PngWrapper.h"

PngWrapper pngReadFile("test.png");

pngReadFile.ReadPng();

int c = pngReadFile.GetValue(84,118);

//gray image

if(pngReadFile.GetNumChannels()==1)

std::cout<<"gray color "<<c<<std::endl;

//we only support rgb not bgr format

else if(pngReadFile.GetNumChannels() == 3){

int r = R(c);//the red componnent

int g = G(c);//the green

int b = B(c);//the blue

std::cout<<"("<<r<<","<<g<<","<<b<<")"<<std::endl;

}


Example – Reading a PNG file

#include "PngWrapper.h"

PngWrapper pngWrite(“test.png”,640,480);

pngWrite.InitWritePng();

int cx = pngWrite.GetWidth()/2;

int cy = pngWrite.GetHeight()/2;

for(int I = 0; i < pngWrite.GetWidth(); i++)

for(int j = 0; j < pngWrite.GetHeight(); j++)

if((i-cx)*(i-cx) + (j-cy)*(j-cy)<800 &&

(i-cx)*(i-cx) + (j-cy)*(j-cy)>600 ||

(i-cx)*(i-cx) + (j-cy)*(j-cy)>200 &&

(i-cx)*(i-cx) + (j-cy)*(j-cy)<300)

pngWrite.SetValue(i,j,SET_RGB(255,0,0));

else

pngWrite.SetValue(i,j,SET_RGB(0,255,255));

//the result is only written to the disk now.

pngWrite.WritePng();


Example – Writing a PNG file

A "magic number" for identifying

the file type. A ppm image's

magic number is the two

characters "P6".

White-space (blanks, TABs, CRs,

LFs).

A width, formatted as ASCII

characters in decimal.

White-space.

A height, again in ASCII decimal.

White-space.

P6

# feep.ppm

4 4

15

Binary data


PPM format – The lowest common denominator

The maximum color value (Maxval), again in ASCII

decimal.

Must be less than 216.

Newline or other single white-space character.

A raster of Height rows, in order from top to bottom.

Each row consists of Width pixels, in order from left to right.

Each pixel is a triplet of red, green, and blue samples, in that

order.


PPM format

Stands for Joint Photographic Experts

Group

Lossy compression

Block discreet cosine transform – lossy

Each block is aprxmated by sum of cosines

Only few bytes to encode 8x8 block

Huffman coding - lossless

Common bytes replaced by shorter codes


JPEG

Related to the Fourier transform

divide the image into blocks of 8X8 pixels and apply

transform

Each block is a linear combination of cosines

Low frequencies contain most of the information

High frequencies can be thrown away – Lossy!

Transition between blocks

Artifacts

Fixed in JPEG 2000 using wavelet transform


DCT in JPEG

Good for storing photographs

Good statistical behavior helps jpeg

Able to represent images with lots of shades

Good Compression Ratio

Often 1:10 to 1:20 without any noticeable

difference

Good for transferring data on the web

Quality Vs. Compression tradeoff


1.5Kb 4.7Kb 9.5Kb 15Kb 83Kb

JPEG Characteristics

Bad for

Text – a lot of compression artifacts due to the large

number of sharp features

Also bad for CAD blueprints

Useless for medical images, why?


JPEG Characteristics

image files - technionwebcourse.cs.technion.ac.il/234325/winter2012-2013/ho/wcfiles/...png was...

Documents