Digital Images

Digital Images

• Scanned or digitally captured image

• Image created on computer using graphics software

Digital Images fall into two main categories

• Vector Graphics

• Raster (Bitmap) Graphics

Vector Graphics

Vector Graphics

• Object-oriented graphics• Made-up of vectors• Resolution independent – can be

scaled to any size without losing any detail

• Used primarily for hard-edged graphics such as drawings, logos, charts, illustrations, and type

• Adobe Illustrator, Macromedia Freehand, Corel Draw

Bitmap (Raster) Graphics

Bitmap (Raster) Graphics

• Made-up of pixels – each pixel (picture element) is assigned a specific location and color value

• Resolution Dependant – contain a FIXED number of pixels (size of image is based on the image resolution)

• Can represent subtle gradations of color - used primarily for continuous-tone images such as photographs

• Adobe Photoshop, Paintshop Pro, Painter

Graphic File Formats

• Issues to consider• Type of Image• Intended Usage• Open standard or proprietary format

• TIFF & EPS• GIF, JPEG and PNG

Graphic File Formats

• TIFF(Tagged ImageFile Format)

• This format is a good way to save scanned images. (Long-term archival storage)

• It is a platform-independent file format. • TIFF is strictly used for bitmap data. • The TIFF format allows for changes in contrast, density, and

color to be made easily. • TIFFs support virtually all color spaces and support a large

number of compression algorithms. (can remain uncompressed)• A TIFF file can be any resolution you choose. • The main drawback to saving a file in TIFF format is that,

because of the large amount of information saved, the file size may be quite large.

Graphic File Formats

EPS (Encapsulted PostScript Files)

• EPS files are actually two files in one. EPS files contain the PostScript information (the printer language that defines desktop publishing) that the file needs for printing, and QuickDraw information (a preview format such as PICT, TIFF, WMF) that the computer uses for display of images on screen.

• Since EPS files are written in PostScript, they should work with every PostScript device and most layout, illustration, and paint programs.

Graphic File Formats

Common Web File Formats• GIF

Graphics Interchange Format• JPEG

Joint Photographic Experts Group• PNG

Portable Network Graphic

What’s your output device?

• We prepare images based on our intended use

Output device

• Images for PRINT• Should have a higher resolution• Usually in CMYK color mode

• Images for DIGITAL DISPLAY• Usually have a lower resolution• Use RGB color mode

What is Resolution?

• The number of PIXELS PER INCH (ppi) in an image

• PIXEL• An abbreviation for picture element.• The smallest element of a bitmap image• Monitors and printers use a fine grid of

pixels to display images• Each pixel can be turned on or off and

assigned a color.

PPI vs DPI

• Pixels per Inch• Pixel dimension of a digital image• # of pixel elements per inch

• 800p X 600p

• Dots per Inch• “dots” of ink per inch when a digital

image is printed• Resolution often referred to in dpi

• 300 dpi image

Resolution…

• When we create or scan a digital image we are capturing pixel information

• Scanners record the color value and brightness of each area of an image when scanned.

• WE decide how much pixel information to capture by setting the resolution as we scan.

• The resolution or image dimension determines what we can do with the image (print/video)

File Size

• Higher resolution & Higher bit-depth images...• Have a larger file size

• Contain more pixels• can reproduce more detail & subtle color

transitions

Bit Depth• The number of bits used to represent the colors of

each pixel in an image. The greater the bit depth means more bits of information per pixel.• Black & white: 1-bit

one bit to describe each pixel – black & white (on/off) (lineart)• Grayscale: 8-bit

256 possible colors (Ex: 256 shades of gray in a grayscale image)

• Full Color: 24-bit millions of colors (full color, truecolor)

• Three 8-bit channels: 256X256X256 = 16 million color combinations• Represents a significant portion of the range of colors visible to the human eye

• 32-bit = CMYK images or RGB images with a 4th Alpha channel

• 48-bit = generally highest bit-depth available• Three 16-bit channels• Most software and hardware not able to display this much data

The Claremont Colleges Digital Library Scanning Best Practiceshttp://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf

Resolution…

• Images for digital display typically have a lower resolution (72 ppi)

• Image pixels map one-to-one with the display resolution of a monitor

• Monitor resolution varies by platform and user configuration

• Monitor resolutions• http://www.thecounter.com/stats/2006/

September/res.php

Resolution…

• High resolution graphics – not needed online. They just appear larger on screen and take up more file size and bandwidth.

Points to Remember

BITMAP IMAGES CONTAIN A FIXED # OF PIXELS!

Good Ducky!Bad Ducky!

Points to Remember

• To produce good quality images… must understand image dimension & resolution.

• Create or edit the image size to be suitable for our intended use.

• Start with a good scan.• If you plan to edit or scale the image

in any way, start with a higher resolution image and optimize and compress image for web after all edits are complete.

Points to Remember

• Create Archival Master• Scanned at highest level possible -

appropriate for your environment• Save in uncompressed file format• Create all derivative files from the

archival master• Back-up Archival Master

Resources• Adobe Web Tech Curriculum

Lesson 5.1: Graphics Basicshttp://www.adobe.com/education/instruction/webtech/CS2/unit_graphics1/gb_print.htm

• Scanning Tips by Wayne Fulton http://www.scantips.com/

• Claremont Colleges Digital LibraryScanning Best Practiceshttp://ccdl.libraries.claremont.edu/inside/CCDLScanningBestPractices.pdf