oit UMass Office of Information Technologies Basics of Digital Images Why Use Images? 2 Bitmaps and Vectors 2 Bitmap Resolution 3 Color Depth 4 How to Get Images 5 Fair Use for Teaching & Research 6 Start with a Large Scan, then Format Images for Different Uses 7 How to Format Images for the Web 8 How to Format Images for PowerPoint 12 How to Format Images for Printing 14 How to Format Images to Use in Video 15 APPENDIX Finding Images Online 16 OIT Academic Computing Instructional Media Lab [email protected](413) 545-2823 http://www.oit.umass.edu/academic/ 090525mt
Transcript
oitUMass Office of Information Technologies
Basics of Digital Images
Why Use Images? 2
Bitmaps and Vectors 2
Bitmap Resolution 3
Color Depth 4
How to Get Images 5
Fair Use for Teaching & Research 6
Start with a Large Scan, then Format Images for Different Uses 7
Becausephotographshavehighlevelsofdetailandavarietyoftonesandcolors,theyarebestrepresentedasbitmapimages.Scanners and digital cameras produce bitmap images, and Photoshop is a bitmap program.
Note: PowerPoint presentations, Web pages and most word processing applications primarily use bitmap images. If the original image is a vector file you may be able to save it in a bitmap format from it’s original application. Some bitmap applications will “rasterize” a vector graphic on import.
Enlarged bitmap image
Enlarged vector graphic
Basics of Digital Images page 3
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
Bitmap Resolution
A bitmap image is like a mosaic crossed with paint-by-numbers
Note: You don’t need to memorize the color numbers! Your software will take care of that. Still, it is useful to understand that there are a limited number of spots of color and a limited number of colors available for each bitmap image.
For a list of online resources see appendix, “Finding Images Online.”
Google’s Advanced Image Search is a great resource
(images.google.com)
A Creative Commons image search gives only results for images that carry
a creative commons license. (www.creativecommons.org)
Basics of Digital Images page 6
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
Fair Use for Teaching & Research
“Fair use” allows limited reproduction of copyrighted works for educational and research purposes.
The “fair use” of a copyrighted work, including reproduction “for purposes such as criticism, news reporting, teaching (including multiple copies for classroom use), scholarship, or research” is not an infringement of copyright.
Four Factors for Determining “Fair Use”
1. PurposeThe purpose and character of the use, including whether such use is of commercial nature or is for nonprofit educational purposes:Theuseofcopyrightedworksfornonprofit,teaching,research,criticism,orcommentarytendtofavorfairusewhiletheuseofcopyrightedworksforcommercialmeansrequirespermissionfromthecopyrightholder.
2. Nature The nature of the copyrighted work:Theuseofcopyrightedworksthatarefactualtendtofavorfairusewhileworksthatarecreativeworksorconsumablematerials(e.g.workbooks,answersheets)requirepermissionfromthecopyrightholder.
3. Portion The size and substantiality of the portion used in relation to the copyrighted work as a whole:Theuseofasmallamountoftheentirecopyrightedworktendstofavorfairuse.Examplesincludeonechapterofabookorthelesserofeither10%or30secondsofaudio.Theuseofmorethanasmallamountoftheworkortheuseofthe“heart”oftheworkrequirespermissionfromthecopyrightholder.Examplesincludeanentirepoem,essay,journalarticle,orsong.
4. EffectThe effect of the use upon the potential market for or value of the copyrighted work:Reproductionthatmakesitunnecessaryforstudentstopurchaseanoriginalworkthatisavailableweighsheavilyagainstfairuse.Ifthereisnopersonorentitythatcangivepermissionorprovidecopiesofaparticularpublishedwork,itismorelikelytofallunderfairuse.|The number of copies produced and available: Ifthenumberofcopiesproducedfromtheoriginalcopyrightedworkislowthenittendstofallunderfairuse.Usingthesamematerialsfromsemestertosemesterisnotconsideredfairuse.Note: Posting materials on a Web site is not fair use unless access to the site is limited to registered students.
This information is adapted from the
copyright and fair use rules of Stanford
University, the University of Rochester,
and the U.S. Copyright Office.
To illustrate our point...We blurred-out this well known cartoon character for our handout. While a one-time use in the classroom for instructional purposes may qualify under “Fair Use” rules, it would not be legal to include the image (even with our instructional “scribble” commentary) in the version of the handout that we publish on our Web site.
Basics of Digital Images page 7
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
Start with a Large File then Format for Different Uses
* Most digital cameras save JPEG files. Keep a copy of the original camera file for your archive. Each time a file is re-saved using JPEG compression, the image quality suffers: you do not want to recompress a JPG file over and over. The image will not suffer much being compressed to jpg as the final step before output, but working copies should be saved in an uncompressed format such as TIFF or PSD.
Camera FilesMegapixels & Pixel Dimensions:
Typical digital camera resolutions and file sizes 3.1 MP (2048 x 1536 pixels)JPG HQ 1.0 MB TIFF 18.9 MB
Use GIF or PNG for graphics with solid colorsLogos,graphicsoftext,mapsandcharts,andcartoonsreproducewellontheWebasGIForPNGfiles.
Use JPEG (JPG) for photos or continuous tone images Photographsandgraphicswithasignificantamountofshading,gradients,orcontinuoustonesreproducebestontheWebintheJPGformat.PNGcanalsobeusedforphotosbutfilesizeswillbelarger.
GIF & PNG formats allow for “transparency”Whenyouneedanimagetoappear“cutout”(forinstanceonacoloredbackground)saveitasaGIForPNG.Besuretomatchthe“mask”colortothebackgroundbehindthecut-outimage.PNGcanbeusedforphotographicimageswhentransparencyisrequired.
Original scan or camera image
Smaller size for Web page
Save graphics as GIFs
Save photos as JPEGs
Typical Dimensions for Web Graphics
Banner graphic at top of page: not more than width of Web page Buttons & icons: 10 to 50 pixels wide/high
Thumbnail link: 60 to 100 pixels wide/high In-line illustration: 250 to 350 pixels wide Enlargement: 600 x 500 to 1200 x 800 pixels
(larger dimensions assumes audience has high bandwidth connection and large display)
Basics of Digital Images page 9
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
Choosing the right file type improves download timeSaving the logo below as a GIF rather than as a JPEG results in a smaller, faster loading file, with better image quality.
Saving the photo below as a JPEG also results in a smaller file with better image quality.
Note: TIFF files are shown for comparison only. Most Web browsers will not display TIFF files.
* Download time on a 28.8 kilobits per second dial-up connection
TIFF 168 k 58 seconds*
128-color GIF 20 k 7 seconds*
Medium Quality JPG 4 k 1.3 seconds*
Basics of Digital Images page 10
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
How to format images for the Web, continued...
Make Web pages accessible to all
Provide an ALT attribute for every image “ALT”tagsarealternativetextdescriptionsthatallowsomeonewhocannotseeagraphictounderstanditscontent.ProvidingALTtagsisthefirststeptowardsmakingyourpagesaccessibletoallvisitors.
Use empty ALT tags for decorative or non-content graphicsIfanimageisusedforpurelyfordesignpurposesandithasnoinherentcontent(suchasabackgroundorspacer),makesuretoincludeanempty“ALT”tag.Inthiscasetheimagewillbeignoredbythebrowser,andyourvisitorwillnotbeleftwonderingiftheimagecontainsimportantcontent.
<img src="images/spacer.gif” alt="">
Page in a Graphical Browser
Page with images & style sheet turned off, marked up for Accessibility
Page with images & style sheet turned off, NOT marked up for Accessibility
Basics of Digital Images page 11
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
How to format images for the Web, continued...
Usability tips for large images
Use Thumbnails to link to large imagesForthoseoccasionswhenyoureallyneedtopostalargeimageontheWeb,usea“thumbnail,”orpostagestampsizedimageasalinktodisplayanenlargementonaseparatepageIndicate file size if thumbnails link to very large images
Usability and accessibility are impaired by poorly planned bells & whistles
Use animation only when it adds valueMultimediacanaddimportantvisualinteresttoasite.Itcanbeinformativeinwaysthatstillimagescannot.Butmultimediacanalsomakeasiteslowanddifficulttouse.
For our in-class example, we show a PowerPoint slide where the text “flies in” character by character with typewriter sound effects. It’s slow, inaccessible, and basically, silly!
Basics of Digital Images page 12
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
How to Format Images for PowerPoint or KeynoteTo resize images before inserting into PowerPoint
1. OpentheimageinPhotoshoporanotherimageeditingapplication.a.Croptheimageasneeded.b.Resizetheimage,beingsuretoresample:• 10 inches wide x 7.5 inches high will fill the screen. • 96 ppi is a good resolution for screen presentations(seesidebar).Use150-300ppiiftheslideswillbeprinted.c.File > Save as... andrenamethefile(don’toverwritetheoriginalfile).•SavephotosashighqualityJPGs.•SavelineartasGIFs.(See OIT handouts on Photoshop, iPhoto or MS Office Picture Manager for detailed instructions on resizing images)
2. InPowerPoint,select Insert > Picture > from file ...,findthesavedfileandclickInsert.Theimagewillappearontheslide.Ifitisthewrongsizeyoumaywanttorepeatstepone.(Somefileformats,suchasTIFFwillalwayspasteintothewindowlargerthanexpected.)
PowerPoint Tip: Compress all images in a presentation at once Insteadofresizingindividualimagesinanimageeditingapplicationbeforeaddingthemtoapresentation,youcaninserthighresolutionimages,thencompresstheentirepresentationinPowerpoint.Note:Thisapproachisconvenientbutrequiresacomputerwithadequateprocessingpower.
1. Oncethepresentationiscompletelybuilt,gotoFile > Save As.Note: this command is permanent! If you aren’t sure about how you have cropped or scaled your images, be certain to save a copy rather than overwriting your original.
Using a pixel resolution higher than your projector displays will not increase image quality. It will only increase the PowerPoint file size and slow down your presentation.
Our 10” x 7.5” at 996 ppi recommendation fits the common XGA projector display (1024 x 768 pixels).
For an older SVGA projector (800 x 600 pixels), you may want to down-sample your images to 10” x 7.5” at 72 dpi. (96 dpi images may appear blurry on a SVGA projector.)
When image quality is critical, use an image resolution of 160 ppi; images will look ideal on newer UXGA projectors (1600 X 1200 ) and good on either a SVGA or XGA projectors.
Apple Keynote Options for Reducing Presentation File Size Keynotedoesnotprovideacommandforcompressingapresentation,buthereareafewworkarounds...
• Use automated drawing toolsYoucancreatearrows,calloutboxes,etc.,rightinPowerPoint.
Get the best quality slide show, with the smallest file sizeAslideshowwithtoomanyhigh-resolutionimagesmaybecomehugecausingmemoryproblemsforthecomputeryouarepresentingfrom.
JPG is usually the best choice for photos because the images are compressed, but still look good, especially saved at “highest” quality.
JPG, BMP and PICT insert into a PowerPoint slide at the size you expect.
TIFF and GIF work, but may insert looking larger than expected and will need to be re-sized manually. An additional disadvantage of the TIFF file format is that the files are larger than JPG files (which are compressed). A highest quality JPEG image will look nearly as good as a TIFF, yet will have a much smaller file size.
96 ppi TIFF 204 k
(file size too large)
96 ppi High Quality JPG
120 k
(file size large quailty ok)
72 ppi Low Quality JPG
8 k
(small size poor quality)
96 ppi 4-color GIF
8 k
(small size good quality!)
BEST CHOICE FOR LINE ART
96 ppi TIFF
1.5 MB
(file size too large)
96 ppi High Quality JPG
604 k
(best quality reasonable size)
72 ppi Low Quality JPG
128 k
(lesser quality smallest size)
96 ppi 256-color GIF
400 k
(small size poor quality)
BEST CHOICE FOR PHOTOS
Basics of Digital Images page 14
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
Commercial offset printersOffsetprinting(forbooks,magazines,postcards,posters)usesrosettepatternsofCMYKinks,orSpotcolors(typically2to4distinct“Pantone”inks).Fileresolutionismatchedtoscreenfrequencyorlines per inch.Newspapers85lpi,magazines133lpi,fineartbooks177lpi.Therecipeis“DPI=1.5xLPI”
Cropped, converted to grayscale and resized for print
Work on your image in RGB mode
Consumer appications like iPhoto and MS Picture Manager operate in RGB mode, but in professional apps like Photoshop you have the option to work in CMYK.
Even though most printing devices use CMYK inks, you should still work on your images in RGB mode for accurate processing and for full access to image processing tools. Convert to CMYK only if directed to do so by a printing service, and then, only as the last step.
C = cyan
M = magenta
Y = yellow
K = black
Basics of Digital Images page 15
OIT Academic Computing, Lederle Graduate Research Center, University of Massachusetts http://www.oit.umass.edu/academic 090525mt
How to Format Images to Use in VideoMakethefollowingadjustmentsbeforeinsertingimagesintoavideoeditingprogramsuchasAppleiMovie,MicrosoftMovieMaker,FinalCutPro,orFinalCutExpress.
