Understanding pixel dimension
• Resolution independent – can be scaled to
any size without losing any detail
• Object-oriented graphics
• Made-up of vectors
Bitmap (Raster) Graphics
•Resolution Dependant – contain a FIXED number of
pixels (size of image is based on the image resolution)
•Made-up of pixels – each pixel (picture element) is
assigned a specific location and color value
Different Types of Resolution?
1. Image Resolution (ppi) pixels per inch
high resolution – 300 ppi or higher
low resolution – 72 ppi
Bitmap image contain a fixed # of pixels
2. Monitor Resolution
# of pixels per unit of length (ppi) on a
3. Printer or Output Resolution
# of ink dots per inch (dpi) produced by a
(higher resolution printer & high resolution image generally
produce the best quality print output)
Resolution & Image Size
# of pixels that describe an image and establish the
# of pixels along the width & height of the image
5X7 image at 300ppi resolution =
pixel dimensions of 1500X2100
• When we create or scan a digital image we
are capturing pixel information
• WE decide how much pixel information to
capture by setting the resolution as we scan.
• Scanners record the color value and brightness of
each area of an image when scanned.
• WE decide the pixel dimensions of an image we
create in an image editing program.
What’s your output device?
• We prepare images based on the output
• Images for PRINT
• Should have a higher resolution
• Usually in CMYK color mode
• Images for VIDEO
• Usually have a lower pixel dimension
• Use RGB color mode
• Higher resolution images...
• Contain more pixels
• can reproduce more detail & subtle color
transitions when printed
• Have a larger file size
• Printer resolution ( the number of ink dots
per inch(printed) dpi
• Laser printers can range from 600dpi to 1200dpi
– even higher
• Common resolution settings
• 72DPI monitor or web
• 100DPI 300DPI printer
• 200DPI 600DPI printer
• 300DPI 1200DPI printer
Resolution for the Web?
• Web graphics – worry about pixel
dimension rather than resolution…
• Image pixels map one-to-one with the
display resolution of a monitor
• Monitor resolution varies by platform and
• Monitor resolutions
• High resolution graphics – not needed online. They just
appear larger on screen and take up more file size and
Points to Remember
• To produce good quality images… must
understand image dimension.
• We must create or edit the image size to be
suitable for the way we will use it.
• 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.
• Adobe Web Tech Curriculum
Lesson 5.1: Graphics Basics
• Scanning Tips by Wayne Fulton