Image Types and file formats

Obtain the basic knowledge about image types and file formats are
required to work on Graphic industry. From this topic you will learn
what the file formats most commonly used in Graphic industry and
what techniques to differentiate each file types. Also you will learn
Image optimization techniques. This will help you to identify image
types and formats
• Recognize Image File formats
• Explain the image bit depth
• File Formats commonly used in Graphic industry
• Vector images and Raster Images (bitmaps)
• How images file formats and types are used(web and printing)
• What is the Image optimization
• Optimization Techniques:
 Web Image File Formats
(JPEG, GIF, PNG)
File Format JPEG GIF PNG

Bit Depth (bit-per-pixel) 24 bpp 1~8 bpp 8~48 bpp

256~281
Number of colors 16 million 2~256
trillion
None or LZW None or GZIP
Compression Method DCT (Lossy)
(Loss-less) (Loss-less)
Typical compression
1/10~1/100 ~1/2 ~1/2
ratio
Transparency Yes Yes
No
(Alpha Channel) (1 bit) (~16 bit)

Animation No Yes No
 Image Bit Depth
Image Bit Depth (also Color Depth)
This translates to:
• Refers to the total number of colors in an image
• Amount of digital storage space used to record CONTROL!!
information about the color of a pixel → Quality improves

1 bit= 2 colors (= 21) - black → Larger file size

or white

4 bit = 16 colors (= 24)

8bit = 256 colors (= 28)
16bit = 65,536 (= 216
24bit = 16,777,216 (= 224 True Color
Image Bit Depth
Image Bit
Bits per Depth
Pixel: 1 (BPP Bits per Pixel: 4 Bits per Pixel: 8
Maximum Colors: 2 ) Maximum Colors: 16 Maximum Colors: 256

Bits per Pixel: 16 Bits per Pixel: 24

Maximum Colors: 65,536 Maximum Colors: 16,777,216
(high color) (true color)
File Formats
• wide variety of File Formats
• Not all file formats are suitable for all purposes

Universally Proprietary
supported files
• Bitmap or vector formats used by
Universally supported specific graphics programs
by graphics industry (ORIGINAL DEFAULT FORMATS)
( ie. JPG, .GIF, TIFF ) ex. Photoshop,AutoCAD,MacPaint
 File Formats …
File Format File Extension Type of File

Tagged Image File Formats .TIF, .TIFF Bitmapped

Encapsulated Postscript .EPS, .EPSF Vector
Windows Bitmap .BMP Bitmapped
Graphics Interchange Format .GIF Bitmapped
Photo CD .PCD Bitmapped
PC Paint .PIC Bitmapped
Joint Photographic Experts Group .JPG, .JPEG, .JPE Bitmapped
PhotoShop .PSD Bitmapped
CorelDraw .CDR Vector
AutoCAD .DWG Vector
Windows Metafile .WMF Bitmapped, Vector
Graphic conversion software can change the file format so that you can import and
export graphic images from one application to another
Ex. PhotoShop, Paintshop Pro
 When to use JPEG?
• Large, full-color (or gray scale) picture or illustration
• File size is small (If GIF or PNG is used, then file size will be very
large)

JPG file size: 38 KB GIF file size: 43KB

JPG file size: 29 KB GIF file size: 41 KB

•Large tiled background of full-color picture or illustration
•Note: You can also use GIF or PNG, but if the image is full-color and is very
large, then it is usually better to use JPEG
 When to use GIF?
Small images or symbols such as buttons, icons or bullets

Usually GIF is the smallest in file size

Illustration or symbol that has limited colors or shades

If the number of colors are very small (~16), and also if there are many large
continuous color area, then GIF file size will be very small

Any image for animation must use GIF file format and, no
other standard Web image file format cannot be used.
• Tiled backgrounds (rather small or not full-color)

You can also use JPEG for background if the image is full-color picture

Any image that requires transparency (non-

rectangular image)

Background Image with transparency

 When to use PNG?
(Portable Network Graphics)

• PNG can generally be used instead of GIF, except animation. But

usually it is safer to use GIF because older version of Web
browser cannot display PNG image.
• There are not so many cases that only PNG can be used.
• Special case that PNG must be used;
• Full-color image with transparency
• Any image with gray-scale transparency
 PNG
(Portable Network Graphics)…

• Designed to be the alternative of GIF

• No patent problem by free loss-less compression algorithm (gnu zip)
• Many advanced features
• Up to 48bpp color depth, 16 bit Alpha channel
• 2 dimensional interlace (Progressive image)
• File corruption checking
• Slowly getting popularity
• Limited support in Web browsers

Macromedia Fireworks
Types of Graphics

Bitmap and Vector

 Bitmap images and vector graph

• Computer graphics fall into two main categories

• bitmap
• vector
• Photoshop file can contain both bitmap and vector data.
• Understanding the difference between the two categories helps as you
create, edit, and import artwork.
 Bitmap Images RGB = A pixel
(FF,B6,98)

• Pixel Based
• Best for real world images
(Photography)
• Resolution Dependant
• Large Data Size
 What is an Image ?

• Represented by a grid
(array, matrix) of squares
called pixels (Picture
elements)

• Arranged in column and

rows
Pixels
• Each pixel is given a
numerical value that
represents the corresponding
colour

MAGNIFIED
References:-
http://www.klood.com/using-digital-images-different-file-
formats-explained/
Bitmap ….
Bitmap Graphics
If you start with a small image (100 x 100 px)
(As the image is made larger by resizing not zooming)
•Squares become larger , edges more jagged
•Quality decreases
•File size increase

Advantages of a small image: From larger

• Shorter time needed to display it on the screen to smaller
• because file size is smaller
No distortion
Disadvantage:
• Distortion that occurs when the image is enlarged.
 Vector Images

• Lines, Curves, Circles (Reflecting a Mathematical relation)

• Best for illustration( AutoCAD, 3D graphics)
• Resolution Independent
• Less Memory
• Eg:
• SVG-(Scalable Vector Graphics)
• WMF (Windows Meta File)
• EMF (Enhanced Meta File)
Vector Graphics …

Vector Graphics
It doesn’t matter what size the image is

As the image is resized larger/smaller

•Edges stil clean, crisp
 Vector image file format
• Industry Standard
• EPS - Adobe → Artistic drawing
• AI - Adobe → Artistic drawing
• DXF - Autodesk → 2D/3D CAD
• Platform Standard
• WMF, EMF - Windows
• International Standard
• CGM (Computer Graphics Metafile) - ANSI/ISO
• SVG - (W3C recommendation)
 Filled polygon

Vector image
• Vector Based
• Group of mathematical shape data
• Best for Illustration /
Technical Drawing
• Fully editable, structured data
• Small data size
• ~1/100 of comparable bitmap image
• Suitable for slow network (Internet)
• Resolution Independent
• Suitable for resizing/zooming/printing
• Can be applied to 3D modeling
 Basic elemen◼tsCoufrvveectorimage
• Line Polygon

Open Path Closed Path Open Path Closed Path

• Fill - for closed path only

Simple Gradient Pattern

 EPS (Encapsulated Post Script)

• PostScript based
• PostScript = Bézier-curve based page definition language
developed by Adobe
• For printing complex page layout
• Highly expressive
• Color separation, Layers, etc.
• For Professional Artist
• Used in publishing / illustration industry
• Not used in mechanical drawing DXF (Drawing Exchange Format )
 AI (Adobe Illustrator)

• Proprietary format for Adobe Illustrator

• Based primarily on PostScript
• Adds all special functionality of Illustrator
• Somewhat industry standard
• More capability than EPS
• Many applications support this format
• Inconsistency in versions
• Each new version of Adobe Illustrator has newer version of file
format → Incompatible
 WMF & EMF
• WMF (Windows Meta File)
• Straight line-based (No curve!)
• Designed for Microsoft Windows 3.1
• Limited feature, but widely used in office market
• EMF (Enhanced Meta File)
• Bézier curve-based
• Designed for Microsoft Windows 95
• Used for exchange of vector data internally between
Windows applications
 Popular Color Formats
• Bitmap image file formats
• Industry standard
• TIFF - Adobe/Silicon Graphics
• Platform Standard
• BMP - Windows
• PICT - Macintosh
• GIF - CompuServe
• International Standard
• JPEG - ISO 10918
• PNG - MIT/W3C
• JPEG2000 - ISO 15444
 TIFF (Tagged Image File Format)
• Highly flexible
• Ability to handle various kinds of specialized image
formats by using internal Tag
• over-24bit images (32, 36, up to 64-bits)
• Alpha-channel (Transparency) can be stored
• Multiple Layers
• LZW, JPEG or other compression
• For Professional
• Used in professional imaging industry
• Medical, Publishing, Digital photographers
GIF (Graphics Interchange Format)
• Designed for amateur use on network
• Many useful features for hobbyist
• Transparency (1 bit only)
• Interlace (for fast perception over net)
• Animation (Cell Animation)
• Suitable for small pictures / icons
• Flexible choice of bit-per-pixel (1~8)
• Indexed color only (no full color support)
• LZW compression (*patented)
• Widely used in WWW
• Mostly for small animations or icons

Many
 JPEG (Joint Photographic Experts Group)
• High compression for full-color image
• Based on characteristics of human eyes
• Less sensitive to color than lightness (YUV)
• Good for photography or artistic image
• NG for scientific image (uneven information loss)
• The only international standard (up to now)
• Block noise
1:10 1:100

• Widely useSqduianreconnosisueminer market, WWW

high compression

Many
 JPEG2000

• New international standard (2001)

• ~20% better compression than JPEG
• Less noise in high compression ratio
• Many advanced features
• True progressive transfer
• Option for Loss-less compression
• Support for video Codec (Motion JPEG2000)
• Error resistance (good for the Internet)
• ROI (Region of interest-image analysis image analysis) support