Josh Feit, for Dynamic Internet Solutions

[View full article here]

Pro photographers and graphic artists whittle away their professional hours snapping perfect images, placing them deliberately onto their pages, and aligning them with other design elements until their layouts feel natural and settled.

That’s nice. But for the rest of us, we have better things to do than pore over website photos for hours at a time. So, here is a quick-and-easy guide for turning your raw photographs into beautiful website images that engage your readers and promote your message.

Pixel Primer
We generally think about measurements in inches or centimeters, yards or meters, miles or kilometers. That works well in the tangible world, but the nature of computer and device screens requires a different system altogether.

Computers create images by firing thousands of tiny light dots at their screens. One such dot is called a pixel, a spot of color so small that the human eye can barely detect it. But our monitors display a crazy-quilt of these color dots all at once, and our eyes interpret this micro Lite-Brite as a single, cohesive image.

The laptop open in front of me, a 13 inch Macbook Pro from 2012, has a native resolution of 1280x800. Stay with me -- all this means is that the monitor has 1280 columns of pixels from its left edge to its right edge, and 800 rows of pixels from the bottom to the top.

Just like finding the area of any rectangle, multiply the width times the height to learn that my monitor has a grand total of 1,024,000 pixels. That’s a lot of dots. But prepare to have your mind boggled... that $99 inkjet printer perched next to the monitor is able to produce nearly four times as many color dots, inch-for-inch.

Now, let’s bring a digital camera into the mix. I recently visited Yosemite National Park, and I shot a decent photo of Upper Yosemite Falls.

Here is the raw image, downloaded directly from my consumer-grade Kodak digital camera.

If I only wanted to display the photo on my computer’s desktop as a wallpaper background, my camera would only need to capture the image with 1280 columns of pixels (width) and 800 rows of pixels (height). And it would look something like this:

But the good folks at Kodak know that I probably will want to do a lot more than that: maybe make a few 4x6 photo prints at the pharmacy, and perhaps even blow it up to 10x14. Kodak knows that I will need a lot more pixels to produce these prints than I will require for my computer monitor display, so my five-megapixel camera captured an image that was 3264 pixels (px) wide and 2448 pixels (px) high -- enough data to produce a crisp print for my living room wall.

If I were to display the original, huge Kodak image on my laptop without resizing it at all, this would be the result:

Clearly, some cropping is almost always needed to make sure an image has a maximum visual impact.

Understanding Aspect Ratio

Most consumer cameras take photos that are four units wide and three units high (4:3). This has nothing to do with the exact number of pixels it captures; it is merely a ratio, or relationship between the width and the height. This means images can be 1000 pixels x 750 pixels, 6 inches x 4 inches, or 10 centimeters by 7.5 centimeters, and they all have a dimension relationship, or aspect ratio, of 4:3.

Brace yourself for a little retro math. My Macbook Pro’s screen has a width of 1280 pixels and a height of 800 pixels. This ratio of 1280:800 can boil down to 8:5 (divide both of the original numbers by 160). My camera’s ratio of 4:3 could also be understood as 8:6 (multiply both of the original numbers by 2).

That’s a little thick for my mind, but here’s the bottom line: when I resize the original Kodak image (8:6) for my Macbook Pro’s screen (8:5), I am going to have to chop some of it off to make it fit.

Cropping and Scaling

Photos for websites work the same way -- images must be cropped (chopped to fit the aspect ratio of the image container) and scaled (shrunk) in order to fit into specific areas on a web page.

Cropping: Window in a Wall
Imagine that you have rented a cabin in Yosemite National Park, and while you are doing dishes at the kitchen sink, you look out the window to this view:

Your view of the scenery is limited by the size of the window, which means your kitchen vista reveals only a portion of the actual landscape. In essence, your window is cropping the actual image down to the size of its edges.

Scaling: Photo in a Frame

To fit all of that Yosemite glory onto a souvenir photo print, I have to shrink the image to fit a 14” x 10” opening in a picture frame. As with the laptop monitor, 14:10 (or 7:5) is a different aspect ratio than 4:3, so when I scale the image to fit the frame, some cropping must occur to make it work.

Scale, Don’t Stretch

The most important rule when scaling photos is to shrink them in proportion, keeping the aspect ratio the same and cropping out some of the image to fit the frame. When scaling an image, change its dimensions proportionally. Never, never, never change its original aspect ratio!

How to Successfully Scale and Crop an Image for Your Website

Step One: Identify the Dimensions of Your Image Frame
An essential step in sizing your image for the web is understanding the dimensions of its container. From here, you will learn how to size the Yosemite Falls image to fit into the red rectangle frame in the simple mockup below.

In this example, the frame is 600 pixels (px) wide by 300 pixels (px) high. Remember these numbers, because you will need them in a minute.

(Keep in mind that the first number in an image dimension is always the width, and the second number is always the height.)

Step Two: Scale the Image to Fit the Frame
Unless you are up for a good bit of math, it is time for a little trial-and-error (my preferred method). The original Kodak image is 3264px (w) x 2448px (h). If you scale the image height to the size of the frame height (2448px becomes 300px), then the proportional width of the image becomes 400px. The image frame is 600px wide, so this approach will leave a good bit of the image frame empty.

Instead, try scaling the image for width. If you shrink the image to the image frame’s width of 600px, its proportional height becomes 450px -- plenty to fill the image frame, with some left over.

Step Three: Crop the Unneeded Parts of the Image
It is time for a little artistic flair. Channeling your inner Ansel Adams, you get to decide which portion of the image is worth saving. The only rule is keeping the image’s aspect ratio intact. Here are some ideas for cropping this image to the red website frame:

Notice how the photo takes on a slightly different aesthetic as its cropping changes. There are no rules about how to crop photos; simply keep their aspect ratio intact and chop an image to fit the frame and please the eye.

How This Works in Site Manager

To see how resizing and cropping works in Site Manager, we are going to use the example of a Slide Show Tool. The Slide Show Tool is one of our Site Manager tools which allows you to crop your photo right in Site Manager.

All slide show tools have a default setting size; design site home page slide show tools have very specific sizes set. Most slide show tools in the main body of your website has default settings of 400 pixels wide by 267 pixels tall. You can change this if you want to make the Slide Show smaller or larger (change default size is only available for inside pages or DIY home pages).

This where the crop tool within the Slide Show tool becomes handy. As long as you are working with an image which is larger than​​ 400px by 267px, the next step will be to crop that image. 

You can drag the box around to select a different part of the image, or make the box larger or smaller, until it's cropped how you prefer. 

Once you have it selected how you like, all you need to do is hit the "Crop Photo & Finish" button. 

A Checklist for Successful Photo Sizing and Cropping

1. Learn the pixel dimensions of your website’s photo frame, although this is not necessary for some of the Site Manager tools with built-in cropping, such as the Slide Show tool. 
2. Select a beautiful photo that has dimensions larger than or equal to the photo frame.
3. Scale the image so one of its dimensions equals the respective pixel dimension of the image frame, keeping the image’s aspect ratio intact.
4. Crop out the extra portion of the photo, so the second dimension equals the second dimension of the image frame.
5. Upload the scaled and cropped image to your website, and enjoy the beautiful result.

Quick Tips

1. Always keep an image’s aspect ratio intact when scaling.
2. Images can always be made smaller, but never stretch an image bigger than its original size. (If you do, the image will become grainy and blurry.)