Why the heck do you want to know about image resolution? It actually pops up all the time, and is one of the most commonly misunderstood topics in world of digital design (for both print and web).
- Did you send your logo to the printer for production, and it came out all “fuzzy” or “grainy”?
- Are you’re trying to figure out what files your designer should supply you with?
- Maybe you’re trying to determine the best image size to upload to your website while balancing quality image display and bandwidth.
These are just some of the reason why you need to understand image resolution… and image formats. You see, some image formats are resolution INDEPENDENT, while other are resolution DEPENDENT.
Lucky for you, I’m about to explain the differences, and make you sound like a pro the next time you handle your images! Let’s talk about both image resolution and images formats.
What’s image resolution anyway?
Simply put, image resolution is the quality of the image based on the amount of detail it holds. It defines the number of pixels in the image, dispersed over the width and height of the image. Resolution of an image is defined at the time the image is created, and determines how large (and on what device) it can be effectively reproduced.
What makes an image a high resolution image?
Typically, when someone is requesting a high resolution image, they are asking for a 300ppi image at the full size it will print out at. And technically, “high resolution” images means the image contains enough detail to resolve effectively on a given device. Here’s an example of the confusion:
A while ago LinkedIn confused a few of my clients by requesting a “high resolution” logo for their profile updates. Really, they just had the opportunity to upload a highER resolution image. And a lot of people ended up trying to upload press quality images to their LinkedIn profiles instead!
You see, while people talk in terms of “high resolution” and “low resolution”, it’s all about really “appropriate resolution” based on the DPI or LPI of the output device.
What is PPI
PPI just means Pixels Per Inch. This is the unit of measurement used when discussing the resolution of and image. Many people confuse this with DPI, but an image cannot contain DPI, only PPI.
What is DPI
DPI is Dots Per Inch and is a measure of printing resolution. When a printer “prints” it’s really just laying down dot’s of ink (or toner). The more dots per inch, the closer each dot is to each other, and the smoother the overall appearance of the output is.
When a vector image is sent to a printer, it is rasterized (turned into a raster interpretation of the vector information) at a resolution suited to the DPI of the device.
What is LPI
LPI refers to Lines Per Inch and is a measurement of printing resolution (and has been around long before computer aided graphic design). It refers to the quality of the halftone dot that is used to produce the illusion of shades of color. Printers can only print solid amounts of ink. They can’t put down just a light shade of ink. But, by printing a few dots of solid ink, they produce the illusion of shades. The higher the LPI is, the smaller the halftone dots are, and the less likely you are to see them.
To make things a tad more confusing for the industry, a single device, that produces halftone dots, can output with various DPI and LPI. The higher the DPI, the higher quality of the halftone dots and line art images. The higher the LPI (i.e. the more lines of halftone dots per inch) the less likely you are to see any halftone dots.
DPI vs PPI, what’s the difference?
I touched on this up above, but wanted to point out that DPI and PPI are NOT THE SAME THING. It’s also a pet peeve of mine when people in the industry request a XX DPI image…. images have pixels, not dots!
PPI = measures the potential detail in an image
DPI = measures the quality a device can display an image
Image formats explained:
First, let’s be clear that this is about the graphic format (how the digital art is generated), and not file formats (how the final art is saved once created). In most cases any type of graphic format can be saved as almost any file format (like PDF or JPG). Let’s look at the two graphic formats, and then the file format point will be crystal clear!
When dealing with images, there are two graphic types to consider:
- Vector (resolution independent)
- Raster (resolution dependent, also called bitmap image)
What is a vector image?
Vector images are all based on mathematical expressions. They are based on paths (vectors) between two points (nodes) on an X Y axis. So, when you draw a curve in a vector graphic program, you are actually “telling” the software to: “output a curve of this degree starting at this point, and ending at this point.” Since all of the information defining that curve resides in the file, the vector image is resolution independent. That means you can scale it to any size, and output it to any device (a large format printer for a billboard, or a super small web icon) and the output device will handle all of the resolution calculations for you, based on the XY axis. Pretty cool and a bit geeky, huh?
Vector images have the potential to look fantastic no matter what the resolution of the output device, but there are some technical points to address in order to ensure the quality of the output. Lucky for you, the print provider will typically handle all of this—you just need to provide the file. There are however some cases where the art needs to be adjusted for (or rather, prevented from being altered by) specific output devices.
- Scaling an image can have some unforeseen effects based on the relationship to a stroke and a fill on a vector. I explain this in detail here as relates to scaling Adobe Illustrator images.
- Vector programs (like Adobe Illustrator) have the ability to create raster effects on your vector images. These elements, such as a drop shadow, will be raster—even though the rest of the image is vector. The good news is that the resolution of the raster images can be redefined prior to output, without any loss in quality, from the native vector graphics program.
Vector images can be saved as the native format for the program they were created in, or exported for use in other programs, and for output. (See the file format chart below for a list of file types that support vector graphic data)
What is a raster image?
A raster image is an array of individual bits or pixels (picture elements) arranged on a grid. These files are resolution dependent (their quality is determined at the time of creation) and have an absolute resolution (you can’t add more quality once you have the image). This quality is expressed in terms of PPI (pixels per inch)—simply the amount of detail originally captured and saved on disk.
In addition to resolution of PPI, raster images also contain what is called bit-depth. The bit depth of an images determines how many potential shades of grey each pixel can have.
- Pixels in a 1-bit image can only have one shade of grey (black, or white). These types of raster images are usually scans or documents, or very high PPI files of line art images.
- Pixels in an 8 bit image have 256 potential shades of grey. This is your standard “black and white” photograph
- RGB images (color) are 8 bit images, with a channel for each color (8 x 3 = 32). So each pixel still only had 8 bits potential, but is represented three times, and so RGB 8-bit images are referred to 32-bit images
Typically raster images are photographs, or scans…. and logo’s designed by a designer who didn’t know better.
So which one is better, raster or vector… and isn’t more image resolution always better?
Ok so now that we know all about image resolution and graphic types, how much do we resolution do need, and why not just have 1200ppi for everything? Good questions! Unfortunately, we have to answer it with another question. How will you reproduce your image?
The required PPI for a quality image is directly related to the image use. This is because PPI is calculated to take advantage of a device’s resolution. Depending on the type of output you intend for your image (inkjet, high-end halftone or line art prints, web use) the effective resolution requirement will change.
Look at it this way: Any image with effective resolution for web use will look coarse or pixilated on a high-end printer, while an image with effective resolution for the high-end printer will display on a web page in about the same amount of time it would take you to run to the kitchen for a nice hot cup of java. So, it’s about balancing quality with rendering time.
Some are of the mind that you should always capture the greatest amount of PPI that you are capable of and leave it at that. Now, I will agree with this only if you do not know the type of output your image requires. The most effective workflows will involve understanding your goals and acquiring the correct resolution from the get-go.
Determining the appropriate resolution for your images:
There are a few formula’s that every design student should know in order to determine what resolution to create their raster images at. They are a simple calculation of PPI based on LPI and DPI for the output device, and only apply to raster images.
For Vector Images:
This one’s easy… Vector images are resolution independent so there’s no formula! Or rather, the computer does all the math for you when it’s printed. That’s what makes vector images ideal for logo design. So, if you are having a logo created, make sure you are supplied a vector graphic along with these other elements.
For Line Art (1 bit images that only contain either a black or white pixel):
- PPI = DPI * scaling percent
- You want to prepare a line art image (let’s say a scan of a document that is 8 inches wide) for press. Remember, this is 1-bit, no shades of grey, only black and white.
- The output device has a DPI of 1200.
- You are going to scan your original document at the original size
Effective “high resolution” for this image to print at the original size of 8 inches would be: PPI = 1200DPI * 1. Or, simply 1200PPI
If you only want to reproduce the original at 4 inches (50%)
PPI = 1200DPI x .5. Or simply 600PPI
For photographic 8 bit images (containing shades of grey and color):
- PPI = LPI x 2 * scaling percent
- You want to create an original image in Photoshop for a brochure (maybe a textured background)
- You will be printing this on a device running 150 LPI
Effective “high resolution” for this image to print clearly on the brochure will be:
PPI = 150DPI * 2. Or, simply 300PPI
Now, let’s see if we can reuse that image for something else:
If you want to then use the same art on a poster, you will have to check your resolution to see if it is “high enough resolution” for the LPI that the poster will be printed on (and the image will be scaled).
- Lucky for us, the LPI of the printer for the poster is the same as the LPI of the printer for the brochure. So, we still need to end up with 300 PPI, but at full size
- The image on the brochure printed at 4 inches wide. We want it 8 inches wide on the poster.
When you resize a raster image (change the width and height) the pixels will redistribute accordingly. As dimensions decrease, PPI increases (same pixels squished into a small space). As dimensions increase, PPI decrease (same pixels spread out over a larger space).
- 4 inches scaled to 8 inches = 200%
- PPI = DPI x 2 x scaling %
- PPI = 150 x 2 x 2.00
- We need our 4 inch image to be 600 PPI to qualify as “high resolution” for the poster!
So, our 300ppi “high resolution” image for the brochure doesn’t quite work on the poster. If we knew about the poster prior to creating the design, we could have created one larger / higher resolution image and used it on both the poster and the brochure. But we didn’t. Now we have to recreate the image at a higher resolution in order to print high quality posters.
Two simple formulas, but a lot of math given all of the variations from the potential amount of output scenarios for a single image!
Skipping the mind boggling math:
Since an industry standard halftone is 150 LPI, the industry has dubbed “300ppi” as a “high resolution image” for 8 bit images. And, while some printers will use a higher LPI, the human eye doesn’t always have the capability to notice the difference in the final printed brochure. Just be aware that, if you scale that 300 PPI image, it still might just be low resolution.
Another option is to create vector images. While this is not going to work for the 1-bit scan we described, it might be a good solution for the background texture for our fictitious brochure and poster.
Here’s a general list of image types, the graphic format they should be created as, and recommended resolutions to give you an idea of how varied requirements are for each type of reproduction method:
Recommended Graphic Type
Resolution independent. Note: you should have your company logo in both vector and raster format. Vector for print, and raster for web use.
Photographs for Brochures
Photographs are raster by nature. Brochures typically print at 150 LPI, and would require a PPI of 300*
Photographs for Web
Photographs for Billboards
Billboards typically print at low resolution (around 75 LPI) and will only require a PPI of around 150.*
* Always check with your printer to confirm the size and resolution of any print piece prior to designing it. Each device is different and can have widely varying requirements.
File Formats for Digital Graphics
While this list doesn’t include every single type of file format, it includes all of the standards.
Graphic Formats Supported
.AI (Adobe Illustrator)
Vector and Raster
The industry standard program for creating vector graphics. Creates native vector images, but can also create raster effects, and have raster images placed in the same file as the vectors.
.EPS (Encapsulated PostScript)
Vector and Raster
A file format that allows postscript data to be self contained for use in another program, or for output.
.PDF (Portable Document Format)
Vector and Raster
Adobe’s format created to present documents independent of specific software and operating systems.
.SVG (Scalable Vector Graphics)
Vector (but you can include references to Raster images as well)
An open standard developed by the W3C (World Wide Web Consortium) to handle vector graphics on the internet
And, there you have it! You are now fully educated on image quality and resolution, and have a bit more insight as to what’s floating around in your graphic designers head.
If you have any other questions about image quality, please leave a comment below, and I’ll be happy to provide an answer.