The Resolution Will Not Be Televised: Digital Images Explained

Everybody knows a picture is worth a thousand words. What few realize is that posting an ugly picture with poor resolution online is still worth a thousand words, and they’re all awful (starting with “gruesome,” all the way through “odious,” “vile” and “Kanye”). Here’s an example of what happens when you’re not careful with your digital image sizes:

Pixelated plumber photo

Usually it doesn’t turn out this well.

A great many sites on the Internet ask users to upload images, to be used as logos, profile pictures, background images and headers at the top of blog posts. Many of these upload forms will suggest a minimum image size, but many won’t stop you from uploading a tiny picture when a large one is required. What’s the difference? We’re glad you asked.

Pixels and image dimensions

No matter what device you’re using to read this post, you’re looking at a screen that’s composed of pixels, those tiny squares of color you can see if you get a little too close to the screen. Thanks to the nature of the human eye, we can’t pick them out individually unless we’re close up, and even though each pixel only displays one color, they blend together to form all the information on our screens.

Image dimensions are defined by the number of pixels they’ll take up on a screen, written with a set of number like “1200×800,” or 1200 pixels wide by 800 pixels tall. The size is constant no matter what screen displays the image, and that’s useful for planning a website or making an online ad. As we’ve seen previously, using an image that’s too small in an area that’s too big leads to distortion, pixelation and a bad-looking product. Why does that happen? It all comes down to resolution.

Resolution and digital images

Digital images are willing to be pushed around a bit. They can be stretched out and made to fill any space, whether it’s too big, too wide or not wide enough. But any time an image is made to fill a space that’s different than its original dimensions, it becomes distorted. In mild cases, the image will look blurry. When it’s bad, the image will become pixelated. Check out the progression that we’ve done to this nice man who probably didn’t deserve it:

Digital image degradation example photos

Lookin’ fancy.

  1. We started with an image that’s 500×500 pixels, the image in its natural state.
  2. Now we’ve tried to fill the same area with a version of the picture one-fifth the size.
  3. And smaller.
  4. And even smaller.

These distortions happen because smaller photos have a lower count of pixels per inch (PPI). The more pixels in a space, the easier it is for the eye to process it as a complete image. When we expand the image outside its dimensions, we’re reducing the PPI of the image itself, which leads to the pixels becoming visible and the photo looking like a Minecraft screenshot.

An easy rule for never thinking about this again

Handling PPI and image dimensions can become second nature, but if it’s not your thing, there’s an easy way to avoid dealing with it: use big images.

Digital images don’t like scaling up, but they scale down like champs, which is why high-resolution images are preferred when dealing with web designers, print media outlets and most any other service that uses digital photos. Large photos can be scaled down to fit into any space required for a marketing campaign, whether it’s an online ad, a website header image or a big ad in the paper, and they’re much easier to work with overall.

So how do you find images for your project that have a reasonable resolution? We’ll talk about that in part two!