WEB DEVELOPMENT BLOG

August 09, 2006

Avoid squishy head syndrome: proper techniques for sizing and cropping images

Heidi's head has
been squished

Kevin's head is normal

While I may never regain the finely sculpted cheekbones of my college years, the photo on the above right is not of me after a bad facelift. It's just a photo of me suffering from squishy head syndrome. I'm sure you've seen other examples. Perhaps you've been to the staff directory page for department X. It's a useful page with names, titles and contact information for everyone in the department. The only problem is that some of the people look a bit funny. Either their photos have been squished to the wrong proportions or they've been enlarged and appear to suffer from dermatitis pixeltosis (visible pixelation).

If you're maintaining a page that suffers from one of these problems there are two probably explanations; either your page is resizing the image in the html or the photos themselves have been resized incorrectly. While it may take a little time, each problem is easy to solve.

1: Do not use HTML to resize images

If you've ever published an image on a Web page, you've noticed that the code (as shown below) includes width and height measurements in pixels.

<img alt="Stop squishing my head" src="http://blog.case.edu/webdev/2006/08/16/heidi3.jpg" width="120" height="154" />

One of the reasons we include these proportions in our code is to let the Web browser know what size image to expect as it builds the page. Many people also use these measurements to resize images, however I recommend against doing that for the following reasons.

• Browsers do not resize consistently. Even when your proportions remain true, you may see some distortion.
• Bitmapped images such as .jpgs and .gif can only be re-sized to smaller dimensions. If you try to enlarge an image this way it will appear pixelated.
• If you are using HTML to resize a series of images to the same proportions, when the original images are of varying proportions, your images will look inconsistent and remind users of standing in front of the distorting mirrors in a funhouse.
• While it may seem like you can save time by just loading your existing 1200px x 1600px photo on the server and using HTML to show it as 120px x 160px, you are adding to the time it will take for the file to load. You are also taking up extra space on the server. If your visitors have slower internet connections, and you have a number of large photos, they will notice how long it takes to download them. They may even leave before the process is complete. Taking the time to make the 120px x 160px thumbnails will create a more pleasant viewing experience. If you still want users to be able to view a larger image, then upload both sizes and have the thumbnails link to the larger image.

2: Do use Photoshop—or the image editor of your choice—to resize images

The main thing to remember when re-sizing images in Photoshop is to check the box that says "constrain proportions." This will prevent squishy-head syndrome. If your desired proportions are different than those of your original photo, you will also have to crop the photo. While Photoshop includes a handy cropping function, I find I have more control if I copy my large photo and paste it into a new file that is the desired size. At that point I can manipulate the image to suit. Here is how I would normally do this.

1. Open your original image, and make any color corrections (such as red-eye reduction) that you deem necessary. For this example I'll use this top image of Buddha. If you click on the thumbnail you will see the image at the size I started with.
2. Copy your edited image.
3. Open a new file and set the width, height and resolution you desire. While resolution will vary depending on the monitor, I usually go with 72 pixels per inch as that was pretty standard back in the days I first started playing with the Web. (If you are producing an image to be commercially printed you should use 300 pixels per inch.)
4. Paste your original image into your new file. It should be too big, perhaps all you can see is a leaf or an eye (like the middle Buddha).
5. Using the arrow tool, reposition the image to the approximate center.
6. Under the "edit" menu, choose "transform" then "size." This will allow you to either resize the image manually by dragging on the corner (hold down the shift key to do this proportionally) or to resize numerically by typing a number, such as 40% in the width and height boxes (click the symbol that looks like a chain to keep these proportional).
7. Experiment with size and position until you are satisfied.
8. Flatten your image (under the layers menu) and save it as a .jpg file with the name of your choice.

Now you should have an image, like this headshot of Buddha, that has been properly sized to meet your needs. If you are using a program other than Photoshop, you may need to use different commands, but the same general principles will apply.

Stumble It!

Posted by: Heidi Cool August 9, 2006 02:10 PM | Category: Heidi's Entries , How-to , Tips and Tricks

Posted by: hac4 (Heidi Cool) August 9, 2006 02:10 PM | Comments (0) | Trackback

Marketing & Communications | 10900 Euclid Ave. | Cleveland, Ohio 44106 | Phone: 216.368.4440
© 2004-2008 Case Western Reserve University | Cleveland, Ohio 44106 | 216.368.2000 | legal notice