skip navigation

Be sure to display your photos with care

By Loren Nelson, 08/13/14, 9:00AM CDT


Position-specific photo cropping is a basic, and often overlooked, fundamental.

Through years of trial and error (mostly error) shooting sporting events we've come to appreciate great photography. We know that capturing that quintessential action or celebration shot can be exceedingly difficult. Settings have to be dialed in, positioning needs to be perfect, lighting conditions have to be just so, and, of course, you must get that shutter blinking at just the right moment.

Illustration 1 (Player losing his head)

Unfortunately, not every gorgeous photo travels from the camera to the web unscathed. We see many, many websites with poorly cropped photos, most noticeably in the homepage news slideshow aggregator.

This isn't anyone's fault. Most often, photos are scaled and cropped automatically as they are loaded on a site. And that system usually works just fine. But not always. The example above (Illustration 1) shows the celebrating player at the top of the photo being decapitated. Poor fella.

Here are some quick steps to avoid bad crops (we're using a Mac and Chrome for this tutorial).

Determine the exact size of the photo as it will appear on your site.

To do this, make sure you are in User mode, then right click on a photo that is the same position on the site as the one you want to load. Chose the "Inspect Element" option. Place the arrow or cursor over the div class that shows the size of the element housing your photo on the site (Illustration 2). In this example, the actual photo being used was sized at 600 by 439 pixels, but this slideshow element has been set to display photos at 630 by 394 pixels.

Illustration 2: Determine the exact size of your photo

Crop your photo

If you don't have Photoshop (Illustration 3) loaded on your computer, do not despair. There are plenty of free programs that will allow you to crop your photo to a specific size. I've had good luck in the past using Gimp, as one example.

Illustration 3 (Make your crop)

Load the freshly cropped photo

Now that you have your photo sized properly, it's just a matter of attaching it to your article, then checking your home page to ensure it looks correct (Illustration 4).

Illustration 4 (A cause for celebration!)

If you have any questions or need help getting your photos cropped and loaded on your Sport Ngin site, contact

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts