Image Resolution. Or, Can You Just Take My Logo From My Website?

Let’s talk image resolution. Please note, we’re talking here about raster art. Vector art, discussed in another article, is completely scalable to any size. Raster art is made up of tiny little boxes of color, like a mosaic.

Any graphic artist will tell you that nothing strikes more terror in his heart than hearing a client say, Just take my logo off of my website.There’s a reason for this. I promise you, we’re not just prima donnas.

Why image resolution matters

Your computer screen can read 72* little blocks of mosaic color pixels per inch of screen space, or 72 pixels per inch — ppi. Check out this ladybug. It was created at a size of 72 ppi and it’s an inch big, so there are 72 pixels across each row and 72 pixels down each column.

When I take this same picture and make it bigger, it’s going to start to get weird, because it only contains 72 pixels each direction, and it’s not meant to be bigger than that. I told it to display at 300 x 300 ppi, but it was created at 72 ppi, so your screen is stretching it. There’s not enough information in that graphic. See, you can see ragged edges — that’s called pixelization. It’s obviously not as clear as the other picture.

Here’s an animated picture of the same ladybug. (This is going to open in a new window. When you’re finished looking, close the window, and you’ll be back here.) I’ve taken those 72 pixels and blown them up. As you see, there’s only so much information in that graphic. At the end, you’ll see that we’re looking at the same 72 pixels. If you blow them up, you’re just distorting the picture.

Here’s the thing. While your computer screen has a resolution of 72 ppi, printers require higher resolution. The HP or Epson on your desk may say it prints 600 x 600 or 1200 x 2400. If you take our ladybug and print it at one inch, it will look pixelated because your printer requires more than 72 dots per inch.(Print images are referred to as dpi — dots per inch.)

That being said, your HP or your Epson is somewhat forgiving, and it will try to print your ladybug as nicely as it can. Commercial printers are not forgiving. Commercial printers prefer 300 dpi and require 220 dpi. And those commercial printing presses are NOT very forgiving. If you don’t provide good art, your art’s going to look BAD when it’s printed.

So some people try to fake out the system. They take the same low res ladybug and just divide the image into more pixels to get more dot per inch. Doesn’t work! Because that original image only contains the information that it contains. You can’t add what’s not there.

One last image resolution demo. Check out this picture, on the left. Any idea what it is? When you click on it, you’ll get a bigger version, and you’ll see all of the details. (This is going to open in a new window. When you’re finished looking, close the window, and you’ll be back here.) Once you make it smaller, you lose detail, as you see here. You’ve removed some of the information. If you take that smaller picture, and you just try to blow it up, that information is gone, and you’ve lost the detail. See a demonstration of that.

*Depending on your monitor’s resolution, it may be able to read more than 72 ppi. It may be able to read up to 100 ppi. But for the sake of this discussion, I’m going to use 72 ppi, because it’s the lowest that you’re likely to encounter.