The Innovative Instructor BestForum Practice Center for September 2010 c Educational e r Resources Reid Sczerba, Multimedia Developer, CER What it is What this is Image resolution is a concept that always The Innovative Instructor is a forum comes up when working with digital images. that publishes articles related to The resolution of an image has implications teaching excellence at Johns Hopkins for the final output of the image, whether that output is a printed poster or an image on a website. An understanding of image About the CER resolution ensures that the end result is The Center for Educational Resources clear, crisp, and of an appropriate file size. partners with faculty and graduate students to extend instructional impact by connecting innovative Why it matters How to do it teaching strategies and instructional Choosing a resolution that is too low will The term, “resolution,” refers to the num- technologies produce images that appear blurry or fuzzy ber of visual elements found within a phys- when printing. Printed products that are ical unit of measure. Every image, digital or For information on blurry will appear unprofessional, reducing not, is made up of tiny elements of color. how to contribute to their effectiveness. Understanding screen For print media, these elements are the The Innovative Instructor or resolution is also essential when sizing grains in photographic film or the colored to access archived articles, images for both websites and PowerPoint dots in a magazine. The same is true for presentations to ensure a fast load time. digital images: they are made up of an ar- please visit our website Fortunately, these complications can be ray of colored square , like tiles in a • www.cer.jhu.edu/ii accommodated if resolution is considered mosaic. The more pixels in an image, the or call Cheryl Wagner throughout the image preparation process. greater the detail – and, consequently, the • (410) 516-7181 larger the file size.

Forum categories I. Print Considerations Pedagogy Forum Typically, digital image resolution is measured in Pixels Per Inch (PPI), which indicates Hopkins professors share density. (This is not to be confused with (DPI), a term reserved for successful strategies for teaching resolution.) The PPI of a digital image matters most when printing, because a computer excellence screen has a fixed number of pixels (usually only 72 pixels Technology Forum per square inch) and is not capable of displaying more detail Information about emerging per inch without zooming in (see below). Printers are able to technologies, who is using them, represent a greater number of pixels within a square inch by and why you should know using tiny ink dots (600, 1200 DPI or higher). When a digital Best Practice Forum image is printed, the printer considers not only the physical “How To” workshops on using dimensions of the image (say, 4”x6”) but also the pixel density technologies and applying within each inch (PPI) to know how much detail to print. wikipedia.org/wiki/File:DPI_and_PPI.png innovative instructional methods Forum

Tips on image resolution for print • Photograph at the highest-resolution setting, to ensure that the image will be as detailed as possible. • While it’s possible to save a lower-resolution copy of a high-resolution image, there is no way to increase the resolution of a digital image photographed at a low resolution. (This is called “sizing up.”) The result will always be blurry because the computer cannot create pixel information that is not there. • When using a digital scanner, set the scan resolution to at least 300 PPI. (Increasing the Best Practice PPI will make the scanned image a larger digital file.) • 300 PPI is a safe resolution to produce a good quality print at the size of the original source. • It is best to edit images at a high resolution, while they contain more pixel information. Image displayed at Print Size Print at Image displayed Maximum zoom of image, of image, Maximum zoom Actual Pixels 3200% from Image displayed at Actual Pixels, at Image displayed detail 100% Actual Pixel image, in to Zoomed Actual Pixels 400% from Zoomed out to entire image, image, entire out to Zoomed Actual Pixels 33% from - - - - - holds holds a BFA in Illustration and a MA Art. College of Maryland Institute in Digital Arts from Reid works for the Center in aids educational a on variety programs, training of forprovides Educational Resources. He resources development, and shares expertise on information and graphic design for faculty at the Homewood campus. He PowerPoint slide. PowerPoint When When working with or image other for resolution a digital PowerPoint presenta use. to plan the screen you of the resolution know best is to it tion, 1024x768 pixels constitute a good size for images that will cover an entire tors. Adjust your computer’s to this, temporarily, to get a feel for for feel a get to temporarily, this, to resolution display computer’s your Adjust tors. the typical screen resolution when sizing images Keep for in the mind Web. that and scrollbars. toolbars of because will size be smaller, often window’s a browser Always size down to 72 PPI and adjust the amount of pixels tall and wide for an image. an for wide and tall pixels of amount the adjust and PPI 72 to down size Always 1024x768 is the considered smallest setscreen resolution on moni most desktop Digitally Displayed Images Displayed Digitally Multimedia Developer, Center for Educational Resources for Educational Center Multimedia Developer, Author’s Background Author’s Reid Sczerba Photoshop that can be used to resize images; Microsoft’s Picture Manager and Mac’s Mac’s and Manager Picture can that be usedPhotoshop to Microsoft’s resize images; examples. two are Previewer Additional Resources Additional The bestway to understandingof resolution of imagesis to experiment withresiz ing an image in a softwareprogram. There are numbera ofprograms other than

• • Tips for screen-based for images Tips • • to to be set at less than maximum the resolution, which monitor’s would distribute less pixel across information the existing distorting pixels of the the image if monitor, the the same. not are resolution the selected the screen to of display proportions 52” widescreen to ever-smaller mobile devices. Each screen can display a specific num specific a display can screen Each devices. mobile ever-smaller to widescreen 52” ber of Since pixels. there is no universal size for screens, images may take up different resolution display its allow can a computer each size screen. Moreover, of percentages Another Another consideration with screen-based images is the display device. Screens come in shapesand sizes,different afrom to 19” a monitor (measured standard diagonally) image pixels and screen pixels, representing the image at its highest detail. Zooming in Zooming detail. highest its at image the representing pixels, screen and pixels image past the actual pixels will produce a displayed image that is blurry; if you to continue the image. up make that will see pixels you zoom, the individual resolution is greater than 72 PPI. View settings in Photoshop will display the image at at the image will display Photoshop in settings View PPI. 72 than greater is resolution resolu of units the in image displays view Size Print The Pixels. Actual or Size Print its when appear would it as image the of size physical the represents and inches) (i.e., tion Actual Pixels viewThe the printed. displays image betweenwith a the 1:1relationship Photo editing programs, such as Photoshop, will allow the image to be viewed in detail in viewed be to image the allow will Photoshop, as such programs, editing Photo by zooming into the pixel image’s density, revealing hidden pixel information if the density per inch is irrelevant, since monitors have a fixed number of pixels (usually 72 pixels of number a fixed have since monitors per is irrelevant, inch density pixels per inch). Theonly considerationis thatof thepixel dimensionsof the image 640 x 480 pixels). (i.e., II. For images displayed on a screen, whether on a or monitor pixel through a projector,

Best Practice Forum