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).
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
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)
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 email@example.com