Computer Science 101 Picture Files

Computer Representation of Pictures Common representation is as a bitmap. Common representation is as a bitmap. Two dimensional array of dots called pixels (picture element).Two dimensional array of dots called pixels (picture element). The array consists of rows and columns of pixels.The array consists of rows and columns of pixels. With the RGB system, each pixel has associated a 3-byte RGB value.With the RGB system, each pixel has associated a 3-byte RGB value.

Picture from W&L Home Page (stored as bmp file)

At 800%

At 2400%

How does the software know? We know that all of the information stored in a computer file is stored as bits, broken into 8-bit bytes. We know that all of the information stored in a computer file is stored as bits, broken into 8-bit bytes. How does the software know whether this binary data is to be interpreted as text, picture, music, program instructions, etc. How does the software know whether this binary data is to be interpreted as text, picture, music, program instructions, etc.

File extensions As you know, files are usually stored as As you know, files are usually stored as Name of fileName of file A dot (or period)A dot (or period) An extension that indicates the general category of the file.An extension that indicates the general category of the file.

Some common extensions.txtPlain text.docMicrosoft word document.docxMicrosoft Word Open XML Document.pdfPortable Document Format File.msgOutlook mail message.pptPowerpoint presentation.xlsExcel spreadsheet.bmpBitmap image file.jpgJPEG image file.mp3Mp3 audio file.wavWave audio file.txtPlain text.docMicrosoft word document.docxMicrosoft Word Open XML Document.pdfPortable Document Format File.msgOutlook mail message.pptPowerpoint presentation.xlsExcel spreadsheet.bmpBitmap image file.jpgJPEG image file.mp3Mp3 audio file.wavWave audio file

Some common extensions (cont.).logLog file.movApple QuickTime movie.mpgMPEG video file.exeExecutable file.htmlHypertext Markup Language file.zipZipped file.javaJava source file.pyPython source file.logLog file.movApple QuickTime movie.mpgMPEG video file.exeExecutable file.htmlHypertext Markup Language file.zipZipped file.javaJava source file.pyPython source file

Extension is not enough Often the software needs more information than is conveyed by the extension. Often the software needs more information than is conveyed by the extension. A.bmp file stores the RGB values for each pixel, thus 24 bits in 3 bytes for each pixel. A.bmp file stores the RGB values for each pixel, thus 24 bits in 3 bytes for each pixel. Suppose there is RGB information for 100 pixels. Is the picture a 10 by 10, 25 by 4, 5 by 20 or what? Many other such questions. Suppose there is RGB information for 100 pixels. Is the picture a 10 by 10, 25 by 4, 5 by 20 or what? Many other such questions.

File headers Many file formats specify how some needed information is to be stored in the beginning of the file. Many file formats specify how some needed information is to be stored in the beginning of the file. The extension tells the type of format being used; the file header encodes additional information needed by the software accessing the file. The extension tells the type of format being used; the file header encodes additional information needed by the software accessing the file. File has File has Header informationHeader information File dataFile data

BMP File Header For more on this topic see For more on this topic see format.htmlhttp:// format.htmlhttp:// format.htmlhttp:// format.html #BMP_File_Headerhttp://en.wikipedia.org/wiki/BMP_file_format #BMP_File_Headerhttp://en.wikipedia.org/wiki/BMP_file_format #BMP_File_Headerhttp://en.wikipedia.org/wiki/BMP_file_format #BMP_File_Header

BMP Header (from Fastgraph)

BMP Header (cont.) Offset: Offset: How many bytes into the file the specified information is located. Here we have 0; so this information is at the very beginning of the file.How many bytes into the file the specified information is located. Here we have 0; so this information is at the very beginning of the file. In this table the offset is given in decimal; we’ll need to use hexadecimal. Get ready to convert.In this table the offset is given in decimal; we’ll need to use hexadecimal. Get ready to convert. Size: How many bytes are used for the information. Size: How many bytes are used for the information.

BMP Header (cont.) Signature: Signature: Identifies the kind of file dataIdentifies the kind of file data Often 2 byte information has the information in “right to left” order.Often 2 byte information has the information in “right to left” order. Here the 42 in hex is 66 in decimal. The 4D is 77 in decimal.Here the 42 in hex is 66 in decimal. The 4D is 77 in decimal. 66 is ASCII for B, and 77 is ASCII for M.66 is ASCII for B, and 77 is ASCII for M. BM is confirming that the data is bitmap data.BM is confirming that the data is bitmap data.

BMP Header (cont.) Start of image data: Start of image data: Where the RGB values are found.Where the RGB values are found. Let’s remember that the offset 10 is A in hex.Let’s remember that the offset 10 is A in hex. Also remember that this information is 4 bytes long.Also remember that this information is 4 bytes long.

BMP Header (cont.) Width: Width: At offset 18 decimal or 12 hex.At offset 18 decimal or 12 hex. 4 bytes.4 bytes. Height Height At offset 22 decimal or 16 hex.At offset 22 decimal or 16 hex. 4 bytes.4 bytes.

BMP Header Summary Some of the header info (offsets in hex): Some of the header info (offsets in hex): Signature at offset 0 – 2 bytesSignature at offset 0 – 2 bytes File size at offset 2 – 4 bytesFile size at offset 2 – 4 bytes Offset for start of image data at offset A – 4 bytesOffset for start of image data at offset A – 4 bytes Width in pixels at offset bytesWidth in pixels at offset bytes Height in pixels at offset 16 – 4 bytesHeight in pixels at offset 16 – 4 bytes

96 pixels So each square is 24 by 24

Colored Squares with Hex Editor We see the 42 4D at offset 0 We see the 42 4D at offset 0

File Size (offset 2) We see 366C for size. We see 366C for size. Actually bytes are right to left so 6C36. Converting this to decimal gives bytes.Actually bytes are right to left so 6C36. Converting this to decimal gives bytes. We have 96 by 96 or 9216 pixelsWe have 96 by 96 or 9216 pixels 3 bytes per pixel for RGB; so data bytes3 bytes per pixel for RGB; so data bytes Plus the 54 bytes in the header giving 27702Plus the 54 bytes in the header giving 27702

Width and Height (offset 12 and 16) We see 60 for both the width and height. In decimal this would be 96. We see 60 for both the width and height. In decimal this would be 96.

Bitmap Data Location (offset A) We see 36 at location A. This means that the bitmap data begins in location 36. We see 36 at location A. This means that the bitmap data begins in location 36.

Bitmap Data (offset 36) At location 36, we see values FF 00 FF. At location 36, we see values FF 00 FF. But the upper left square has red pixels.But the upper left square has red pixels. The BMP documents specify bottom row first.The BMP documents specify bottom row first. Red and Blue give the purple color.Red and Blue give the purple color.

Bitmap Data – Color Change In the bottom row, there are 24 purple pixels, FF 00 FF. Then we see FF times. In the bottom row, there are 24 purple pixels, FF 00 FF. Then we see FF times. This would seem to indicate Red.This would seem to indicate Red. Again, the BMP specifications indicate the colors will be in BGR order.Again, the BMP specifications indicate the colors will be in BGR order.

Suzie Pup Pup Pup Now Now Now