The Image Quality Rises

July 9, 2013   by Serge Knystautas

We're pleased to announce that this week, your photos will start to look sharper on your website. This is part of version 5.3.0 that will go live to everyone shortly. This will affect both the cropping tool and any thumbnails that we're automatically generating for you.

We all know that high-quality photos are an important part of any sports website. The more you can see of those blades of grass, the sweat from the heat of competition, the creases in an athlete's brow, the better.

Challenges of resizing images

When resizing images, there are a lot of tradeoffs that you can make. The two key issues we were wrestling with are:

  1. Speed vs. Quality  the more time you give a computer to resize an image, the better job it will do. While we all want the highest quality possible, that translates into slower image uploads and, on occasion, slower loading of images in your browser. We previously had been using a "middle" setting for this balance but have now opted to spend that extra time to get a higher quality result.
  2. Pixelation — When you resize images, there are some tricky calculations to figure out what color to make each pixel based on the pixels that surround it. This is most visible when you're resizing by anything other than 2:1 because then you have to blend images. One technique that generally improves quality is to slightly smooth the image during the resizing. This helps avoid pixelation, which are those jagged lines you see in a photo that is poorly resized. We're using a new approach that iteratively resizes the image and limits how much this smoothing will impact the photo. The result is sharper image without pixelation. 


Results

We've taken a men's lacrosse photo by Greg Wall, who took some photos of the Le Moyne men's lacrosse championship game. We'll zoom in on one section of the photo to show you the differences.

Original image

You can see lots of detail in the original image, and we wanted to get as much of that to come across.  Here are the before and after images.  Some key differences to look for:

  • The shoe laces are blurrier on the left.
  • The grass in the foreground looks more blended on the left.
  • You can see more hair on the leg in the right photo.
Before After

 

After this change goes live, we will begin to work through sites over the rest of the week to generate the new higher-quality images. There is nothing that you need to do.

Please let us know what you think and if there are other ways we can make your photos better.

Follow Us

Archives

Search