Resolution Revelation - Radiant

The Radiant Blog

Resolution Revelation

I am nearing a decade into my career as a professional designer. In this time I have dealt with many questions from clients on an array of issues. Today I want to address the two things that I have explained time and time again. The first being what is dpi and resolution? The second is what is the difference between bitmap art and vector art? I believe for many of you this will be a revelation and greatly increase your understanding of design in the print and web world.

First I need to establish some definitions:

DPI – dots per inch: a measure of resolution used for printed text or images, the more dots per inch, the higher the resolution.

Resolution - the degree of sharpness of a computer-generated image as measured by the number of dots per linear inch in a hard-copy printout or the number of pixels across and down on a display screen.

Bitmap – A set of bits that represents a graphic image, with each bit or group of bits corresponding to a pixel in the image.

Pixel - the smallest element of an image that can be individually processed in a video display system.

Vector – a quantity possessing both magnitude and direction, represented by an arrow the direction of which indicates the direction of the quantity and the length of which is proportional to the magnitude. (to simplify, this essentially means lines have length and direction)

So now that we have all the pieces of the puzzle on the table, allow me to put it all together for you. When it comes to print, DPI is king. If any work is going to be printed, 300 dpi is the standard. You can print something at less than 300 dpi but it can become noticeable at anything below 200 dpi. In the web world, everything gets produced at 72 dpi. The reason for this is file size. A 300 dpi file is much larger than a 72 dpi file and therefore would greatly inflate the size of web pages and the time it would take to load them. Also, screens are designed to only display 72 dpi which would make it much more inefficient to make web graphics any larger.

Moving down the above list we arrive at the terms bitmap and pixel. These two words directly tie into resolution and dpi. A bitmap image is made up of pixels. If you have ever been in Adobe Photoshop and zoomed into an image as far as you can, you have seen pixels. All the pixels in an image collectively make up an image or bitmap - the higher the resolution, the more pixels that are in the bitmap, which makes a higher quality image.

Lastly, what is a vector-based graphic? A vector graphic does what a bitmap graphic cannot. Vector graphics can scale infinitely without losing any sharpness or quality. How can this be? It is not made from pixels, it is made from lines and points that enclose an area and can have colors, outlines or some other effect added to it. It is essentially a graphic made entirely out of math, therefore making it scalable. So why can’t a bitmap be scaled up? Basically you’re asking the computer to make up information that doesn’t exist in the image and the computer has a hard time deciding which pixels should be added to the image to complete it. Imagine you have an image of a tree. The computer only know there are pixels there, it doesn’t know the pixels form a bitmap that looks like a tree.

So to conclude all this information tells you why you can’t take your logo off of your website and expect it to be used on a billboard or why your banner image on your website can’t be used on a brochure. So in the future if you work with us and we ask you for a .psd, .jpg or .tif we are asking for a bitmap image. If we ask you for an .ai or .eps we are asking for a vector image. Now go out into your church or ministry with your new found knowledge and make graphic disciples of your staff and co-workers. Please post a comment if you have any further questions. I would be happy to answer them.