http:www.cheng.cam.ac.ukseminarsimagepro

1
Image Processing For Chemical Engineers Vanessa
S Blake
http//www.cheng.cam.ac.uk/seminars/imagepro/
2

• Digital images may come from
• Digital camera http//www.howstuffworks.com/digit
  al-camera.htm
• Captured from video
• Scanned photographs, line drawings
  http//www.scantips.com
• Drawn on the computer
• Grabbed from web pages
• Clip art

3

• Digital images may be used in
• Presentations - PowerPoint
• Posters - also PowerPoint
• Papers, theses
• - Word
• Web pages

4
Software for image processing

• Photo Editor - public PCs
• Adobe Photoshop Lite - lower PC suite
• PaintShop Pro - 30 day trial version free
• NIH Image - free image processing and analysis
  program
• Macs http//rsb.info.nih.gov/nih-image/
  PCs http//www.scioncorp
  .com/
• Graphic Converter - shareware for Macs

5

• Vector vs raster
• Bit depth
• Resolution
• File formats
• Compression

See http//fla.esf.edu/research/CAVlab/reference
/bmpvec.htm
6
Vector images - images made up of lines described
mathematically Raster images - grids of dots,
or pixels, each pixel containing colour
information Also known as bitmaps
7
Vector image - line from x1,y1 to x2,y2
8
Raster - 8 6 pixels
PIXEL PIcture ELement
9
Raster - 16 12 pixels
10
File size ? number of pixels
More pixels ? lines less jagged, but bigger
filesize. Width height 2 filesize 4
8 6 48 pixels 16 12 192 pixels
11
File size ? number of pixels
More pixels ? lines less jagged, but bigger
filesize. Width height 2 filesize 4
640 480 307,200 1280 960 1,228,800
12
File size ? number of pixels bit depth
13

• Vector vs raster
• Bit depth
• Resolution
• File formats
• Compression

14
Raster - 16 12 pixels
15
1 bit digital representation - black and white
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
1
0
0
0
0
1
0
0
0
0
0
0
0
0
0
0
1
0
0
0
0
1
0
0
0
0
0
0
0
0
0
0
1
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
A bit is a binary digit - 0 or 1
16
Bit depth defines the number of colours available
to each pixel within an image.
Bit Depth Colours Available 1-bit black and
white 2-bit 4 colours 4-bit 16
colours 8-bit 256 colours 8-bit greyscale 256
shades of grey 16-bit 32768 colours 24-bit
16.7 million colours 32-bit 16.7 million
256 Levels of transparency
See http//fla.esf.edu/research/CAVLab/referenc
e/candbd.htm
17
8 bit - 256 colours
18
24 bit 8 bit 8 bit 8 bit
red green blue
19
Bit binary digit Byte 8 bits Kilobyte
1024 bytes Megabyte 1024 kilobytes
so, 24 bits 3 bytes
20
An example . . . . .
21
24 bit bmp 240 180 43200 pixels File size
43200 3 129600 bytes 127
KB Actual size 127 KB
8 bit bmp 240 180 43200 pixels File size
43200 1 43200 bytes 42
KB Actual size 44 KB
22
4 bit bmp 240 180 43200 pixels File size
43200 0.5 21600 bytes 21
KB Actual size 22 KB
Gif 240 180 43200 pixels File size
Compressed format Actual size
3 KB
23

• File size decreased from 127 KB to 3 KB
• No visible difference

24

• Vector vs raster
• Bit depth
• Resolution
• File formats
• Compression

25
Resolution DPI dots per inch PPI pixels per
inch
See http//fla.esf.edu/research/CAVLab/referen
ce/res.htm
26
Resolution Screen resolution Printer resolution
27
Screen Resolution Image 320240
28
Assuming a screen of 12 inches by 9
inches Screen DPI Resolution 640 x
480 53.33 800 x 600 66.67 1024 x
768 85.33 1152 x 864 96 1280 x 1024 106.67
29

• Dont make image bigger than the screen
• scroll down for some vital part ?

30
Printer resolution Deskjet 1220C 600dpi
(claims 2400x1200dpi with HP Photoret III
Precision Technology) Laserjet 4500DN 600dpi (clai
ms 2400dpi with HP ImageREt 2400) Epson
Stylus Color 900 1440dpi
31
If you tried to print an A4 image of 1440 ppi...
10 inches 1440 pixels per inch 14,400
pixels
8 inches 1440 pixels per inch 11,520 pixels
32
If you tried to print an A4 image of 1440 ppi...
1. No machine in this department can handle an
image that enormous 2. The printer would throw
most of it away
33
Printer dpi ? pixels per inch

• Dots of
• black
• cyan
• magenta
• yellow
• make up all colours

34
Image resolution should be 1/4 to 1/2 printer
resolution 600 dpi printer ? 150 ppi image
35
Advertising
EPSON Ultra Micro Dot with Variable Sized Droplet
Technology
36

• Vector vs raster
• Bit depth
• Resolution
• File formats
• Compression

37
File formats Web gif jpg png Office almost
anything
http//fla.esf.edu/research/CAVLab/reference/files
.htm
38

• bmp
• Windows based PC bitmap format.
• 1 to 24 bit colour formats
• 4 and 8 bit images compressed using lossless
  compression
• 24 bit images not compressed

39

• Gif - Graphics Interchange Format
• 1 or 8 bit bitmap, greyscale or indexed colour
  images developed for use with Macs and PCs
• use on web pages - compressed, so small, allow
  for fast downloads
• support animations, interlacing, and transparent
  colours
• also used frequently with presentation software
• best used for clip art/cartoon style graphics

40

• png - Portable (Public) Network Graphic
• alternative to gifs
• use on web pages, but not universally supported
  yet
• 24 bit colour
• lossless compression

41

• jpg or jpeg - Joint Photographic Experts Group
• 24 bit colour images
• used for web and presentation graphics
• compressed
• good image quality at small file sizes
• good for photographic type images
• lossy compression can result in poor image
  quality if compressed too much

42

• tif or tiff - Tagged Image File Format
• good for exchange of images between programs and
  platforms
• generally uncompressed, or uses lossless
  compression
• 1 bit colour to 24 bit colour
• multiple types of tiffs, some incompatible with
  others

43
pict Mac format for vector or bitmap
images psd Adobe PhotoShop file format
eps Encapsulated Post Script pdf Portable
Document Format Adobe Acrobat wmf Windows
MetaFile
44

• Further information
• http//www.dcs.ed.ac.uk/mxr/gfx/2d-hi.html
  The Graphics File Formats Page
• http//www.molbiol.bbsrc.ac.uk/protein/graphics_fo
  rmats.html Understanding Image File Formats
• http//www.cam.ac.uk/cs/courses/coursedesc/graph.h
  tml Computer Services courses on Graphics and
  photo/image processing

45

• Vector vs raster
• Bit depth
• Resolution
• File formats
• Compression

46

• Compression - the process of compacting an image
  by removing redundant information.
• Lossless compression - on decompression, the
  original is restored in every detail.
• Lossy compression - unnecessary(?) detail is
  thrown away

47
Compression Uncompressed Lossless
compression 5(3),6,5(2),6(4),5(4) Lossy
compression 5(14)
5
5
5
6
5
5
6
6
6
6
5
5
5
5
http//fla.esf.edu/research/CAVLab/reference/compr
ess.htm
48
Compression Uncompressed tiff Lossless
compression gif Lossy compression jpg
49
An example . . . . .
50
Image from digital camera Quality SQ HQ
SHQ Size pixels 640512 17121368 17121368
12801024 File length 400 KB 550 KB 1.7
MB Memory 5 MB 8.9 MB 8.9 MB Compression 113 1
16 15 File format jpeg or tiff Resolution
7272 dpi Colours 16.7 Million
High quality
Super high quality
Standard quality
51
Computer in lower PC suite
Scanner
Photo card reader
52

• What do I do with it?
• Option 1
• Open it in PhotoEditor
• Print it out to Deskjet printer
• Laminate it
• Stick it on your poster

53

• What do I do with it?
• Option 2
• Open it in PhotoEditor
• Crop and resize to the size it will appear in
  the final product
• Import image into Word
• Print report from Word

54

• What do I do with it? - Option 3
• Open it in PhotoEditor
• Crop and resize to the size it will appear in
  the final product
• Import image into PowerPoint
• Use PowerPoint for presentation or
• Take PowerPoint file to PIS for printing as a
  poster (this costs money)

55
Don't copy and paste images into Word and
PowerPoint Always use   Insert     Picture      
From file
56
Dont just insert it into your document and
resize by dragging its sizing handles
If you make it look smaller, its still same
filesize
57
and if you make it bigger...
58
Also, for images in web pages ltimg
src"dept1.gif" width274 height230
alt"department with daffodils"gt dont use these
fields to scale image
59

• Further information on web graphics
• The Web Developers Virtual Library
  http//www.wdvl.com/WebRef/Help/Begin.html
• Graphics links http//www.wdvl.com/Gr
  aphics/
• Tips and tutorials for creating graphics in
  PhotoShop and other applications.
  http//www.mccannas.com/pshop/menu.htm

60
SENDA Special Educational Needs and Disability
Act 2001
http//web-support.csx.cam.ac.uk/access/accesssli
des/ e.g. Use the alt attribute to describe each
image ltimg src"dept1.gif" width274 height230
alt"department with daffodils"gt
A final note
This presentation is 532 KB