Sizing Digital Images for Web, PowerPoint and Print
Overview
Size and Compress for Web and PowerPoint
Size for Prints
Overview
Digital cameras and scanners capture images made of pixels (picture elements). Read more about digital cameras...
More pixels generally mean a photo can show finer detail and is "higher resolution". Today's cameras often produce images that are 6 or more megapixels (millions of pixels). A 6 megapixel photo is a large file (17MB uncompressed) which is great for printing but too big for web pages.
The advantage for printing is that printers can show very fine detail and make full use of every pixel. A 6 million pixel image makes a nice 10 inch print.
Web pages, on the other hand, display about 1/2 million pixels. In a web page, megapixel images either do not show full resolution or they appear huge, extending beyond the screen. The large files associated with megapixel images drastically slow down web page loading.
How to Size and Compress for Web and PowerPoint
First, Determine the size of the image needed in pixels. Web pages require specific sizes. Check with your web master. UW-Stout's web pages have select areas where photos are 400 pixels wide or less. In the e-scholar faculty information section, portraits should be sized to 216 pixels high by152 pixels wide.
Duplicate and save your high resolution image before making changes. Work with the duplicate. The original high resolution photo cannot be recovered from a low resolution file.
Open the duplicate image in a program designed for photo editing such as Adobe Photoshop Elements, Microsoft PhotoEditor, Irfanview, Apple Iphoto, etc.
Resizing Steps
Click here to see a Flash movie of the resize procedure using Microsoft Photo Editor.
Click here to see a Flash movie of the resize procedure using Adobe Photoshop Elements.
Below is a description of the sizing procedure using Photoshop Elements 2.
1.Open Photoshop Elements 2 and choose File / Open or File / Browse for File, navigate to and select the image file for editing.
2. With the image file open go to Image / Resize / Image Size. A dialog box will appear showing image size information.
3. Put a check mark in the Resample Image box and Constrain Proportions box.
4. In the Pixel Dimensions section set the boxes labeled Height and Width to "pixels" and type in the number of pixels needed. If changing width and height doesn't produce the correct proportion then cancel Image Size and use the Crop tool.
Click here to see a Flash movie of how the Crop tool works.
You do not need to adjust the Document Size section for screen presentations. The Document Size settings have little effect on a web page or PowerPoint because on-screen size is controlled by software and monitor settings.
5. Click OK to apply the changes.
6. Save and Compress. "Compression" is a procedure applied when the photo is saved. It removes less important data, reducing file size.
In Photoshop Elements choose File / Save for the Web.
Click here to see a Flash movie of the save and compress procedure.
A screen appears showing before and after views. On the left is how the image appears before saving. On the right is the view after saving at a selected file type and compression level.
Underneath each image is the file size in Kilobytes before and after and the time it takes for a file that size to travel through an internet connection of a given speed.
In the upper right are options for file format, compression, number of colors and appearance. It is also possible to resize the image here.
Underneath the word "Settings" is a pull down menu showing file types including JPG, GIF, and PNG.
Choose JPG for photos . Select JPEG as the file type for photos because it supports the millions of colors necessary to recreate subtle gradations of tone. The JPG format includes a variable compression algorithm that is performed when the file is saved. JPG compression is "lossy" meaning it reduces file size by "losing" or discarding data.
Adjust the Quality setting on the right side of the screen from 0 (low quality, high compression) to 100 (max quality, modest compression). Watch the preview images after each adjustment and compare. Determine what the lowest quality setting is that still produces a decent image.
Also check the file size of the compressed image. A desireable goal is to create PowerPoint size files that are 70 KB (Kilobytes) or less and images for web pages that are under 20 KB.
Choose GIF for graphics . GIF is a good format for images containing blocks of solid color such as drawings and logos. GIF also supports a simple type of movement called GIF animation.
In the Photoshop Elements Save for the Web dialog box select GIF instead of JPG or PNG as the output format.
Try the additional options such as choosing Perceptual, Selective, Adaptive and Web and watch the preview to see if the effect is an improvement.
Do the same for Diffusion, Pattern and Noise options.
Try reducing the number of colors that make up the image by choosing 128 or 8 or 4 and watch the effects. Fewer colors reduce file size. Select the lowest number that looks good. In this screen you may select a size for the output file.
Choose PNG for premium quality . Choose PNG - 24 if quality is paramount.
Choose PNG - 8 if file size is to be reduced. Colors are limited.
Click OK.
7. Name and save. Finally, another dialog box will appear where you can choose the location and name the file. Keep file names short, consisting of letters and numbers only. Avoid punctuation or even spaces. Macintosh users should always make sure the name ends with a period followed by the 3 letter extension necessary for Windows to understand the file type (.jpg, .gif, .png). Click save.
How to Size for Print
Begin with the original high resolution image file. Most printers are capable of "photo quality" prints if a high resolution image and photo grade paper are used.
High resolution can refer to an image that contains approximately 300 pixels per inch at a given size. So, if the print will be 10 inches wide then the digital image should be 3000 pixels wide (10 X 300 PPI = 3000). In other words a 6 megapixel image makes a sharp 8 by 10 inch or smaller print. A 3 megapixel camera produces a nice 5 X 7 inch or smaller print.
Click here to see a Flash movie of the print sizing procedure using Photoshop Elements 2.
Below is a description of the size for print procedure using Adobe Photoshop Elements 2.
1.Open the photo. Crop and adjust color if desired.
Click here to see Flash movie on how to use the crop tool.
2. Go to Image / Resize / ImageSize. Uncheck the Resampe Image box so that changing settings will not result in either a loss or unnecessary increase in pixels.
3. Set print size by typing in width or height in the Document Size area. Changing one dimension will change the other proportionally. Typing 10 inches in the width column will result in a 10 inch wide print.
Resolution will automatically change as dimensions are adjusted. Best print quality is at 300 PPI or above. Images as low as 150 PPI may look acceptable.
4. Go to File / Print with Preview.
5. Select Page Setup.
6. Go to Printer Properties. Set paper size and orientation.
7. The Landscape check box should be marked if the photo appears horizontal onscreen.
8. Choose photo paper for best results and set photo paper in the Printer Properties. Also select "best" quality if an option.
9. Load paper. Print.