TUCOWS ARTICLE

How To Correctly Resize and Crop Photos

If I had a dime for every photo I've seen online that's "squished" or pixelated due to a poor job of resizing, I'd be retired. Here's how to avoid some common photo-editing mistakes.
Published: Apr 24, 2008
Author: Jordan Running
Related OS: OS X / Windows / Linux

Every day on the web I see examples of poorly resized photos. It's unfashionable to say that there's a "right way" and a "wrong way" to do something with a computer, and to novice eyes the difference may not be immediately evident, but properly resizing a photo is not difficult and makes your pictures appear more polished and professional. The best way for me to show you what to do is to first show you what not to do, so let's begin with some common mistakes.

Mistake 1: Squishing and stretching

In Windows when you want to resize a program window, all you have to do is click on its lower-right corner and drag it until the window is the size you want. A lot of people apply the same tactic when resizing photos in an image-editing program. In doing so, unfortunately, many users mess up the images's "aspect ratio." Aspect ratio refers to the ratio between an image's width and its height. For example, an image that's 800 pixels wide and 600 pixels tall has an aspect ratio of 1.33:1 (800 divided by 600 is 1.333...), or 4:3. When you change an image's width by an amount disproportionate to the amount you change its height by--as people often do when dragging and image's corners--that changes its aspect ratio, and the resulting image looks "squished" or "stretched." Here's an example:

'Squished' photo Properly resized photo

I started with a photo with an aspect ratio of 4:3. The photo on the left I resized without concern for its aspect ratio and ended up with an image whose aspect ratio is closer to 4:3.5. Not a big difference, but the man's face looks distinctly "squished." For the photo on the right I used an image-editing program's Resize dialog, which has a built-in "Lock aspect ratio" function which automatically calculates the correct width when you enter a height and vice versa. Most image editors have this option. Many image-editing programs are also able to maintain an image's aspect ratio when you're resizing using the click-and-drag method. You can find out by reading the program's documentation, or by experimenting: Often holding down the Ctrl, Alt, or Shift key (or some combination) on your keyboard will "lock" the aspect ratio of the image while you drag its corners.

Mistake 2: Squishing instead of cropping

What if you want to make an image narrower but not shorter, or vice versa? The most obvious way to do this is to grab its edge and drag, just like you do with program windows. But doing so changes its aspect ratio, resulting in "squishing." Avoid this. What you need to do is use the Crop tool in your image editor, which lets you make an image smaller by "cropping out" the unwanted portion. Say you wanted to take the picture of the man on the right above, which is 200 pixels tall, and make it square instead of rectangular. Here's two different ways you could do it:

'Squished' photo Properly cropped photo

The picture on the left was resized by simply dragging its edge until the photo was square, which resulted in an obvious "squish" effect. The one on the right has been reduced to the same size using the Crop tool: By removing the left and right portions of the photo we were able to produce a square image without squishing and without losing much of the actual photo.

Mistake 3: Resizing in an HTML editor

Sometimes a program's features can actually work against the user. Such is the case with many HTML editors and web page design programs like Dreamweaver and FrontPage. Many people, when creating a web page in a so-called WYSIWYG ("What You See Is What You Get") editor will drag a photo or image onto the page and then change its size by dragging its corners. I already told you in the previous section one danger of click-and-drag resizing, but HTML editors introduce a new problem: Many of them don't actually resize the image--they merely change how big it appears in your web browser. That is, it doesn't change the image file at all, it merely gives the image attributes in its HTML code that tell the web browser to show it X pixels wide and X pixels tall. That doesn't sound so bad, but there are two big issues it causes:

First, when a person views a web page that has a photo that was "resized" in this manner, they do not download a smaller version of the photo. They download the original image at its original size, and most digital cameras produce images whose files are many megabytes. This can take a long time even on a fast connection, and if your web host bills you by the megabyte or imposes a limit on the number of megabytes it will serve per month, this can quickly become a problem, or at least an inconvenience.

Second, since the user downloaded the original photo at its original size, it is up to the web browser to change its size when it is displayed on the screen. Web browsers are optimized for speed, which means when they resize an image to show on your screen, they do it in the fastest way possible, and unfortunately this does not make for the most attractive result. Here's another example:

The photo on the left was resized in the fast manner of a web browser. Compare it to the one on the right, which was properly resized in an image editor.

Photo 'resized' in browser Properly resized photo

As you can see, the photo one the right--done correctly in an image editing program--has smooth lines on the man's forehead and along his shoulders, and his hair and beard look natural. But in the photo on the left--the one resized on-the-fly by a web browser--the man has a jagged effect on his forehead and shoulder, and the fine details of his hair and beard have become pixelated.

The solution to this sort of problem is always make sure you use the image file's actual pixel dimensions in your HTML editor, and if you want the image to appear a different size on the web always change its size using an image editor.

Image editors to try out

Now that you know what to do and what to avoid when resizing images, you might be wondering what tools are best for basic photo editing. Here's a round-up of a few of my favorites:

  • Picasa - A free download from Google, Picasa is great for all-around photo correction and editing and includes ample tools for resizing and cropping.

  • Paint.NET - A free, open source image editor with lots of features for image manipulation and photo editing.

  • Paint Shop Pro Photo X2 - Corel's photo-editing suite is packed with features and has a retail price tag of $79.99. It's overkill if you just want to do basic photo editing, but great if you're interested in more advanced techniques.

  • IrfanView - One of the oldest and most popular free image editing tools, IrfanView includes batch processing for editing many images at once.

  • Picnik - A relatively new and completely web-based tool, Picnik lets you edit your photos from within your web browser and then send them directly to photo-sharing and social networking sites like Flickr, Photobucket, Facebook and MySpace.


About Jordan Running

Blogger since 1999, Jordan Running went pro in 2005 and never looked back. Sometimes programmer, occasional photographer, and serial tinkerer, he decided to to switch to Linux in 2001 but just hasn't quite gotten around to it yet.

Digg This
Please login to add your comment
Leave A Comment
Name: