Different Image File Formats

By
Prof (Dr.)P P Ghadekar
 OUTLINE
❑On the completion student will be able to understand
❖Image File format Basics
❖Bit Map Image(BMP)/Device Independent Bitmap File
Format
❖Tagged Image File Format (TIFF)
❖Portable Networks Graphics (PNG) Image File Format
❖Joint Photographic Image File Format (JPEG)
❖ Photoshop Default File Format (PSD)
❖ Scalable Vector Graphics File Format (SVG)

2 Prof(Dr.) P P Ghadekar
 Image File Format Basics
❖ A digital information is often encoded in the form of binary
files for the purpose of storage and transmission.
❖ A file format is a method used to store digital data and
different file formats exists for storing images.
❖ Different file formats may compress the image data by
differing amounts.
❖ Whatever be the format, the image file consists of two parts
(I) File Header
(II) Image Data

3 Prof(Dr.) P P Ghadekar
 Image File Format
❖ Header Information:-The header
Format/Version
part contains some of the vital
Identification
Image Width and Height
information like format or version
Image type identification, width and height of
Image Data Format the image, type of the image and
Compression Type image data format.
The header also specifies the type
of compression mechanism.
Colour map(if any) The length of the file header is
Pixel values often fixed.

4 Prof(Dr.) P P Ghadekar
 Bitmap File Format (BMP)
❖ The BMP file format is capable of storing 2D digital images
of arbitrary width, height, and resolution, both monochrome
and color, in various color depths, and optionally with data
compression and color profiles.
❖ The Microsoft Windows Bitmap (BMP) file format is a basic
file format for digital images in the Microsoft Windows
world. BMP files have:
➢ A file header
➢ A bitmap header
➢ A color table
➢ Image data
❖ The file header occupies the first 14 bytes of all BMP files.
5 Prof(Dr.) P P Ghadekar
 Bitmap File Format (BMP)

BMP File Header

Bitmap Information

Color Table

Pixel Data

6 Prof(Dr.) P P Ghadekar Table - BMP file format

 Extraction of BMP header
❖The BMP file format .bmp is the standard file format
from Windows 3.0 onwards.
❖This format was developed by Microsoft for storing
bitmap images in a device independent manner.
❖The Windows BMP file consists of four parts:
➢ File Header
➢ Image Information Header
➢ Color Table
➢ Pixel Data

7 Prof(Dr.) P P Ghadekar
 BMP file header-14 Bytes
Field Name Size in Bytes Description

bfType 2 The characters "BM"

bfSize 4 The size of the file in bytes

Unused - must be zero

bfReserved1 2
(used for-Future Expansion)
Unused - must be zero
bfReserved2 2
(used for-Future Expansion)

bfOffBits 4 Offset to start of Pixel Data

8
 The BMP Image Information Header-40 Bytes
❖A BMP information header specifies the dimensions,
compression type and color format for the bitmap.
❖The Windows BMP format is of 40 bytes long.
❖The first four bytes of each format is the length of the
header in bytes.

9 Prof(Dr.) P P Ghadekar
 The BMP Image Information Header
Field Name Size in Bytes Description
biSize 4 Header Size - Must be at least 40
biWidth 4 Image width in pixels
biHeight 4 Image height in pixels
biplanes 2 Must be 1
biBitCount 2 Bits per pixel - 1, 2, 4, 8, 16, 24, or 32
biCompression 4 Compression type (0 = uncompressed)
biSizeImage 4 Image Size - may be zero for uncompressed images
biXPelsPerMeter 4 Preferred resolution in pixels per meter
biYPelsPerMeter 4 Preferred resolution in pixels per meter
biClrUsed 4 Number of Color Map entries that are actually used
Number of significant colors. If zero then all colors are
biClrImportant 4
important.
10
 The BMP Color Table- 4Bytes
❖A color table is defined as an array of RGB Quad
structures, contains as many elements as there are colors
in the bitmap.
❖There is no color table for 24 bit BMP images as each
pixel is represented by 24-bit Red-Green-Blue (RGB)
values in the actual bitmap data area.
❖ For an 8 bit bitmap image the color table consists of
256 entries with each entry consisting of four bytes of
data.
❖The first three bytes are the blue, green and the red
colors respectively.
❖The fourth byte is unused and must be equal to zero.
11
 The BMP Color Table
Field Name Size(bytes) Description

RgbBlue 1 specifies the blue part of the color

rgbGreen 1 specifies the green part of the color.

rgbRed 1 specifies the red part of the color.

rgbReserved 1 must always be set to zero.

12 Prof(Dr.) P P Ghadekar
 The Pixel Data
❖ In the 8-bit format each pixel is represented by a single byte of
data, that byte is an index into the color table.
❖ In 24-bit image, each pixel is represented by three consecutive
bytes of data that specifies the blue, green, and red component
values respectively.
❖ In 24-bit BMP file the color table is absent.
❖ The pixel data is actual image data represented by consecutive
rows, or scan lines.
❖ The number of bytes in one row must always be adjusted to fit
into the border of multiple of four.

13 Prof(Dr.) P P Ghadekar
 The Pixel Data
❖ You simply append zero bytes until the number of bytes in a
row reaches of multiple of four.
❖ Pixels are stored "upside-down" with respect to normal order,
starting in the lower left corner, going from left to right, and
then row by row from the bottom to the top of the image

14 Prof(Dr.) P P Ghadekar
 The Pixel Data
❖ The following figure illustrates the pixel data stored in a BMP
image. Image is stored from bottom left corner as indicated by
the file pointer and then moving upwards row by row.

15
 Algorithms for extraction of BMP header
❖ Using inbuilt MATLAB function.
1. Create a new MATLAB file.
2. Use the imfinfo function to copy the BMP header
into a variable.
3. Display the BMP header.

16 Prof(Dr.) P P Ghadekar
 Algorithms for extraction of BMP header
❖ Using C
1. Define a structure for bitmap file header.
2. Define a structure for bitmap information header.
3. Open the 8 bit BMP file.
4. Read the file header of BMP file one byte at a time and
store its contents in structure for file header.
5. Read image information header one byte at a time and
store its contents in structure for info header.
6. Display the contents of file header and image info header
on DOS screen.
7. Display image by using put pixel function using
Graphics.
17
8. Close all file pointers and exit.
 How To display a Bitmap Image in C and MATLAB
❑ ALGORITHMS
❖ Using MATLAB
➢Read the image using the imread function.
➢Display the image using the imshow function.
❖ Using C-Following C Functions are Used
➢ initgraph
➢ Graphresult
➢ Getpalette
➢ Setrgbpalette
➢ Putpixel
➢ Settextstyle

18
➢ outtextxy
 Function What it does
initgraph Initialize the graphics system by loading a graphics driver from disk (or
validating a registered driver) and then putting the system into graphics
mode.
graphresult Returns the error code for the last graphics operation that reported an
error, then resets the error level to gr0k.
getpalette Fills the palette type structure *palette with information about the current
palette’s size and colors.
setrgbpalette Defines colors for IBM-8514 and VGA graphics card drivers. Only the lower
byte of red, green, or blue is used, and out of each byte, only the 6 most
significant bits are loaded in the palette (Therefore, we shift left 2 bits by
multiplying by 4).
putpixel Plots a pixel at a specified point.
settextstyle Sets the text font, the direction in which text is displayed, and the size of
the characters.
outtextxy Displays a string at the specified location.
 Using C-Algorithm
1. Use initgraph to initialize the graphics system by
requesting auto detection of graphics driver and setting
highest resolution for the detected driver.
2. Use getpalette to get information about the current
palette’s size and colors.
3. Use setrgbpalette to define colors for the graphics card.
Since only the 6 most significant bits of the lower byte of
red, green and blue are loaded in the palette, multiply each
by 4 to shift each value left by 2 bits.
4. Get the image source file from the user and open the file
in read binary mode.
5. Get the width and height of image from the BMP file
20
header.
 Using C-Algorithm
6. Set the file pointer to the pixel data and store each pixel in an
array. The number of bytes in one row of the pixel are always
adjusted to fit into the border of multiple of four. Thus, if the
width of the image is not a multiple of four, skip the remaining
bytes.
7. Display the string ‘Bitmap Image’ on the screen using the
settextstyle and the outtextxy functions.
8. Use the putpixel function to display each pixel on the screen
in upside-down order (to compensate for the upside-down
storing of the pixel data).
9. Clear the graphics screen, close all file pointers and exit.

21 Prof(Dr.) P P Ghadekar
 Tagged Image File Format (TIFF)
❖It stands for Tagged Image File Format and was
developed by the Aldus Corporation in the 1980s.
❖It was later supported by Microsoft. TIFF files are often
used with scanned images.
❖Since a TIFF file does not compress an image file,
images are often large, but the quality is preserved.
❖It can handle multiple images and data in a single file
through the inclusion of ‘tags’ in the file header.
❖Tags can indicate the basic geometry of the image, such
as its size, or define how the image data is arranged and
whether various image compression options are used and
uses a filename extension of TIFF or TIF.
22 Prof(Dr.) P P Ghadekar
 Tagged Image File Format (TIFF)
❖The TIFF format is often used to exchange files
between applications and computer platforms.
❖Within TIFF, a lossless compression routine known as
LZW is available. This reduces the size of the stored file
without perceptible loss in quality.
❖The goals of the TIFF specification include
extensibility, portability and reversibility.

23 Prof(Dr.) P P Ghadekar
 Portable Networks Graphics (PNG)
❖PNG stands for Portable Networks Graphics.
❖PNG is bitmapped image format that employs lossless
data compression.
❖PNG was created to improve and replace GIF format.
The PNG file format is regarded and was made as free
and open-source successor to the GIF file format.
❖The PNG file format supports true (16 million colors)
whereas the GIF format only allows 256 colors.
❖PNG excels when the image has large areas of uniform
colors.

24 Prof(Dr.) P P Ghadekar
 Portable Networks Graphics (PNG)
❖The lossless PNG format is best suited for editing
pictures, whereas the lossy formats like JPEG are best
for the final distribution of photographic-type images
due to smaller file size.
❖Yet many earlier browsers do not support the PNG file
format. However, with the release of Internet Explorer 7,
all popular modern browsers fully support PNG.
❖Special features of PNG files include support for up to
48 bits of color information.

25 Prof(Dr.) P P Ghadekar
 Joint Photographic Experts Group (JPEG)
❖JPEG is not actually a file type. It is the most
important current standard for image compression.
❖JPEG standard was created by a working group of the
International Organization of Standards (ISO).
❖This format provides the most dramatic compression
option for photographic images.
❖JPEG compression is used with the JFIF file format
that uses the file extension ‘.jpg’.
❖This format is useful when the storage space is at a
premium.
❖JPEG pictures store a single raster image of 24-bit
27 color.
 Joint Photographic Experts Group (JPEG)
❖JPEG is a platform-independent format that supports the
highest levels of compression.
❖However, this Compression is lossy. Progressive JPEG
files support interlacing.

28 Prof(Dr.) P P Ghadekar
 The important features of JPEG file format
❖Lossy compression scheme.
❖The images are not interlaced. In case of progressive
JPEG, the images can be interlaced.
❖The strength of JPEG is its ability to compress large
image files.
❖Due to this compression, the image data can be stored
effectively and retransmitted efficiently from one
place to another.
❖ The base version of JPEG does not support multiple
layers and high dynamic range.
❖Hence JPEG will not be a wise choice if one is
29 interested in maintaining high quality pictures.
 Comparison
Attribute JPG GIF PNG BMP

Compression Lossy Lossless Lossless Lossless

Bits 8 or 24 bits 8 or 24 bits 1,4,8,1

24 6,24,32
bits ,48, or
64 bits
Colour Not Transpare Better Not
Transp nt Transparent Transpa
arent rent

30 Prof(Dr.) P P Ghadekar
 Transparent Meaning
❖ A transparent GIF (Graphics Interchange Format) is an image
file that has one color assigned to be "transparent" so that the
assigned color will be replaced by the browser's background
color, whatever it may be.
❖ For example, that you have created a rectangular GIF image
of a large red star on a white background.
❖ If you are only interested in having the red star appear on
your Web page, and don't want to see the white background,
you can transparentize the white background color so that it
changes to whatever the Web page's background color is
(yellow, for example).
❖ Then, when you view the Web page, you will only see a red
31
starProf(Dr.)
on aP Pyellow
Ghadekar
background.
 JPEG-2000
❖ The JPEG committee has released a new version of their file
format called JPEG 2000.
❖ JPEG 2000 employs wavelet-based image compression
algorithm whereas JPEG employs DCT based image
compression.
❖ JPEG 2000 offers progressive image downloading.
❖ The progressive image downloading allows the user to
download a lower resolution version of an image and to
continue downloading a more detailed version if needed.

32 Prof(Dr.) P P Ghadekar
 Photoshop Default File Format (PSD)
❖ PSD is the Photoshop’s default format which is capable of
supporting layers, editable text and millions of colours.
❖ It has the capacity to retain information related to layers,
masking channels etc. , which tend to be lost when saved in
another file format.
❖ The PSD format has no compression features, but should
still be used to archive complex images with multiple layers
and sophisticated selections or paths.
❖ Photoshop 5.5 has a lossless compression routine built into
it.

33 Prof(Dr.) P P Ghadekar
 Scalable Vector Graphics File Format (SVG)
❖ It is used for Internet use.
❖ This format is specifically based on XML, intended to create a
smaller, scalable image file format for internet use.
❖ It is generally smaller than bitmapped file and scalable
without any loss of resolution.
❖ The information for the image is stored in the text data so that
it can be searched and edited.

34
 Thanks

35