Dean Pentcheff NHMLAC MBPC Crustacea 17 April 2006

Dean Pentcheff NHMLAC MBPC/Crustacea 17 April 2006

Digital Imaging • • Image types (realworld, bitmap, vector) Bitmap specifics Vector specifics Guidelines

Image types • Realworld – what you see around you • Bitmap – grid of pixels (GIF, JPG, PNG, …) • Vector – list of curves (AI, Postscript, PDF, …)

Image types: Realworld • Continuous resolution • Infinitely zoomable • No limits on rotation

Image types: Bitmap • Grid of pixels • Scaling is limited • Examples: – – – JPG/JPEG GIF PNG BMP TIF/TIFF

Image types: Vector • List of curve and shape postions • Infinitely scalable • Examples: – Adobe Illustrator – Postscript – PDF

Digital Imaging • • Image types (realworld, bitmap, vector) Bitmap specifics Vector specifics Guidelines

Bitmaps: Grid of pixels A bitmap is a list of colors, each corresponding to a dot on a grid

Bitmaps: Pixel dimensions width: 30 pixels height: 22 pixels • Bitmaps are best considered as a grid of dots (“pixels”) • Every bitmap has a width (X dimension) and length (Y dimension) • A bitmap has no intrinsic size (except in pixels) • So what is resolution?

Bitmaps: Resolution and DPI • How big is it on the screen or on the page? – how many pixels per inch (dots per inch = DPI)? • Sizes: – screens ≈ 72 pixels per inch (DPI) – printing ≈ 300 – 1200 pixels per inch (DPI) • But remember: you have a limited bag of pixels size only matters at final rendering

Bitmaps: Resolution and DPI • Example image: 30 pixels wide x 22 pixels high – how wide will that be on screen (72 dots per inch)? width of image x ( 1 inch / 72 dots) = 30 pixels x ( 1 inch / 72 pixels ) = 0. 4 inches • And the result is?

Bitmaps: Resolution and DPI • What about making it bigger with a lower DPI? – example: put it on a billboard – how wide will that be (10 dots per inch)? width of image x ( 1 inch / 10 dots) = 30 pixels x ( 1 inch / 10 pixels ) = 3 inches • Notice that there’s no more information

Bitmaps: Scaling and rotation • Implications of the grid – scaling a picture means sampling the image and synthesizing a new grid of pixels – rotation similarly means sampling and resynthesizing the grid • Why does the grid of pixels have to be sampled and resynthesized?

Bitmaps: Scaling example

Bitmaps: Scaling example • Minor rescale – 29 pixels wide (from 30 pixels original) • To rescale, new pixels have to by synthesized by interpolation from the original pixels

Bitmaps: Rotation example • Similarly small rotation – 3 degrees • Same situation: new pixels have to be synthesized by interpolation from the original pixels

Bitmaps: Scaling and rotation • Scaled or rotated images will be blurrier • Avoid rescaling/rotating if you can • If you have to do it, do it after any other manipulations or image enhancements

Bitmaps: Color formats • Common versions of bitmaps – RGB (red, green, blue) color – monitors/Web – CMYK (cyan, magenta, yellow, black) – commercial printing • How are colors represented? – looking at RGB…

Bitmaps: RGB colors • Usually 24 -bit color – 3 numbers (one each for red, green, blue) – each between 0 -25510 (8 bits) • Representations – red, green, blue as decimals: 255, 0, 0, 255 127, 0, 127 255, 127, 0 100, 50, 0 – #rrggbb as hexadecimals: #ff 0000 #0000 ff #800080 #ff 8000 #643200

Bitmaps: Color modes • “Truecolor” – 24 bits per pixel • Indexed – 8 or 12 bits per pixel, which select one of a limited palette of colors • Grayscale – Similar to color, but only one channel

Bitmaps: Storage and compression • On disk, bitmaps are a string of numbers • To save space, compression is used • Lossless compression – every pixel preserved – PNG, GIF, TIFF • Lossy compression – some information lost – JPG (efficient and effective for photographic images only – not for line art)

Bitmaps: Storage and compression • Example of JPG over-compression

Bitmaps: Image sources • Original (digital) photographs and SEMs • Photos and SEMs scanned from printed material • Original digital art (Photoshop-created)

Bitmaps: Original photos & SEMs • Recall the scaling/rotating issues • Since the target is (usually) a bitmap, there’s not too much to be said here…

Bitmaps: Scanned photos & SEMs • Printing does violence to images • When scanning, we need to recover the original qualities of a digital image

Bitmaps: Scanned photos & SEMs

Bitmaps: Scanned photos & SEMs • Naïve rescaling leads to trouble: original very close up Moiré distortion

Bitmaps: Scanned photos & SEMs • To avoid Moiré problems: – scan at high resolutions (600 – 1200 DPI) – blur the image until the dots just disappear – scale image down to a reasonable size

Bitmaps: Scanned photos & SEMs Photoshop start Make sure you’re seeing the full resolution on the screen Not enough blur Too much blur Set up Gaussian Blur Just about right

Bitmaps: Scanned photos & SEMs Naïve rescaling Better rescaling

Bitmaps: Original digital art • Created in Photoshop or similar program • Like original photos, observe scaling issues

Bitmaps: Summarizing • Bitmaps are a bag of pixels with no intrinsic size (“dots per inch” and “resolution” matter only to a final output device) • Scaling and rotating mean resynthesizing the grid of pixels (hence blurring) • Scanned photographs need special care

Digital Imaging • • Image types (realworld, bitmap, vector) Bitmap specifics Vector specifics Guidelines

Vector images: Lines and shapes • Reminder: vector images are descriptions of line and shape positions and sizes • Hence they can be scaled to any size with no loss of information or resampling • Examples: Adobe Illustrator, Postscript, PDF

Vector images: Lines and shapes

Vector images: scaling & rotating • There is no loss of information or resynthesizing when a vector image is scaled or rotated • Programs may save a “target” size or page size with the vectors – but that doesn’t constrain scaling

Vector images: With bitmaps • Vector graphic formats can contain bitmaps (e. g. photos in a PDF or a scan of a microscope sketch in Illustrator) • Those contained bitmaps have all the properties of bitmap images: rescaling & rotating imply resynthesizing the grid of pixels

Vector images: Storage • Always lossless • Numbers and shape descriptions • Very compact, vs. bitmaps . 8 setgray clippath fill -110 -300 translate 1. 1 dup scale 0 g 0 G 0 i 0 J 0 j 0. 172 w 10 M []0 d 0 0 k 177. 696 715 m 177. 797 713. 821 176. 973 713. 84 v 176. 149 713. 859 159. 695 761. 934 139. 167 759. 691 C 156. 95 767. 044 177. 696 715 V b 181. 226 718. 738 m 180. 677 716. 922 179. 908 717. 221 v 179. 14 717. 519 180. 023 768. 325 159. 957 773. 199 C 179. 18 774. 063 181. 226 718. 738 V b

Vector images: Rendering • Vector images are descriptions of lines • Display devices are bitmapped (screens, printers, etc. ) • Converting the geometric descriptions into an output bitmap is “rendering”

Vector images: Rendering

Vector images: Rendering • How rendering is done depends on the output device – resolution screen ≈ 72 DPI, printer ≈ 300– 1200 – size number of pixels = size x DPI – color or B&W • Hence rendering may differ for printed paper, screen, PDF, etc.

Digital Imaging • • Image types (realworld, bitmap, vector) Bitmap specifics Vector specifics Guidelines

Guidelines • Original digital photos and SEMs – Save original highest-resolution copy – Manipulate (contrast-enhance, etc. ) first, then scale or rotate – Use JPG at quality “ 8 / High” for most purposes

Guidelines • Scanned photos and SEMs – scan at fairly high resolution (600– 1200 DPI) – use Photoshop to blur just until print-dots disappear – save that “original” as PNG for archival purposes – save as JPG (quality “ 8/High”) for most usage

Guidelines • Bitmap sizes – monitors and laptops are about this size: small: 1024 wide x 768 high large: 1680 wide x 1050 high • so to cover 1/3 to 1/2 screen width: make bitmaps about 300– 600 pixels wide – printers are 300– 1200 DPI and 8. 5 inches wide • print software will rescale images • for good resolution, use bitmaps ≥ 1000 pixels wide

Questions problems comments answers…