Digital Images are represented by manipulating this…
-
Upload
annabelle-preston -
Category
Documents
-
view
214 -
download
0
Transcript of Digital Images are represented by manipulating this…
![Page 1: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/1.jpg)
![Page 2: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/2.jpg)
Digital Images are represented by manipulating this…
![Page 3: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/3.jpg)
And this…
.
![Page 4: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/4.jpg)
Meaning…
Off
![Page 5: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/5.jpg)
And…
.
On
![Page 6: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/6.jpg)
Or rather ..
0 zero
And
1 One
(In fact this is true for everything we see in a computer system!)
![Page 7: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/7.jpg)
1 Bit ImagesUse a single bit to represent each pixel (dot
on the screen)
00101
![Page 8: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/8.jpg)
Use more bits and display as a grid…The following image is 61 pixels wide by 57 pixels high
![Page 9: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/9.jpg)
Quick Calculation of File SizeImage width 800 pixelsImage height 600 pixels
1 pixel = 1 bit, so image is 800 * 600 bits which is
480000 bitsor divided by 8! (8 bits in a byte)
gives us60,000 bytes
![Page 10: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/10.jpg)
Make the grid larger and pixels smaller…
Here we have increased the image resolution by using more dots per inch (dpi)Increasing dpi means we are cramming in more dots per area of image.
![Page 11: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/11.jpg)
This image is 512 pixels wide by 512 high
This type of image may be referred to as a binary image since each pixel is stored as a single zero or one
This kind of picture is also called a 1 bit monochrome image since it has no colour content
![Page 12: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/12.jpg)
8 Bit Grey Scale ImagesRepresenting shades of grey…
Now 1 pixel = 8 bits
![Page 13: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/13.jpg)
200 & Fifty 6 Shades of Grey
![Page 14: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/14.jpg)
File Size Calculations800 x 600 8 bit image = 480,000 bytes
800 x 600 = 480,000 pixels1 pixel = 1 byte thus 480,000 bytes
8 x larger than 1 bit system
![Page 15: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/15.jpg)
File Size Calculations800 x 600 24bit colour = 1,440,000 bytes
800 x 600 = 480,000 pixels1 pixel = 3 bytes thus 1,440,000 bytes
24 x larger than our first image
(24 bit colour formats – JPEG, BMP)
![Page 16: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/16.jpg)
24 Bit ColourFiles getting larger
We can now represent 16 million colours
The human eye can only see 10 million of them
Extra colours useful for image processing and special effects
Colour resolution is the number of colours a single pixel may display
![Page 17: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/17.jpg)
8 bit Colour Images and Look up Tables
Pixel Red Green Blue
1
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
2
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
3
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
4
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
No of bytes = 12
Draw four blue dotsRGB Example
![Page 18: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/18.jpg)
Pixel Lookup table entry
1 1 (1 byte)
2 1 (1 byte)
3 1 (1 byte)
4 1 (1 byte)
Table Entry Red Green Blue
1
RGB(0,0,255)
0 (1 byte) 0 (1 byte) 255 (1 byte)
Reducing the number of bytes in this example from 12 to 7
The GIF and PNG formats uses a look up table
Lookup Table
Using a Lookup Table
![Page 19: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/19.jpg)
Pixel Lookup table entry
1 1 (1 byte)
2 1 (1 byte)
3 1 (1 byte)
4 1 (1 byte)
5 2 (1 byte)
Table Entry Red Green Blue
1
RGB(0,0,255)
0 (1 byte) 0 (1 byte) 255 (1 byte)
2
RGB(255,0,0)
255 (1 byte) 0 (1 byte) 0(1 byte)
Lookup Table
Only Record Unique Pixel Data
![Page 20: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/20.jpg)
Graphic Formats• We will now look at a few common file
formats• BMP• GIF• JPG• PNG
![Page 21: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/21.jpg)
The Windows BMP FormatOK for Windows based systems
Not web friendly Not good for MAC / UNIX / Mobile Devices
![Page 22: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/22.jpg)
Graphics Interchange Format (GIF)Pronounce “giff” or “jiff” is a very popular
format on the Web
This format was originally devised by CompuServe
![Page 23: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/23.jpg)
GIFF and Colour• Limited to 256 colours, so conversion from 16
million colours to the 256 colour GIF format will result in loss of colour resolution
• Makes use of a colour lookup table to store the colour information
• It only stores the colours that are in the
image
![Page 24: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/24.jpg)
Dithering and GIFsUsed to fool the human eye that there is more detail than
there really is!
A The original unchanged imageB 1 bit monochrome with ditheringC 1 bit monochrome without dithering – note the
loss of detailD 8 bit colour with dithering – note the speckled effect
which is common to this process
A B
C D
![Page 25: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/25.jpg)
GIFF, Dithering and Banding
Without dithering a GIFF file tends to develop harsh transitions called banding.
![Page 26: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/26.jpg)
Interlacing
• Images on the web normally drawn from top left to right down the image
• The GIFF format allows for a technique called interlacing which displays the image every eighth line at a time.
![Page 27: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/27.jpg)
We get an idea of what the image looks like without downloading the whole file (useful for low bandwidth)
![Page 28: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/28.jpg)
GIFF Transparency
![Page 29: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/29.jpg)
Joint Photographic Experts Group JPEG / JPG• A compression standard best applied to
photographs or complex shading / lighting effects
• Stores a complete black and white version of the image and most of its colour information
• Not all of the colour information is retained, this
makes JPEG a “lossy” format as some of the original image information is lost, especially in highly compressed files
![Page 30: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/30.jpg)
When using graphics with large areas of similar colour the GIF format is a better choice.
![Page 31: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/31.jpg)
Zoom in…
The GIF is 2K, the JPEG is 15K.
![Page 32: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/32.jpg)
However in photographs the JPEG is better
![Page 33: Digital Images are represented by manipulating this…](https://reader035.fdocuments.net/reader035/viewer/2022070415/5697bfd41a28abf838cacbe9/html5/thumbnails/33.jpg)
PNG Format• Offers better compression than GIF – ranging from
10 – 30 % • Is a lossless format so whatever colour data in the
original will be present when viewed in the browser • Is not limited to 256 colours with full RGB
capabilities • Supports interlacing • Supports transparent colours