propersize

Producing Quality Images for the Web

Have you ever tried e-mailing a digital photo (image) to a family member or friend only to realize that the image is bigger than your screen? Or the file size is so large that the e-mail responder rejects it? If you recognize some of these miscalculations - fear not… in three easy steps you will be able to resize all your digital images.

*Note: for these tips I will be using Adobe Photoshop, in my opinion the best digital imaging software available. It’s like having a darkroom without all the chemicals. If you are serious about digital photography and producing the very best digital images, the investment in Photoshop in the long run is worth the money.  If PhotoShop is not within your budget, there are lower priced software options available.  The good news is, virtually all of these programs have the functions necessary for completing this particular project.

For Web/Email Screen Display

Whether you are using a lower-end (2 to 4 megapixel) camera or a higher-end model featuring 5 or more megapixels, you will want to achieve the same end result – quality images. A standard image for e-mail or Internet use is 72 PPI (Pixels per Inch). This translates to 72 pixels for every 1-inch of linear screen space you see on your screen. There are speculations on this between photographers, graphic designers and video production houses. The arguments vary anywhere from 72 to 150 PPI for screen use. For the purposes of this article, we’ll keep things simple and avoid the various “Dots/Pixels Per Inch” theories by going with 72 PPI. This resolution will allow your image to fit nicely on the screen and keep the file size small; important factors when e-mailing or using photos for online auctions.

For this demonstration, I will be using is a Sony Cyber-Shot DSC-S40. Let’s start off by opening our image in Photoshop and checking the maximum size the camera produces (The photo selected is of a loupe sitting on my desk; chosen so you can see how the detail in the wood will remain during conversion).

Here is our original: 2304x1728
(Click the Image to see it in full size; 1.6MB)

PhotoShop Commands Click on - Image/Image Size (Here we see Pixel Dimension, File Size and Document Size. Note that while Document Size shows 32”x 24”, the Resolution -72PPI - is suitable for web viewing but not for printing) The largest image we can achieve from this 4.1MP is 2304x1728. If we wanted to print this image at a quality 300DPI we would get a maxium print of 7"x5". (Article: Printing Quality Digital Prints explains how to calculate print sizess.) You can print the image larger (8x10), but the quality reduces from a close-up (6” viewing distance), to an arm-length view (12”-24” Distance) because you are stretching the pixels beyond their color barrier.

Sizing an image

An image size of 400x300 pixels will fill the screen nicely, giving plenty of room to see the details without taking up the whole screen. We are not concerned with document size since this image is not going to be printed. Once you type in 400 in the Width area the 300 Height will convert automatically because Constrain Proportions is checked. This demonstration is just for image resizing. We don’t have to worry about cleaning up the artifacts on the image either; we just need to resize this image for web/e-mail use.

Example 1	Example 2	Example 3

In order to save the image, we have to convert it first from Photoshop for web/e-mail use. Click on File/Save for Web (Example 1)

Once inside the “Save for Web” area, we can really work on the file size and compression ratio. An image size of 50k will hold the detail and also make a nice small size when e-mailing or putting the photo online for Web viewing. Click on the small arrow above optimized. Then select Optimize file to size. Once the box appears type in 50 for file size. Later on you can go back and experiment with different file sizes and observe the loss of quality as the image sizes are compressed and file size is reduced. (Example 2 & 3)

The two most common methods for describing graphics on a computer are bitmaps and vectors. A bitmap is a way of describing the color of each point in a picture. This is great for photo-realistic or rendered images. A vector file describes how to draw a picture using lines, arcs, polygons or other objects.

We will save this image as a JPEG file.  Saving the shot as a JPEG or JPG will preserve the details of the photo better than saving it as a GIF.  The GIF option works best for vector-based images.

Here is our final image, ready for email or online viewing

Format: JPEG - Dimensions: 400w x 300h - Size: 48.52K - Quality is 75% compression

Photoshop Commands Used

Menu: File
- Open: (select image to edit)
Menu: Image
- Image Size (adjust size)
Menu: File
- Save for Web (final process)