Last time I talked about the different types of electronic artwork and the differences between pixels and vectors. Since I spent most of my last post discussing the importance of vectors I thought it fair to give pixels equal time. When it comes to using images and logos to support your company’s branding, it’s important for you to have an understanding of pixels and resolution so you’ll know what your graphic artist is talking about when he tells you he needs “hi-res” or “web friendly” images.
Unless you have professional graphic design software, the artwork you work with is going to be pixel art. If you read my last post on electronic art you know pixels are tiny squares that make up an image. The number of squares used to make your image determine the image’s resolution and how it can be used.
Resolution is measured in “d.p.i.” (for dots per inch). More dots equals higher resolution and larger files. Some applications will let you play with your settings when save an image for specific uses. This helps you optimize your image for quality, size, file size, etc by limiting the number of colors or getting rid of unnecessary pixels.
Different resolution settings are used for different applications.
When you use an image on a website or in a form of online marketing you want it to load quickly so the reader doesn’t have to wait for it to appear. So, web-friendly resolution is low. The standard is 72 dpi. When you have a piece professionally printed you want it to be as clear and crisp as possible. So print (aka high-res) resolution is 300 dpi. If you are printing from your desktop printer you can get away with a lower resolution, usually you’re safe at 150 dpi.
With me so far? Now that you have that, let’s take it a step further.
Resolution isn’t constant. An image’s resolution changes when the image is re-sized. The resolution values I gave you refer to an image at the size you plan to use it, or “actual size”. As the image gets bigger, the image resolution gets lower. An image that is that is 4″ x 4″ at 72 dpi is only around 1″ x 1″ at 300 dpi. The reason for this is that enlarging the image doesn’t add any more pixels, it just changes the size of the pixels you have. You can always make an image smaller by removing pixels, but once you remove them you can’t get them back again. So if you re-size a high resolution image for website use, make sure you save it as a different name so you don’t overwrite your original.
How do I know what size I want?
If you’ve ever purchased stock photography through a service like iStock you’ve most probably noticed you have several options to choose from as far as file size. The options are expressed in pixel dimensions, not inches. If you are using the image for online applications only, you can probably get away with the smallest file. If you’re using the file for a brochure or other printed application use these formulas to figure out what size you need.
Professional Printing:
# of inches wide x 300 = #of pixels wide
# of inches high x 300 = # of pixels high
(Ex. If you want your image to be 2” x 2” your image should be 600pix x 600pix)
For desktop printing multiply by 150 instead of 300, and for web multiply by 72.
Use these settings and you can say good-bye to fuzzy images in your marketing materials, and monster sized files in your e-news and website marketing.
