ITEC2110, Digital Media Chapter 2 Fundamentals of Digital Imaging 1 GGC -- ITEC2110 -- Digital Media.

Slides:



Advertisements
Similar presentations
L.Ghadah R. Hadba CT1514-L1.  Computer Graphics :refers to processing of creating a new image from Geometry, Lighting parameters, Materials and Textures.Using.
Advertisements

Chapter 2 Fundamentals of Digital Imaging
Droddy.  “Pixel” is short for two words: Picture and Element. Pixels (tiny squares) combine to form the image the human eye perceives Too small for the.
ETT 429 Spring 2007 Digital Photography/Scanners.
Graphics in the web Digital Media: Communication and Design
Image Compression CSC CSC Computing with Images2 How do we use fewer bytes to encode the same or similar information? Reduce redundancy Take.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
File Formats By Jack Turner. Raster (Bitmap) Raster or bitmap is a dot matrix data structure, containing columns of dots and rows, of a graphics image.
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,
Dr Jimmy Lam CAD for Fashion and Textiles
Graphics Ms. Brewer Spring Bellwork Edmodo – log on! Quiz? Take it if you need to! Policies and Procedures Powerpoint in Shared Folder! Get to Know.
Prepared by George Holt Digital Photography BITMAP GRAPHIC ESSENTIALS.
GRAPHICS/IMAGES INFSCI Source: Learning Web Design by Jennifer Niederst RobbinsJennifer Niederst Robbins Creating Images:  Scanning  Be aware.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Multimedia Specification Design and Production 2012 / Semester 1 / L4 Lecturer: Dr. Nikos Gazepidis
File Formats About graphic file formats And image compression.
Image Storage Bitmapped Graphics – in which an image is represented as a collection of dots Vector Graphics – in which an image is represented as a set.
All About File Formats Mr. Butler John Jay High School Department of Technology.
Data Compression. Compression? Compression refers to the ways in which the amount of data needed to store an image or other file can be reduced. This.
Digital Image Formats: An Explanation Guilford County SciVis V
Image formats. Basic terminologies… Pixels: Pixels are the building blocks of every digital image. a pixel is a single point in a graphic image. Resolutions:
Digital Media Dr. Jim Rowan ITEC 2110 Bitmapped Images.
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
2D Graphics Theory & Principles. Single Point Smallest addressable area on screen or digital image.
Things to Remember When working with digital images.
Raster Graphics 2.01 Investigate graphic image design.
Image File Formats. What is an Image File Format? Image file formats are standard way of organizing and storing of image files. Image files are composed.
Graphics Concepts Presentation
Introduction to Images & Graphics JMA260. Objectives Images introduction Photoshop.
Digital Graphics for Computer Games Pixels Types of Digital Graphics (Raster and Vector) Compression.
Image File Formats By Dr. Rajeev Srivastava 1. Image File Formats Header and Image data. A typical image file format contains two fields namely Dr. Rajeev.
Image File Formats Harrow Computer Club – Wed, 1 Dec 2010 Bob Watson MA CMath MIMA MBCS.
Digital Image Formats: An Explanation Guilford County SciVis V
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
ITEC2110, Digital Media Chapter 3 Digital Image Processing 1 GGC -- ITEC Digital Media.
ITEC2110, Digital Media Chapter 2 Fundamentals of Digital Imaging 1 GGC -- ITEC Digital Media.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
2.01 Understand Digital Raster Graphics
File Formats Different applications (programs) store data in different formats. Applications support some file formats and not others. Open…, Save…, Save.
Common Bitmap Image File Types
2.01 Understand Digital Raster Graphics
Chapter 3 Image Files © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Computer Science Higher
2.01 Understand Digital Raster Graphics
Introduction to raster graphics
Image Formats.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
2.01 Investigate graphic image design.
Raster Images CPSC 1030.
Chapter 3 Image Files © 2017 Cengage Learning®. May not be scanned, copied or duplicated, or posted to a publicly accessible website, in whole or in part.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
A computer display is made up of small squares, called pixels.
Dr. Jim Rowan ITEC 2110 Bitmapped Images
Digital Images.
Image File Size and File Compression
Chapter 3:- Graphics Eyad Alshareef Eyad Alshareef.
Digital Images.
Digital Image Formats: An Explanation
Graphics Basic Concepts.
Web Design and Development
2.01 Understand Digital Raster Graphics
2.01 Investigate graphic image design.
Nuts and Bolts of Digital Imaging
2.01 Understand Digital Raster Graphics
Basic Concepts of Digital Imaging
2.01 Investigate graphic image design.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
2.01 Investigate graphic image design.
Presentation transcript:

ITEC2110, Digital Media Chapter 2 Fundamentals of Digital Imaging 1 GGC -- ITEC Digital Media

 Digitizing Images  Bitmapped Images vs. Vector Graphics  File Size and File Compression  Color Representation Content 2

 How do pixel dimensions affect the image file size?  How does the bit-depth affect the image file size?  Why should JPEG files NOT be used as working files for further editing? In this lecture, you will find answers to these questions 3

 higher resolution or higher bit depth  larger file size  Without compression, image files would take up an unreasonable amount of disk space.  Larger files take longer time to transfer over the network. Why Compression? 4

How many bits? Let’s look at the size of a typical high resolution image file without compression. 5

 Suppose 6-megapixel digital camera may produce digital images of 3000  2000 pixels in 24-bit color depth.  Total pixels: 3000  2000 pixels = 6,000,000 pixels  File size in bits: 6,000,000 pixels  24 bits/pixel = 144,000,000 bits  File size in bytes: 144,000,000 bits / (8 bits/byte) = 18,000,000 bytes  17 MB How many bits? 6

 Reducing the pixel dimensions  Lowering the bit depth (color depth)  Compress the file Strategies To Reduce File Sizes 7

 Capture the image at a lower resolution in the first place  Resample (resize) the existing image to a lower pixel dimensions Reducing Pixel Dimensions 8

 Returning to our calculation of the file size of an image of 3000  2000 pixels in 24-bit color depth.  Let's calculate the file size of an image of 1500  1000 pixels in 24-bit color depth. Reducing Pixel Dimensions 9

 Total pixels: 1500  1000 pixels = 1,500,000 pixels  File size in bits: 1,500,000 pixels  24 bits/pixel = 36,000,000 bits  File size in bytes: 36,000,000 bits / (8 bits/byte) = 4,500,000 bytes  4.3 MB  It's 1/4 th of the file size. How many bits if half the size in each pixel dimension? 10

 Returning to our calculation of the file size of an image of 3000  2000 pixels in 24-bit color depth.  Let's calculate the file size of an image if we reduce the bit depth to 8-bit. Lowering the Bit Depth 11

 Total pixels: 3000  2000 pixels = 6,000,000 pixels  File size in bits: 6,000,000 pixels  8 bits/pixel = 48,000,000 bits  File size in bytes: 48,000,000 bits / (8 bits/byte) = 6,000,000 bytes  5.7 MB  It's 1/3 rd of the file size. How many bits if reduced to 8-bit? 12

 24-bit: 2 24 (about 16 million) colors  8-bit: 2 8 (about 256) colors 24-bit vs. 8-bit 13

 24-bit  8-bit:  You lose about 16 million colors!  May cause image quality degradation.  But 8-bit will work well if your image does not need more than 256 colors. Weighing Bit Depth Against File Size 14

 Grayscale images: e.g.  scanned images of black-and-white photos  hand-written notes (may be even lowered to 4-bit, 2-bit, or 1-bit)  Illustration graphics: e.g. poster or logo  contains only a few colors as large areas of solid colors 24-bit  8-bit Without Noticeable Image Quality Degradation 15

 File compression: To reduce the size of a file by squeezing the same information into fewer bits.  Lossless compression method:  e.g., TIFF, PNG, PSD  No information is lost  GIF files also use lossless compression but it limits the number of colors to 256  Lossy compression method:  e.g., JPEG  Some information is lost in the process.  For digital media files, the information to be left out is chosen such that it is not the human sensory system most sensitive to. File Compression Methods 16

JPEG files: – JPEG compression, which is lossy (i.e., the lost information cannot be recovered) – Do not use JPEG files as working files for further editing – Repeated saving a JPEG file will degrade the image quality further – Save as JPEG only in the very last step of your editing process. For example, when you have finished editing the image and are ready to post it on the Web. – Avoid using JPEG for images intended for high quality prints Working with Lossy Compression 17

18 An original TIFF image

19 A JPEG with a very low quality setting. Note the ugly artifacts around the contrast edges.

20 Closeup view of the JPEG with a very low quality setting. Note the blockiness and ugly artifacts around the contrast edges.

Consider this image: With no compression... RGB encoding => 64 x 3 = 192 bytes Data Compression 64 pixels How big would it be if indexed color table is used?

Consider this image: 64 pixels Data Compression with just two colors: bytes 112 bits ==> or

Consider this image: 64 pixels RLE compression... 9RGB6RGB2RGB6RGB2RGB 6RGB2RGB6RGB2RGB6RGB 2RGB6RGB9RGB 9(0,0,255)6(255,0,0)2(0,0,255)6(255,0,0)2(0,0,255)6( 255,0,0)2(0,0,255)6(255,0,0)2(0,0,255)6(255,0,0)2(0,0,255)6(255,0,0)9(0,0,255) = 52 bytes Data Compression Run Length Encoding

Run Length Encoding  This advantage would be dependent on the CONTENT of the image.  Why?  Could RLE result in a larger image?  How?

Consider this image: 64 pixels RLE compression... 1RGB1RGB1RGB1RGB1RGB... 1RGB1RGB1RGB -> 256 bytes Run Length Encoding: Always better than RGB?

Run Length Encoding  RLE is Lossless  What is lossless? compressed original compression routine Original decompress routine Original Exact duplicate

 PSD  PNG  TIFF  camera RAW File Types During Editing or Capturing 27

File TypeFile SuffixStandard Color Modes UseCompressio n JPEG (Joint Photographic Experts Group).jpg.jpeg RGB CMYK Best for continuous tone images such as photographs can be used for Web images Lossy compression method called JPEG compression that works well with photographs Common File Types of Pixel-based Images 28

File TypeFile SuffixStandard Color Modes UseCompressio n GIF (Graphics Interchange Format).gifIndexed color, grayscale Supports up to 8- bit color Best for illustration graphics or cartoon-like pictures with large blocks of solid color and clear divisions between color areas a proprietary format of CompuServe can be used for Web images Lossless compression method called LZW compression Common File Types of Pixel-based Images 29

File TypeFile SuffixStandard Color Modes UseCompressio n PNG (Portable Network Graphics).pngindexed, grayscale, black and white Supports 8-bit and 24-bit color Can be used for Web images Lossless compression Common File Types of Pixel-based Images 30

File TypeFile SuffixStandard Color Modes UseCompressio n TIFF (Tag Image File Format).tif.tiff RGB, CMYK, CIE-Lab, indexed, grayscale, black and white Proprietary format of Adobe Photoshop good for any types of digital images that Photoshop supports stores layers supports alpha channel Lossless compression Common File Types of Pixel-based Images 31

File TypeFile SuffixStandard Color Modes UseCompressio n PSD (Photoshop Digital Image).psdRGB, CMYK, CIE-Lab, indexed, grayscale, black and white Supported on both Windows and Mac common file format supports alpha channel Allows uncompresse d, LZW compression (lossless), ZIP (lossless), JPEG (lossy) Common File Types of Pixel-based Images 32

File TypeFile SuffixInformation and Use Encapsulated PostScript.eps Standard file format for storing and exchanging files in professional printing Adobe Illustrator file.ai Adobe Flash file.fla.swf Windows Metafile format.wmf Many cliparts from Microsoft Office are in this format Enhanced Metafile format.emf Developed by Microsoft as a successor to.wmf Common File Types of Vector Graphics 33

Review Questions 34

Generally speaking, how does the file size change if the total number of pixels of an image is doubled? Review Question 35

Generally speaking, how does the file size change if the number of pixels of both the width and height of an image is doubled? Review Question 36

Generally speaking, how does the file size change if the bit depth of an image is increased from 8-bit to 16-bit? Review Question 37

Generally speaking, how does the file size change if the bit depth of an image is increased from 8-bit to 24-bit? Review Question 38

Give one example of the image file type that supports lossy compression and one that supports lossless compression. Review Question 39

Which file extensions indicate pixel-based files? A.BMP B.DOC C.JPEG D.TXT E.PNG F.GIF G.JPG H.PSD I.TIFF J.EPS K.WMF Review Question 40

Which file extensions indicate vector graphic files? A.BMP B.DOC C.JPEG D.TXT E.PNG F.GIF G.JPG H.PSD I.TIFF J.EPS K.WMF Review Question 41