Common File Formats. Need a standard to store images Raster data Photos Synthetic renderings. Vector Graphic Illustrations Fonts

Similar documents
This is not yellow. Image Files - Center for Graphics and Geometric Computing, Technion 2

BMP Graphics File Formats

Lecture Coding Theory. Source Coding. Image and Video Compression. Images: Wikipedia

Graphics File Formats

Love is not rude, is not selfish, and does not get upset with others. Reading BMP Files

Bytes are read Right to Left, so = 0x3412, = 0x

Image coding and compression

lectures/7/src7/bmp.h /**************************************************************************** * bmp.h * Computer Science 50 * Problem Set 5

G64PMM - Lecture 3.2. Analogue vs Digital. Analogue Media. Graphics & Still Image Representation

Graphics File Formats

1.6 Graphics Packages

Lecture 8 JPEG Compression (Part 3)

7: Image Compression

BMP file format - Wikipedia

color bit depth dithered

Compressed Image File Formats JPEG, PNG, GIF, XBM, BMP. Your guide to graphics files on the Web. John Miano

Image Coding and Compression

Image Formats. Ioannis Rekleitis

MULTIMEDIA AND CODING

An Introduction to Video Compression in C/C++ Fore June

IMAGE COMPRESSION USING FOURIER TRANSFORMS

BMP file format. Contents. Pixel storage. The BMP file format, sometimes called bitmap. or DIB file format (for device-independent

Advanced High Graphics

Chapter 2 Digital Formats

Image Compression. cs2: Computational Thinking for Scientists.

Introduction to Computer Science (I1100) Data Storage

TODO. parse float input update outfile s header info resize horizontally remember padding! resize vertically

Lecture 8 JPEG Compression (Part 3)

Compression. storage medium/ communications network. For the purpose of this lecture, we observe the following constraints:

TODO. open file update outfile s header info read infile s scanline, pixel by pixel resize horizontally remember padding!

IMAGE COMPRESSION. Image Compression. Why? Reducing transportation times Reducing file size. A two way event - compression and decompression

CP SC 4040/6040 Computer Graphics Images. Joshua Levine

Multimedia Systems. Part 4. Mahdi Vasighi

Logo & Icon. Fit Together Logo (color) Transome Logo (black and white) Quick Reference Print Specifications

Courses IPCx, C2: Histogram, Code Comments

Data and information. Image Codning and Compression. Image compression and decompression. Definitions. Images can contain three types of redundancy

Data Representation From 0s and 1s to images CPSC 101

CS101 Lecture 12: Image Compression. What You ll Learn Today

CMPT 365 Multimedia Systems. Media Compression - Image

A QUAD-TREE DECOMPOSITION APPROACH TO CARTOON IMAGE COMPRESSION. Yi-Chen Tsai, Ming-Sui Lee, Meiyin Shen and C.-C. Jay Kuo

Compression II: Images (JPEG)

An Introduction to Digital Video Data Compression in Java. Fore June

Robert Matthew Buckley. Nova Southeastern University. Dr. Laszlo. MCIS625 On Line. Module 2 Graphics File Format Essay

Digital Image Representation Image Compression

Problem Set 5: Forensics

Dissecting Files. Endianness. So Many Bytes. Big Endian vs. Little Endian. Example Number. The "proper" order of things. Week 6

3 Data Storage 3.1. Foundations of Computer Science Cengage Learning

Features. Sequential encoding. Progressive encoding. Hierarchical encoding. Lossless encoding using a different strategy

CpSc 101, Fall 2015 Lab7: Image File Creation

Data Representation and Networking

Image, video and audio coding concepts. Roadmap. Rationale. Stefan Alfredsson. (based on material by Johan Garcia)

255, 255, 0 0, 255, 255 XHTML:

1/27/2013. Outline. Adding images to your site. Images and Objects INTRODUCTION TO WEB DEVELOPMENT AND HTML

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Problem Set 4: Forensics

VC 12/13 T16 Video Compression

Image creation with PHP

CS 335 Graphics and Multimedia. Image Compression

1. Introduction to the OpenCV library

pset 4: Forensics Zamyla Chan

Image Types Vector vs. Raster

Output models Drawing Rasterization Color models

Web Design, 5 th Edition

Multimedia Systems Image III (Image Compression, JPEG) Mahdi Amiri April 2011 Sharif University of Technology

Lecture 5: Compression I. This Week s Schedule

Unit 2 Digital Information. Chapter 1 Study Guide

Multimedia Content. Web Architecture and Information Management [./] Spring 2009 INFO (CCN 42509) Contents. Erik Wilde, UC Berkeley School of

Frequently Asked Questions about Text and Graphics

Introduction ti to JPEG

Multimedia Networking ECE 599

Understanding file formats

Multimedia Technology

Standard File Formats

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Horizontal Rule Element

The Raster Data Model

Simple variant of coding with a variable number of symbols and fixlength codewords.

Welcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs

Chapter 1 (Computer Forensics)

Topic 5 Image Compression

Lecture Week 4. Images

Raster Data Models 9/18/2018

Rasters are: The Raster Data Model. Cell location specified by: Why squares? Raster Data Models 9/25/2014. GEO327G/386G, UT Austin 1

The Raster Data Model

Elementary Computing CSC 100. M. Cheng, Computer Science

ECE 3331, Dr. Hebert, Summer-3, 2016 HW 11 Hardcopy HW due Tues 07/19 Program due Sunday 07/17. Problem 1. Section 10.6, Exercise 3.

INF5063: Programming heterogeneous multi-core processors. September 17, 2010

An introduction to JPEG compression using MATLAB

Professor Laurence S. Dooley. School of Computing and Communications Milton Keynes, UK

Minification techniques

DigiPoints Volume 1. Student Workbook. Module 8 Digital Compression

IMAGE PROCESSING (RRY025) LECTURE 13 IMAGE COMPRESSION - I

REVIEW ON IMAGE COMPRESSION TECHNIQUES AND ADVANTAGES OF IMAGE COMPRESSION

Index. 1. Motivation 2. Background 3. JPEG Compression The Discrete Cosine Transformation Quantization Coding 4. MPEG 5.

Data encoding. Lauri Võsandi

Data Storage JMU Computer Science Content Teaching Academy 2014

Lossy compression CSCI 470: Web Science Keith Vertanen Copyright 2013

Multimedia on the Web

Chapter 1. Digital Data Representation and Communication. Part 2

A Image Comparative Study using DCT, Fast Fourier, Wavelet Transforms and Huffman Algorithm

Chapter 2 Image File Formats

Transcription:

1 Image Files

Common File Formats Need a standard to store images Raster data Photos Synthetic renderings Vector Graphic Illustrations Fonts Bitmap Format - Center for Graphics and Geometric Computing, Technion 2

Common File Formats Raster Graphics Good for texture Vector Graphics Bad for texture Bitmap Format - Center for Graphics and Geometric Computing, Technion 3

Common File Formats Raster Graphics Bad for resizing Vector Graphics Good for resizing Bitmap Format - Center for Graphics and Geometric Computing, Technion 4

Common File Formats 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 5

One of the common image formats available And the simplest! Used in Windows Very easy to implement inefficient storage A matrix of pixels What is a bitmap? Bitmap Format - Center for Graphics and Geometric Computing, Technion 6

BMP Format 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. Bitmap Format - Center for Graphics and Geometric Computing, Technion 7

BMP Structure BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 8

typedef struct { WORD bftype; //Magic number BM DWORD WORD WORD DWORD BITMAPFILEHEADER } BITMAPFILEHEADER; bfsize; //Size of file in bytes bfreserved1; bfreserved2; bfoffbits; BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 9

BITMAPFILEHEADER Cont. 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 BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 10

BITMAPINFO typedef struct BITMAPINFO { BITMAPINFOHEADER RGBQUAD } BITMAPINFO; bmiheader; bmicolors[1]; The BITMAPINFO structure combines the BITMAPINFOHEADER structure and a color palette. BITMAPFILEHEADER BITMAPINFO Pixels BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 11

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 BITMAPINFOHEADER RGBQUAD (Palette) Bitmap Format - Center for Graphics and Geometric Computing, Technion 12 Pixels

BITMAPINFOHEADER 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. Bitmap Format - Center for Graphics and Geometric Computing, Technion 13

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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 14

PNG File Format Features 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 15

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 PNG File Format 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 16

PNG File Format other chunks 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. Bitmap Format - Center for Graphics and Geometric Computing, Technion 17

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 It is already in the home work skeleton Bitmap Format - Center for Graphics and Geometric Computing, Technion 18

Example Reading a PNG file #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; } Bitmap Format - Center for Graphics and Geometric Computing, Technion 19

Example Writing 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(); Bitmap Format - Center for Graphics and Geometric Computing, Technion 20

PPM format The lowest common denominator 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 21

The maximum color value (Maxval), again in ASCII decimal. Must be less than 2 16. PPM format 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. Bitmap Format - Center for Graphics and Geometric Computing, Technion 22

Stands for Joint Photographic Experts Group Lossy compression JPEG 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 23

DCT in 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 24

JPEG File Format Start of Image Frame End of Image Header Scan Scan Header Scan Scan Bitmap Format - Center for Graphics and Geometric Computing, Technion 25

JPEG Characteristics 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 Bitmap Format - Center for Graphics and Geometric Computing, Technion 26

Bad for JPEG Characteristics Text a lot of compression artifacts due to the large number of sharp features Also bad for CAD blueprints Useless for medical images, why? Bitmap Format - Center for Graphics and Geometric Computing, Technion 27