Imagefileformats for software engineers.ppt

Image File Formats
Image File Formats

2
2
Multimedia Formats
Multimedia Formats
File Format
File Format Type of File
Type of File Filename Extension
Filename Extension
Sun Systems sound
Sun Systems sound audio
audio .au
.au
Windows sound
Windows sound audio
audio .wav
.wav
Audio interchange
Audio interchange audio
audio .aiff, .aifc
.aiff, .aifc
RealAudio
RealAudio audio
audio
stream
stream
.ra, .ram
.ra, .ram
CompuServe GIF
CompuServe GIF graphics
graphics .gif
.gif
JPEG
JPEG graphics
graphics .jpg, .jpeg
.jpg, .jpeg
Windows Bitmap
Windows Bitmap graphics
graphics .bmp
.bmp
QuickTime
QuickTime video
video .mov, .moov, .qt
.mov, .moov, .qt
Video for Windows
Video for Windows video
video .avi
.avi
MPEG video
MPEG video video
video .mpg, .mpeg
.mpg, .mpeg

3
3
Analog versus bitmap
Analog versus bitmap
images
images
 The visual world is analog, which is to say that real-
The visual world is analog, which is to say that real-
world images is a continuous spectrum of colors.
world images is a continuous spectrum of colors.
An analog image embodies an infinite number of
An analog image embodies an infinite number of
details.
details.
 Infinity is uncomfortably large to a computer. A
Infinity is uncomfortably large to a computer. A
computer-stored image is split into little bits of light.
computer-stored image is split into little bits of light.
 A bitmap is a matrix of colored dots.
A bitmap is a matrix of colored dots.
 This should help illustrate the nature of a bitmap.
This should help illustrate the nature of a bitmap.

4
4
True Color Bitmap
True Color Bitmap
 The smallest useful object for storing numbers on a
The smallest useful object for storing numbers on a
computer is a byte.
computer is a byte.
 In this sort of bitmap, each pixel requires one byte
In this sort of bitmap, each pixel requires one byte
for each color index for a total of three bytes per
for each color index for a total of three bytes per
pixel.
pixel.
 As a byte represents eight bits, each pixel requires
As a byte represents eight bits, each pixel requires
24 bits to store all its color information.
24 bits to store all its color information.
 This defines the maximum number of discrete colors
This defines the maximum number of discrete colors
this sort of bitmap can represent as 2
this sort of bitmap can represent as 224
24
, or
, or
16,777,216.
16,777,216.
 Such graphics are referred to as
Such graphics are referred to as “True Color"
“True Color"
images, or just as "24-bit" graphics.
images, or just as "24-bit" graphics.

5
5
Size consideration in a
Size consideration in a
true-colored bitmap image
true-colored bitmap image
 The lowest resolution for a monitor
The lowest resolution for a monitor
displaying a Windows desktop is 640 by 480
displaying a Windows desktop is 640 by 480
pixels.
pixels.
 In a bitmap of this resolution, then, there
In a bitmap of this resolution, then, there
would be three bytes per pixel, for a total of
would be three bytes per pixel, for a total of
640 x 480 x 3 bytes, or about 900 kilobytes.
640 x 480 x 3 bytes, or about 900 kilobytes.
 Bitmapped graphics are huge entities, and
Bitmapped graphics are huge entities, and
they become huger still as they get better
they become huger still as they get better
looking.
looking.

6
6
Bit-Depth = Color-Depth
Bit-Depth = Color-Depth
 Number of Colors = 2^(Bit-depth)
Number of Colors = 2^(Bit-depth)
 Bit-depth is the number of bits.
Bit-depth is the number of bits.
– It is also called
It is also called “
“Color resolution
Color resolution”
”.
.
Bit depth
Bit depth Color resolution
Color resolution Calcuation
Calcuation
1-bit
1-bit 2 colors
2 colors 2^1 = 2
2^1 = 2
2-bit
2-bit 4 colors
4 colors 2^2 = 4
2^2 = 4
3-bit
3-bit 8 colors
8 colors 2^3 = 8
2^3 = 8
4-bit
4-bit 16 colors
16 colors 2^4 = 16
2^4 = 16
8-bits
8-bits 256 colors
256 colors 2^8 = 256
2^8 = 256
16-bits
16-bits 65,536 colors
65,536 colors 2^16 = 65536
2^16 = 65536
24-bits
24-bits 16,777,215 colors
16,777,215 colors 2^24 = 16.7 million
2^24 = 16.7 million

7
7
8-bit and 24-bit photos
8-bit and 24-bit photos
 Can you see the difference?
Can you see the difference?

8
8
Color Palettes
Color Palettes
 Photorealistic images look best if they're stored in a
Photorealistic images look best if they're stored in a
format which allows them to be reproduced with as
format which allows them to be reproduced with as
many of the 16,777,216 colours in a computer.
many of the 16,777,216 colours in a computer.
However, the resulting file size may be prohibitively
However, the resulting file size may be prohibitively
large, especially when non-lossy formats are used.
large, especially when non-lossy formats are used.
 For practical purposes, the next step down from a file
For practical purposes, the next step down from a file
which can store images having a maximum of
which can store images having a maximum of
16,777,216 colours, is one which can store images
16,777,216 colours, is one which can store images
having a maximum of 256 colours.
having a maximum of 256 colours.
 Such files are referred to as using "
Such files are referred to as using "palette-colour
palette-colour“.
“.
The colours in a palette-colour file are derived from a
The colours in a palette-colour file are derived from a
potential palette of 16,777,216 colours, but no more
potential palette of 16,777,216 colours, but no more
than 256 of them can be used in any one image.
than 256 of them can be used in any one image.

9
9
Vector Graphics
Vector Graphics
 In addition to bitmap graphics, there are
In addition to bitmap graphics, there are vector
vector
graphics
graphics.
.
 Vector graphics define pictures as collections of lines,
Vector graphics define pictures as collections of lines,
ellipses, triangles, polygons and other basic graphic
ellipses, triangles, polygons and other basic graphic
"primitives."
"primitives."
 Vector graphics are limited to storing mechanical art
Vector graphics are limited to storing mechanical art
– they cannot handle photo realistic subject.
they cannot handle photo realistic subject.
 Vector graphic formats include
Vector graphic formats include
– Encapsulated PostScript files, which use the extension EPS,
Encapsulated PostScript files, which use the extension EPS,
– Corel Draw files, which use the extension CDR,
Corel Draw files, which use the extension CDR,
– AutoCAD drawings.
AutoCAD drawings.

10
10
Vector Graphics
Vector Graphics
 Scaling vector graphics
Scaling vector graphics

11
11
Bitmap vs. Vector Graphics
Bitmap vs. Vector Graphics
 Vector graphics
Vector graphics
– Describe object
Describe object
relationships;
relationships;
can be scaled to
can be scaled to
any desired size
any desired size
without
without
pixellation
pixellation

12
12
Bitmap vs. Vector graphics
Bitmap vs. Vector graphics

13
13
Bitmap and Vector
Bitmap and Vector
graphics file format
graphics file format
 Vector-based
Vector-based files are more suitable for
files are more suitable for
illustrations that require precise
illustrations that require precise
measurements.
measurements.
– File names for vector-based images usually consist
File names for vector-based images usually consist
of extensions such as
of extensions such as *.EPS
*.EPS,
, *CDR
*CDR, or
, or *.DWG
*.DWG.
.
 Bitmap-based
Bitmap-based files are more suitable for
files are more suitable for
photo-realistic images that require complex
photo-realistic images that require complex
color variations.
color variations.
– File names for bitmap-based images usually
File names for bitmap-based images usually
consist of extensions such as
consist of extensions such as *.JPG
*.JPG,
, *GIF
*GIF,
, *.TIF
*.TIF,
,
or
or *.BMP
*.BMP.
.

14
14
Optimizing Web Graphics
Optimizing Web Graphics
 According to the compression method used, graphic
According to the compression method used, graphic
file formats can be regarded as being of three types.
file formats can be regarded as being of three types.
– Compression works by finding areas in your graphics which
Compression works by finding areas in your graphics which
are all the same color and replacing them with notes which
are all the same color and replacing them with notes which
say, in effect "this area is all the same color."
say, in effect "this area is all the same color."
 The first type stores graphics
The first type stores graphics uncompressed
uncompressed.
.
– The final file size will typically be a bit larger than the size of
The final file size will typically be a bit larger than the size of
the graphic stored in it, allowing for a bit of extra space for
the graphic stored in it, allowing for a bit of extra space for
internal housekeeping for the file.
internal housekeeping for the file.
– Windows BMP (.bmp) files are an example of this sort of
Windows BMP (.bmp) files are an example of this sort of
format.
format.

15
15
Lossless Compression
Lossless Compression
 The second type is called
The second type is called "non-lossy“
"non-lossy“ or
or
“lossless”
“lossless” compression formats.
compression formats.
– Whatever gets stored in them will be identical
Whatever gets stored in them will be identical
to what emerges from a lossless file when it's
to what emerges from a lossless file when it's
unpacked.
unpacked.
– Most graphic formats use lossless
Most graphic formats use lossless
compression - the GIF and PCX(PC
compression - the GIF and PCX(PC
paintbrush) formats are among them.
paintbrush) formats are among them.

16
16
Lossy Compression
Lossy Compression
 The third type of bitmapped graphic file formats is
The third type of bitmapped graphic file formats is
called
called "lossy"
"lossy" compression.
compression.
– Photorealistic images don't compress well because they
Photorealistic images don't compress well because they
have lots of details
have lots of details
– the details are what prevent areas from being all the same
the details are what prevent areas from being all the same
color, and as such from responding well to compression.
color, and as such from responding well to compression.
– In some cases the details represent very subtle color
In some cases the details represent very subtle color
variations
variations
– perhaps too subtle to be discernable by your eye, or at
perhaps too subtle to be discernable by your eye, or at
least, too subtle to make much of a difference to your
least, too subtle to make much of a difference to your
perception of the graphic in question.
perception of the graphic in question.

17
17
Lossy Compression
Lossy Compression
 Lossy compression seeks to improve upon the
Lossy compression seeks to improve upon the
compression of the graphics it deals with by throwing
compression of the graphics it deals with by throwing
away some of the details in your source images to create
away some of the details in your source images to create
more areas which are all the same colour.
more areas which are all the same colour.
 Having done so, lossy compression can typically improve
Having done so, lossy compression can typically improve
upon the file compression offered by the non-lossy
upon the file compression offered by the non-lossy
formats.
formats.
 Examples of lossy image file format are JPEG, PIC, and
Examples of lossy image file format are JPEG, PIC, and
ART.
ART.
 Lossy compression allows you to specify the amount of
Lossy compression allows you to specify the amount of
detail to be discarded when a graphic is compressed. This
detail to be discarded when a graphic is compressed. This
level of image degradation is called the “quality factor“.
level of image degradation is called the “quality factor“.

TIFF
TIFF
 Tagged Image File Format[by Aldus corporation]
Tagged Image File Format[by Aldus corporation]
 for storing raster graphics images.
for storing raster graphics images.
 The format was created by Aldus Corporation for
The format was created by Aldus Corporation for
use in desktop publishing
use in desktop publishing
 TIFF images create very large file sizes
TIFF images create very large file sizes
 TIFFs are also extremely flexible in terms of color
TIFFs are also extremely flexible in terms of color
(they can be grayscale, or CMYK for print, or RGB
(they can be grayscale, or CMYK for print, or RGB
for web)
for web)
 Platform: MS-DOS, Mac, Unix
Platform: MS-DOS, Mac, Unix
19
19

TIFF
TIFF
 The TIFF format is widely supported by
The TIFF format is widely supported by
image-manipulation applications, by
image-manipulation applications, by
publishing and page layout applications,
publishing and page layout applications,
and by scanning, faxing, word processing,
and by scanning, faxing, word processing,
optical character recognition and other
optical character recognition and other
applications.
applications.
 TIFF is the most common file type used in
TIFF is the most common file type used in
photo software (such as Photoshop), as
photo software (such as Photoshop), as
well as page layout software
well as page layout software
20
20

TIFF organization
TIFF organization
 IFH [image file Header]
IFH [image file Header]
 IFD [Image file Descriptor]
IFD [Image file Descriptor]
 Bitmap data
Bitmap data
21
21

IFH
IFH
 Fixed location [first 8B in file1]
Fixed location [first 8B in file1]
 Simplest among all of the formats
Simplest among all of the formats
 Contains 3 fields of info.
Contains 3 fields of info.
– Identifier [4949h, 4D4Dh]
Identifier [4949h, 4D4Dh]
– Version
Version
– IFDoffset [offset of 1
IFDoffset [offset of 1st
st
IFD, (32 b value)]
IFD, (32 b value)]
22
22

IFD
IFD
 Each IFD contains 1/more data structures
Each IFD contains 1/more data structures
(k/s tags)
(k/s tags)
 Each tag is 12B record(info @ bitmap
Each tag is 12B record(info @ bitmap
data)
data)
 Contains info on height, width & depth of
Contains info on height, width & depth of
img, # color planes & compression type
img, # color planes & compression type
 IFD is dynamic [varying size & location]
IFD is dynamic [varying size & location]
23
23

Format of IFD
Format of IFD
3 possible physical arrangements of data in a TIFF file
3 possible physical arrangements of data in a TIFF file
24
24

25
25
GIF Format
GIF Format
 GIF – Graphics Interchange Format
GIF – Graphics Interchange Format
 Platform:MS-DOS, Mac, UNIX.
Platform:MS-DOS, Mac, UNIX.
 The GIF format is one of the most commonly used
The GIF format is one of the most commonly used
graphic file formats, especially on the Internet.
graphic file formats, especially on the Internet.
 The GIF format is exceedingly useful in that it can
The GIF format is exceedingly useful in that it can
contain animations. Its internal structure is such that it
contain animations. Its internal structure is such that it
can store multiple images and controls to make them
can store multiple images and controls to make them
appear as real time animation
appear as real time animation
– animated GIF
animated GIF.
.
 The GIF format also allows a special color as to be
The GIF format also allows a special color as to be
specified as "using the background." This results in the
specified as "using the background." This results in the
image looks like transparent
image looks like transparent
– transparent GIF
transparent GIF.
.

26
26
Animated GIF
Animated GIF
 Advantages:
Advantages:
– No need other software or plugins
No need other software or plugins
– GIF is the standard format on the Web.
GIF is the standard format on the Web.
– GIF animated tools are available to use.
GIF animated tools are available to use.
 The file contains layered frames on top of
The file contains layered frames on top of
each other.
each other.
 Tips:
Tips:
– Avoid more than one animated GIF on a page.
Avoid more than one animated GIF on a page.
– Avoid animated GIF on text-rich pages.
Avoid animated GIF on text-rich pages.
– Examine the pause between repetitions.
Examine the pause between repetitions.

27
27
Animated GIF
Animated GIF

28
28
GIF Format
GIF Format
 GIF is indexed color image.
GIF is indexed color image.
– The color of the image is indexed in a palette (a color
The color of the image is indexed in a palette (a color
table).
table).
 The GIF format is only capable of supporting a
The GIF format is only capable of supporting a
maximum of 256 colors.
maximum of 256 colors. This means that you
This means that you
cannot convert directly from a 24 bit file, such as a
cannot convert directly from a 24 bit file, such as a
JPEG, to the GIF format.
JPEG, to the GIF format.
– You need to convert a 24-bit image to Indexed Color mode
You need to convert a 24-bit image to Indexed Color mode
first.
first.
– Reduce the number of colors to a palette of 256 or less.
Reduce the number of colors to a palette of 256 or less.
– Create an “adaptive” palette – a custom palette generated
Create an “adaptive” palette – a custom palette generated
by the most commonly used color in the image.
by the most commonly used color in the image.

29
29
GIF Format
GIF Format
 Some conversion software, such as Graphic
Some conversion software, such as Graphic
Workshop and xv can dither a true color JPEG
Workshop and xv can dither a true color JPEG
image down to 256 colors.
image down to 256 colors.
– Note that reducing a true-color image in this way will
Note that reducing a true-color image in this way will
usually leave you with acceptable images, but they will not
usually leave you with acceptable images, but they will not
be as detailed as the source true-color graphics they were
be as detailed as the source true-color graphics they were
derived from.
derived from.
 Note: GIF format was created by CompuServe in
Note: GIF format was created by CompuServe in
1987. The most popular format is GIF 89a.
1987. The most popular format is GIF 89a.
– GIF87a:
GIF87a: supports interlacing and storage of multiple files.
supports interlacing and storage of multiple files.
– GIF89a:
GIF89a: extends the GIF87a specification and adds
extends the GIF87a specification and adds
transparency, text comments, and animation of text and
transparency, text comments, and animation of text and
graphics.
graphics.

30
30
GIF Format
GIF Format
 The internal compression algorithm used by GIF is
The internal compression algorithm used by GIF is
called the LZW (Lempel-Zev-Welch), which is
called the LZW (Lempel-Zev-Welch), which is
patented by Unisys Corporation.
patented by Unisys Corporation.
– It is a “lossless” compression.
It is a “lossless” compression.
– No image information is lost during compression process.
No image information is lost during compression process.
– Take advantages of repetition in data streams.
Take advantages of repetition in data streams.
 Question: When should we use GIF?
Question: When should we use GIF?
– Logos, line art, icons, cartoon-like illustrations.
Logos, line art, icons, cartoon-like illustrations.
– Majority is flat colors.
Majority is flat colors.
– GIF is the best choice.
GIF is the best choice.

31
31
Interlaced Image
Interlaced Image

33
33
Transparency GIF
Transparency GIF
 The image can be shapes other than
The image can be shapes other than
rectangles.
rectangles.
 One position of the color palette is
One position of the color palette is
designated as
designated as “
“Transparent
Transparent”
”.
.
 All pixels of the image that have this
All pixels of the image that have this
particular color index will be painted
particular color index will be painted
as transparent when viewing.
as transparent when viewing.

34
34
Transparency GIF
Transparency GIF
Not a transparent GIF
a transparent GIF

35
35
JPEG Format
JPEG Format
 JPEG – Joint Photographic Experts Group
JPEG – Joint Photographic Experts Group
 The JPEG format uses "
The JPEG format uses "lossy
lossy" compression to get more graphics into
" compression to get more graphics into
a smaller file than would otherwise be possible.
a smaller file than would otherwise be possible.
 There are a number of things that may not be apparent in using
There are a number of things that may not be apparent in using
JPEG files, however, and which might make your use of them less
JPEG files, however, and which might make your use of them less
than optimum.
than optimum.
 An image written to the JPEG format will be degraded.
An image written to the JPEG format will be degraded.
 The amount of degradation, the "
The amount of degradation, the "quality factor
quality factor," can usually be set in
," can usually be set in
a graphics software.
a graphics software.
– If the value is set to 100, almost no degradation will occur when an image
If the value is set to 100, almost no degradation will occur when an image
is written to a JPEG file. Of course, the compression of the resulting file
is written to a JPEG file. Of course, the compression of the resulting file
will not be significant.
will not be significant.
– If it is set to a value close to zero, the resulting image will be a very small
If it is set to a value close to zero, the resulting image will be a very small
file but unrecognizable.
file but unrecognizable.
– The default value of 75 is usually a good compromise.
The default value of 75 is usually a good compromise.

36
36
JPEG Format
JPEG Format
 The image degradation caused by the JPEG format is
The image degradation caused by the JPEG format is
cumulative. As such, if you write an image to a JPEG file, and
cumulative. As such, if you write an image to a JPEG file, and
then read it from the JPEG file and write it back to the JPEG
then read it from the JPEG file and write it back to the JPEG
format, it will have suffered two passes of image degradation.
format, it will have suffered two passes of image degradation.
 It works very, very badly on text, line art or other types of
It works very, very badly on text, line art or other types of
mechanical graphics, which it will degrade quite noticeably.
mechanical graphics, which it will degrade quite noticeably.
These sorts of graphics should be stored in another format,
These sorts of graphics should be stored in another format,
such as GIF, BMP or PNG.
such as GIF, BMP or PNG.
 Unlike GIF, JPEG does not support transparency or multiple
Unlike GIF, JPEG does not support transparency or multiple
images. It cannot be used for animation.
images. It cannot be used for animation.
 When to use JPEG?
When to use JPEG?
– Ideal for photographic, paintings
Ideal for photographic, paintings
– Leave flat graphics to GIF
Leave flat graphics to GIF

37
37
GIF versus JPEG
GIF versus JPEG
GIF
GIF JPEG
JPEG
Best application
Best application Line Art, Image with
Line Art, Image with
few color text
few color text
Photographs, Image
Photographs, Image
with many colors
with many colors
How to reduce
How to reduce
display time?
display time?
Interlace
Interlace Interlace (Progressive)
Interlace (Progressive)
Display speed
Display speed Fast
Fast Slower, more
Slower, more
computation
computation
Benefits
Benefits Transparency,
Transparency,
Animation
Animation
Greatest compress for
Greatest compress for
photographs, more
photographs, more
color
color
Max. color
Max. color 256
256 16.7 million
16.7 million

38
38
PNG Format
PNG Format
 Portable Network Graphic (PNG)
Portable Network Graphic (PNG)
which is pronounced as
which is pronounced as “
“Ping
Ping”
”.
.
 Alternative to GIF, a lossless
Alternative to GIF, a lossless
compression scheme is used.
compression scheme is used.
 Support three image type: true color,
Support three image type: true color,
grayscale, palette-based (8-bit).
grayscale, palette-based (8-bit).
– JPEG supports the first 2.
JPEG supports the first 2.
– GIF supports the 3
GIF supports the 3rd
rd
one.
one.

39
39
PNG Format
PNG Format
 Advantages
Advantages
– Better Compression
Better Compression
 Deflate is an improved version of the Lempel-Ziv
Deflate is an improved version of the Lempel-Ziv
compression algorithm.
compression algorithm.
– Improve Interlacing
Improve Interlacing
 Display image quicker than Interlaced GIF.
Display image quicker than Interlaced GIF.
– True Color and Transparency
True Color and Transparency
 Support 16-bit (Grey scale) or 48-bit (True Color)
Support 16-bit (Grey scale) or 48-bit (True Color)
 16-bit for alpha channel (Transparency).
16-bit for alpha channel (Transparency).
 Disadvantages
Disadvantages
– Not support by old browsers (Netscape 2,3,4 and IE
Not support by old browsers (Netscape 2,3,4 and IE
2,3,4)
2,3,4)

40
40
Format Comparison
Format Comparison
Format
Format Compression Ratio
Compression Ratio
GIF
GIF 4:1
4:1 –
– 10:1
10:1
JPEG (HQ)
JPEG (HQ) 10:1
10:1 –
– 20:1 (no loss image)
20:1 (no loss image)
JPEG (LQ)
JPEG (LQ) 60:1
60:1 –
– 100:1 (previews)
100:1 (previews)
PNG
PNG 10-30% smaller than GIF
10-30% smaller than GIF

 Pros & cons of each file format
Pros & cons of each file format
 ..imagefileformats.pdf
..imagefileformats.pdf
41
41

Imagefileformats for software engineers.ppt

More Related Content

Similar to Imagefileformats for software engineers.ppt (20)

Recently uploaded (20)

Imagefileformats for software engineers.ppt