Resolution. Or, Why Can’t You Just Take My Logo From My Website?

1 08 2010

Okay, we’ve talked about vector art vs raster art.

Now we’re going to talk about resolution. Please note, in this discussion we’re talking about raster art. Vector art, as we know, 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 being prima donnas.

Lady Bug 1 inch squareYour computer screen can read 72 little blocks of mosaic color dots per inch of screen space, or 72 dots per inch — dpi. Check out this lady bug. It was created at a size of 72 dpi and it’s an inch big, so there are 72 dot across each row and 72 dot down each column. If you right click that picture and view properties, you’ll see that it’s displaying at 72 x 72.

Lady Bug too big!When I take this same picture and make it bigger, it’s going to start to get weird, because it only contains 72 dots each direction, and it’s not meant to be bigger than that. Right click it and view properties and you’ll see that it’s displaying at 144 x 144. By it was created at 72 dpi, so your screen is stretching it. There’s not enough information in that graphic. See, you can see ragged edges — that’s called pixalization. It’s obviously not as clear as the other picture.

Okay, here’s an animated picture of the same lady bug. (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 dpi, 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 lady bug and print it at one inch, it will look pixelated, because your printer requires more than 72 dots per inch.

That being said, your HP or your Epson is somewhat forgiving and it will try to print your lady bug 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 lady bug 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.

small version of a beehiveOne last thing resolution demo. Check out this picture, on the left. (This is going to open in a new window. When you’re finished looking, close the window and you’ll be back here.) Any idea what it is? When you click on it, you’ll get a bigger version and you’ll see all of the details. 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.

I think that’s enough about resolution for right now. Stay tuned, there’ll be more about resolution and more about vector vs raster, down the line.

As always, please let me know if I can clarify anything!

:)Sj