A 24-bit depth .bmp file made in XVI32• This 2-by-2 image was handcrafted in

XVI32• Bytes 1C-1Dhex in the Info Header say that

the image uses 24-bit (18hex) colour depth • So the file has no Colour Table• So the pixel data start in byte 36hex (where

the colour table, if there had been one, would have started)

• Each pixel's colour is specified as three bytes - little-endian RGB

• Since each line has only two pixels (that is, 6 bytes), each line has two padding bytes (to reach a multiple of four bytes)

A 24-bit depth .bmp file made in XVI32• This handcrafted image open correctly in PhotoPlus and Opera

A 24-bit depth .bmp file made in PhotoShop• This 2-by-2 image was exported from

PhotoShop (not PhotoPlus)• Like the handcrafted .bmp, bytes 1C-

1Dhex in the Info Header say that the image uses 24-bit (18hex) colour depth

• So the file has no Colour Table– Instead each pixel has three bytes– The lines are padded (to reach a

multiple of four bytes)• However, the file contains two extra

bytes which don't appear in the .bmp specification

– This is why the file size is two bytes larger than the handcrafted file

A 24-bit depth .bmp file made in XVI32• Despite the divergence from the standard, the image opens

correctly in PhotoPlus and Opera• Again, it appears that some image processing software seem to

ignore some parts of a .bmp file

Another 24-bit depth .bmp file made in PhotoShop• This 4-by-4 image was exported

from PhotoShop (not PhotoPlus)• As before, this image uses 24-bit

(18hex) colour depth and has no Colour Table

– Each pixel has three bytes– The lines don't need padding (they

are already a multiple of four bytes)• However, the file contains two extra

bytes which don't appear in the .bmp specification

• Again, some software seem to use a variant of the specification

Editing the 24-bit depth .bmp file made in PhotoShop

• Below, the 4-by-4 image exported from PhotoShop has just been edited with XVI32:

– The extra two bytes have been removed

– In the File Header, the declaration of the file length has been reduced by two

• The image has been stored in a file called test-4x4modified.bmp

• The file still opens in PhotoPlus and Opera

Absolutely basic 24-bit depth .bmp format• We have seen that the common image display programs ignore much of the format

for 24-bit-depth .bmp files• The minimum we must do when making a 24-bit depth file is

– assign the fixed values shown below to the bytes marked green

– put the image width and depth in bytes 12-15hex and 16-19hex, respectively

– specify the pixels from byte 36hex onwards, 3 bytes per pixel, padding the lines if necessary to make each line a multiple of four bytes

– put the overall file size in bytes 02-05hex

Could we store this image in a smaller file?

• This image is 34x4 pixels in 24-bit .bmp format

• The RGB for each pixel in the 1st and 3rd rows is 89 88 87hex

• The RGB for each pixel in the 2nd and 4th rows is CC CB CChex

• The file contains 01 B6hex bytes (438 bytes)

• Can you imagine a format in which the image would occupy a smaller file?

First attempt at a smaller format

• We could design a format in which the header stores just – the file size, – the image width – the image height

• The file would then occupy only 01 8Chex (396) bytes

• But, can you imagine an even smaller format?

Compress the repeated data• We could reduce the pixel data by compressing repeated pixel data • Repeated pixels are represented by a counter and an example pixel

• Since images can be up to FF FF FF FFhex pixels wide, we allow 4 bytes for each counter

• There are 32 bytes (00 00 00 20hex) of RGB = CC CA CBhex

• Followed by 32 bytes (00 00 00 20hex) of RGB = 89 88 87hex

• Followed by 32 bytes (00 00 00 20hex) of RGB = CC CA CBhex

• Followed by 32 bytes (00 00 00 20hex) of RGB = 89 88 87hex

• If we compressed like this, the file would occupy only 28hex (40) bytes

• This is called lossless compression - no information is lost

How many colours are in the image below?

• It is available at http://www.cs.ucc.ie/j.bowen/cs1107/widgets/red32x4.bmp

• Download it, open it in Photoplus and check how many colours it contains

Compressing unperceived colour differences• The 32x4 pixel image below actually contains four colours• But most people can perceive only one• We could save space by storing only one colour• This is called lossy compression, because some

information is lost

The raw image in .bmp format

• The image has 34x4 pixels

• Here it in 24-bit .bmp format

• The RGB colours are FF0000, FE0000, FD0000 and FC0000

• The file contains 01B6hex bytes (438 bytes)

Using lossy compression with our own format

• In .bmp format, this 32x4 pixel image occupies 01 B6hex bytes (438 bytes)

• But using lossy compression with the file format we designed earlier (header contains just file size, image width and image height), the file would occupy only 13hex (19) bytes

• The four original RGB colours are FF0000, FE0000, FD0000 and FC0000 but we store just an average colour, say FC0000

• We say there are 32*4=128=80hex pixels with this colour

• We store this information as 80 00 00 00 followed by 00 00 FC

Some standard formats• BMP, as we have seen

– allows up to 24 bits per pixel

– does not compress pixel data, but does support a 256-colour palette

• GIF– allows up to 8 bits per pixel

• so it is not good for storing high quality photographs that have lots of different colours

– Uses lossless compression to reduce file size • so very good for storing images that contain no more than 256 colours - no

edges are blurred

• JPEG (JPG)– JPEG is actually a form of lossy compression, offering several degrees of

compression

– Often used for compressing photographs • although sharp edges in original images are blurred by lossiness

– JPEG is used in several formats• JPG/EXIF (Exchangeable image file format) - used by digital cameras

• JPG/JFIF (Jpeg file interchange format) - often used on web pages

Example photo in some standard formats• Thumbnail below shows smaller version of a bigger image

• The full-sized image is 4752x3168 pixels

• In .bmp format, it occupies 45,163,064 bytes

• In .gif format, it occupies 8,426,776 bytes

• In .jpg format, it occupies 10,062,187 bytes

• In a more aggressively compressed .jpg format, it occupies only 568,954 bytes

• If you want to view them, the files are available with URLs like thishttp://www.cs.ucc.ie/j.bowen/cs1107/widgets/trees/treesMoreCompression.jpg

• Open the files with XVI32 to see some of the header details