SlideShare a Scribd company logo
2
Most read
4
Most read
6
Most read
Fatih Özlü
Image File Formats
Content
 Introduction to Image File Formats
 Image FileTypes (Bitmap/Vector)
 KeyTerms for Images
 Pixels
 Pixel Depth
 Compression Methods: Lossy-Lossless
 Common Image File formats
 JPEG
 PNG
 GIF
 BMP
 Conclusion
Why so many Image File Formats?
… - BMP – PBM – TGA – TIFF – GIF – JPEG –
PSD – DXF – CGM – PNG – SVG – RAW –
WPG – FITS –PCX– PCD – RAS – TGA – BPS –
EPS – PDF – PCT – WBM – FITS – XBM – VFF
– RIB – PCX – DMP – AVS – IMG – ICO – JFIF
– IFF –WMF - …
Image File Types
 Bitmap(Raster) images:
 collection of dots
 each pixel can hold 1,8,24,… bit of color information
 fixed resolution
 best for photographic quality images, for printing, scanners, digital
cameras
 examples: bmp, gif, png, jpeg, tiff, …
 Vector graphics:
 based on mathematical instructions
 basically defined by shapes and lines
 not resolution dependent: infinitely scalable
 examples: svg, ai, wmf, …
 Metafile graphics:
 combination of bitmap and vector
Pixels
 image elements
 smallest addressable part of the screen
 stored as a binary code representing a color
 between 1 and 32 bits of binary code
 RGB (Red, Green Blue)
 CMYK (Cyan, Magenta,Yellow, Black)
 resolution
 density of dots on image
 measured in DPI (dots per Inch)
Pixel Depth
Images retrieved from http://en.wikipedia.org/
 number of bits to store each pixel
 greater depth, more colors
 greater depth, bigger file size
 monochrome : 1 bit(white and black)
 grayscale, 16, 256 color
 truecolor: 24 bit
1 bit 2 bit 4 bit 8 bit 24 bit
Compression
 large amount of data
 lossy/lossless
 quality
 Some algorithms
 LZW(Lemple-Zif –Welch)Algorithm
 RLEAlgorithm
 ZIP Compression
 JPEG Compression -> lossy
 Deflation – used in PNG, MNG, andTIFF
JPEG (Joint Photographic Experts
Group)
 most applications and browsers, digital cameras
 good compression algorithm : reduce file size in a ratio between
10:1 and 20:1.
 degree of compression is adjustable
 lossy compression
 not support transparent color
 not interlaced:???
 extensions: .jpeg, .jpe, .jpg, .jif, .jfif, .jfi
Higher quality (Q = 100) High quality (Q = 50) Medium quality (Q = 25) Low quality (Q = 10) Lowest quality (Q = 1)
83,261 bytes 15,138 bytes 9,553 bytes 4,787 bytes 1,523 bytes
the uncompressed 24-bit RGB bitmap image below 313 × 234 image (73,242 pixels) would require 219,726 bytes
GIF (Graphics Interchange Format)
 most widely used
 few colors: 8 bit or less
 LZW lossless compression algorithm
 less space, less loading time
 interlaced and non-interlaced
 supports animation: can contain
more than one image
 LZW algorithm patent issue
resulted PNG.
PNG (Portable Network Graphics)
 developed due to legal problems with compression algorithm
 PNG's Not GIF
 new format targeted for Internet use, becoming common
 lossless compression (more than GIF, less than JPEG)
 24-bit RGB, 32-bit RGBA or up to 48 bit color
 transparency (A:Alpha channel)
 no animation support
 better interlacing: Adam7 algorithm
Illustration of the 7 passes of the Adam7 algorithm,
running over a 16×16 image
BMP (Bitmap Image File)
 Microsoft native image format
 Windows,OS/2, no MAC compatibility.
 backgrounds, graphics, wallpaper
 1(monochrome), 4, 8, 24-bit RGB
 generally uncompressed, too large size
 lossless RLE compression
Conclusion
 compression
 larger file, larger storage and slower download
 few color, smaller file, worse quality
 There is really no reason to ever use this format BMP
 GIF and JPG are the formats used for nearly all web images. PNG
is supported by most of the latest generation browsers.
 But Microsoft Internet Explorer does not support PNG
transparency.
 PNG does everything GIF does, and better, so expect to see PNG
replace GIF in the future. PNG will not replace JPG, since JPG is
capable of much greater compression of photographic images,
even when set for quite minimal loss of quality
Thanks
 Questions?

More Related Content

PPT
Image Files Formats
PPTX
Digital image formats
PPTX
Photoshop Guide
PPS
Image file formats
PPT
Raster graphics
PPTX
Image file formats
PPT
Adobe Photoshop
Image Files Formats
Digital image formats
Photoshop Guide
Image file formats
Raster graphics
Image file formats
Adobe Photoshop

What's hot (20)

PPTX
Adobe Photoshop Tools
PPT
Multimedia applications
PPTX
Top 10 photoshop tools that you need to master photoshop
PPTX
TUTORIAL ON PHOTOSHOP
PPT
Chapter 3 : IMAGE
PDF
Bitmap and Vector Images: Make Sure You Know the Differences
PPTX
Multimedia graphics and image data representation
PPTX
Photoshop
PPTX
Video File Format
PPTX
Color Models
PPTX
Basics of Photoshop Tutorial
PPT
Multimedia software tools
PPTX
File types
PDF
Chapter 1 - Multimedia Fundamentals
PPT
Video Editing Basics
PPTX
1. Introduction of Computer Graphics
PPTX
3D Modelling and Animation
PPTX
Introduction to Adobe Illustrator
PPSX
Macromedia flash presentation2
PDF
how video works
Adobe Photoshop Tools
Multimedia applications
Top 10 photoshop tools that you need to master photoshop
TUTORIAL ON PHOTOSHOP
Chapter 3 : IMAGE
Bitmap and Vector Images: Make Sure You Know the Differences
Multimedia graphics and image data representation
Photoshop
Video File Format
Color Models
Basics of Photoshop Tutorial
Multimedia software tools
File types
Chapter 1 - Multimedia Fundamentals
Video Editing Basics
1. Introduction of Computer Graphics
3D Modelling and Animation
Introduction to Adobe Illustrator
Macromedia flash presentation2
how video works
Ad

Viewers also liked (11)

PDF
How to convert video clips to gif
PPTX
"Color model" Slide for Computer Graphics Presentation
PPT
JPEG vs GIF vs PNG
PPTX
The GIF Element: Making, Finding, & Using GIFs to Great Effect
PPTX
Color Models Computer Graphics
PDF
Computer graphics color models
PPTX
The evolution of animated gifs: Podcamp Toronto 2013
PPTX
Color image processing
PPTX
HSI MODEL IN COLOR IMAGE PROCESSING
PPTX
RGB Color Model and Monitor Resolution
PPTX
Color models
How to convert video clips to gif
"Color model" Slide for Computer Graphics Presentation
JPEG vs GIF vs PNG
The GIF Element: Making, Finding, & Using GIFs to Great Effect
Color Models Computer Graphics
Computer graphics color models
The evolution of animated gifs: Podcamp Toronto 2013
Color image processing
HSI MODEL IN COLOR IMAGE PROCESSING
RGB Color Model and Monitor Resolution
Color models
Ad

Similar to Commonly Used Image File Formats (20)

PPTX
PPTX
Different types of graphics formats
PDF
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
PPTX
Image file types in html5
PPTX
Image file types in html5
PPT
Imagefileformats for software engineers.ppt
PDF
Computer Graphics - Graphics File Formats.pdf
PPTX
Project presentation image compression by manish myst, ssgbcoet
PPT
2a Bitmapped Graphics Hardware
PPT
Mm Unit 2 Part 1
PPT
Graphics and imagea
PPT
Webquest
PPT
Paniting programs presentation
PPT
Paniting programs presentation
PDF
Ontology of Heterogeneous Image File Formats.pdf
PDF
Lecture 2-2023.pdf
PDF
Lecture 2-2023.pdf
PPTX
PDF
CHAPTER – 4 Graphics
PPT
Bmsc1103
Different types of graphics formats
Chapter 3 (1).pdf Computer Mantainance and Tecknical support Chapter 3 Latest...
Image file types in html5
Image file types in html5
Imagefileformats for software engineers.ppt
Computer Graphics - Graphics File Formats.pdf
Project presentation image compression by manish myst, ssgbcoet
2a Bitmapped Graphics Hardware
Mm Unit 2 Part 1
Graphics and imagea
Webquest
Paniting programs presentation
Paniting programs presentation
Ontology of Heterogeneous Image File Formats.pdf
Lecture 2-2023.pdf
Lecture 2-2023.pdf
CHAPTER – 4 Graphics
Bmsc1103

More from Fatih Özlü (9)

PDF
Android Implementation using MQTT Protocol
PPT
Design Patterns
PDF
Mobile cloud computing
PPTX
Presentation: Location in ubiquitous computing
PPTX
Marketing and sales in Cloud Computing
PPTX
Measuring e-Governance as an Innovation in the Public Sector
PDF
The computer for the 21st century
PDF
Operating System Windows CE 7.0 and Processor ARM Advantages and Disadvantages
PDF
Porters Value Chain
Android Implementation using MQTT Protocol
Design Patterns
Mobile cloud computing
Presentation: Location in ubiquitous computing
Marketing and sales in Cloud Computing
Measuring e-Governance as an Innovation in the Public Sector
The computer for the 21st century
Operating System Windows CE 7.0 and Processor ARM Advantages and Disadvantages
Porters Value Chain

Recently uploaded (20)

PDF
Slide_BIS 2020 v2.pdf....................................
PDF
waiting, Queuing, best time an event cab be done at a time .pdf
PPTX
SlideEgg_21518-Company Presentation.pptx
PPTX
Military history & Evolution of Armed Forces of the Philippines
PPTX
SAPOTA CULTIVATION.pptxMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
PPTX
Brown and Beige Vintage Scrapbook Idea Board Presentation.pptx.pptx
PDF
DPSR MUN'25 (U).pdf hhhhhhhhhhhhhbbnhhhh
PPTX
Green and Orange Illustration Understanding Climate Change Presentation.pptx
PPTX
EJ Wedding 520 It's official! We went to Xinyi District to do the documents
PPTX
A slideshow about aesthetic value in arts
PPTX
CPRC-SOCIAL-STUDIES-FINAL-COACHING-DAY-1.pptx
PDF
Chapter 3 about The site of the first mass
PDF
Close Enough S3 E7 "Bridgette the Brain"
PPTX
573393963-choose-your-own-adventure(2).pptx
PPTX
Green and Blue Illustrative Earth Day Presentation.pptx
PPTX
Socio ch 1 characteristics characteristics
PPTX
400kV_Switchyard_Training_with_Diagrams.pptx
PPTX
CPAR_QR1_WEEK1_INTRODUCTION TO CPAR.pptx
PPTX
Certificados y Diplomas para Educación de Colores Candy by Slidesgo.pptx
PPTX
Visual-Arts.pptx power point elements of art the line, shape, form
Slide_BIS 2020 v2.pdf....................................
waiting, Queuing, best time an event cab be done at a time .pdf
SlideEgg_21518-Company Presentation.pptx
Military history & Evolution of Armed Forces of the Philippines
SAPOTA CULTIVATION.pptxMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
Brown and Beige Vintage Scrapbook Idea Board Presentation.pptx.pptx
DPSR MUN'25 (U).pdf hhhhhhhhhhhhhbbnhhhh
Green and Orange Illustration Understanding Climate Change Presentation.pptx
EJ Wedding 520 It's official! We went to Xinyi District to do the documents
A slideshow about aesthetic value in arts
CPRC-SOCIAL-STUDIES-FINAL-COACHING-DAY-1.pptx
Chapter 3 about The site of the first mass
Close Enough S3 E7 "Bridgette the Brain"
573393963-choose-your-own-adventure(2).pptx
Green and Blue Illustrative Earth Day Presentation.pptx
Socio ch 1 characteristics characteristics
400kV_Switchyard_Training_with_Diagrams.pptx
CPAR_QR1_WEEK1_INTRODUCTION TO CPAR.pptx
Certificados y Diplomas para Educación de Colores Candy by Slidesgo.pptx
Visual-Arts.pptx power point elements of art the line, shape, form

Commonly Used Image File Formats

  • 2. Content  Introduction to Image File Formats  Image FileTypes (Bitmap/Vector)  KeyTerms for Images  Pixels  Pixel Depth  Compression Methods: Lossy-Lossless  Common Image File formats  JPEG  PNG  GIF  BMP  Conclusion
  • 3. Why so many Image File Formats? … - BMP – PBM – TGA – TIFF – GIF – JPEG – PSD – DXF – CGM – PNG – SVG – RAW – WPG – FITS –PCX– PCD – RAS – TGA – BPS – EPS – PDF – PCT – WBM – FITS – XBM – VFF – RIB – PCX – DMP – AVS – IMG – ICO – JFIF – IFF –WMF - …
  • 4. Image File Types  Bitmap(Raster) images:  collection of dots  each pixel can hold 1,8,24,… bit of color information  fixed resolution  best for photographic quality images, for printing, scanners, digital cameras  examples: bmp, gif, png, jpeg, tiff, …  Vector graphics:  based on mathematical instructions  basically defined by shapes and lines  not resolution dependent: infinitely scalable  examples: svg, ai, wmf, …  Metafile graphics:  combination of bitmap and vector
  • 5. Pixels  image elements  smallest addressable part of the screen  stored as a binary code representing a color  between 1 and 32 bits of binary code  RGB (Red, Green Blue)  CMYK (Cyan, Magenta,Yellow, Black)  resolution  density of dots on image  measured in DPI (dots per Inch)
  • 6. Pixel Depth Images retrieved from http://en.wikipedia.org/  number of bits to store each pixel  greater depth, more colors  greater depth, bigger file size  monochrome : 1 bit(white and black)  grayscale, 16, 256 color  truecolor: 24 bit 1 bit 2 bit 4 bit 8 bit 24 bit
  • 7. Compression  large amount of data  lossy/lossless  quality  Some algorithms  LZW(Lemple-Zif –Welch)Algorithm  RLEAlgorithm  ZIP Compression  JPEG Compression -> lossy  Deflation – used in PNG, MNG, andTIFF
  • 8. JPEG (Joint Photographic Experts Group)  most applications and browsers, digital cameras  good compression algorithm : reduce file size in a ratio between 10:1 and 20:1.  degree of compression is adjustable  lossy compression  not support transparent color  not interlaced:???  extensions: .jpeg, .jpe, .jpg, .jif, .jfif, .jfi Higher quality (Q = 100) High quality (Q = 50) Medium quality (Q = 25) Low quality (Q = 10) Lowest quality (Q = 1) 83,261 bytes 15,138 bytes 9,553 bytes 4,787 bytes 1,523 bytes the uncompressed 24-bit RGB bitmap image below 313 × 234 image (73,242 pixels) would require 219,726 bytes
  • 9. GIF (Graphics Interchange Format)  most widely used  few colors: 8 bit or less  LZW lossless compression algorithm  less space, less loading time  interlaced and non-interlaced  supports animation: can contain more than one image  LZW algorithm patent issue resulted PNG.
  • 10. PNG (Portable Network Graphics)  developed due to legal problems with compression algorithm  PNG's Not GIF  new format targeted for Internet use, becoming common  lossless compression (more than GIF, less than JPEG)  24-bit RGB, 32-bit RGBA or up to 48 bit color  transparency (A:Alpha channel)  no animation support  better interlacing: Adam7 algorithm Illustration of the 7 passes of the Adam7 algorithm, running over a 16×16 image
  • 11. BMP (Bitmap Image File)  Microsoft native image format  Windows,OS/2, no MAC compatibility.  backgrounds, graphics, wallpaper  1(monochrome), 4, 8, 24-bit RGB  generally uncompressed, too large size  lossless RLE compression
  • 12. Conclusion  compression  larger file, larger storage and slower download  few color, smaller file, worse quality  There is really no reason to ever use this format BMP  GIF and JPG are the formats used for nearly all web images. PNG is supported by most of the latest generation browsers.  But Microsoft Internet Explorer does not support PNG transparency.  PNG does everything GIF does, and better, so expect to see PNG replace GIF in the future. PNG will not replace JPG, since JPG is capable of much greater compression of photographic images, even when set for quite minimal loss of quality