PPI? DPI? RESOLUTION? WHAT ARE THEY TALKING ABOUT?!
As web designers, we often work with clients that throw around terms like DPI or Resolution, but then find that clients don’t seem to fully understand what any of it means. Even as professionals, it can get a little confusing. Since these terms get thrown around a lot to sell products, including computers, cameras, and printers, the basics surrounding each meaning gets muddled.
After design school, I couldn’t wait to get my hands on an Epson printer that could print 1200 DPI (dots per inch), and get a hold of a digital camera that could shoot 10 MegaPixel. Everything seemed to have its own scale and jargon that really confused most of the general public.
Let’s break this down and simplify the whole thing.
This is a Pixel (dramatically enlarged for sake of explanation.)
This green pixel is an example of the smallest possible “spec” that your screen (be it a computer, phone laptop, TV…etc) can show. It can be any color that your screen can display (usually in the millions). It is essentially the tiny building blocks that build your screen and any image, font, or video you see.
Let’s build on this a bit.
This is a group of Pixels (5×5 pixels) (again, dramatically enlarged for sake of explanation.)
Everything you see on your screen is made up of these pixels. Above, you’ll see a graphic showing 5 pixels wide, by 5 pixels tall. If you had a magnifying glass and looked closely at your phone or monitor, you’d see something similar to what you see here.
Since nobody wants to look at a phone or monitor with a flat green screen all day, we can change the colors to try and represent different things. For the sake of explanation, let’s try and make a simple circle with these 25 pixels.
This isn’t the greatest circle, but about the best, you can do with 25 pixels and 2 colors. It’s too bad we don’t have more pixels to use. Oh wait…we do.
Let’s make a circle with twice as many pixels, so 10×10 with the same size pixel.
You can see that we’re using 4 times the space, but also 4 times as many pixels. You can also see the circle becomes…well…more like a circle. More pixels allows you to help define the shape better, but it, unfortunately, takes up more space.
This is certainly better than the 5×5 pixel version, but it’s not ideal.
How can you cram in more pixels without taking up more space? The simple answer is make smaller pixels.
This is the essence of what “Resolution” is.
WHAT IS RESOLUTION?
If you’re following along, you’ll realize that Resolution is referring to the size of the pixels.
If your screen was 10 pixels x 10 pixels (which would be insane), it would essentially be limited to 100 pixels total, like in the circle graphic above and only allow you to view things on your screen that could be 10 pixels wide by 10 pixels tall.
There is a reason Space Invaders looks like this.
Clearly, Space Invaders had more pixels than 10×10, but not by much.
Since screens are fixed sizes and you can’t just cram on more pixels, what else can you do?
You can make the pixels smaller. If you can make the pixels smaller, you can fit in more pixel sand therefore have a higher resolution (or definition) on to your screen.
How does this look?
If we take the hypothetical 10×10 pixel screen above and cut the pixel size in half, you can now have a 20×20 pixel screen in the same amount of space as the 10×10 pixel screen. This now quadruples the number of pixels you can have and therefore allowing more information and detail to be shown on your screen in the same area you previously had.
In a nutshell, this is exactly what companies are talking about when they refer to things like Retina, Super Retina, 4K, 5K… These are all buzzwords companies use when trying to cram more pixels onto your screens. The smaller the pixel, the less you even realize that things are made up of pixels.
CAN YOU CHANGE YOUR SCREEN RESOLUTION?
Believe it or not, most PCs will allow you to change your screen resolution (Phones, At least for now…not so much).
Your screen has a maximum resolution (which would be your highest resolution setting), however, you can usually select a handful of lower resolution options. These lower resolution options will mimic the way lower resolutions appear, as opposed to physically changing the actual screen resolution.
WHY WOULD I WANT TO CHANGE MY SCREEN RESOLUTION?
I’m glad you asked. I use the defaults on my iMac, and it’s set in the middle. You can make the resolution higher or lower from here.
This (below) would be an example of the lowest screen resolution on my 27inch iMac. You can see the setting is called “Large Text” and the result is everything is exaggerated and large (except the background).
If I change my resolution to the highest setting (below), (“More Space” setting), you can see that the icons and settings window for the monitor gets very small. The pixels are now set as small as my monitor will allow.
Since items for your screen are typically created at the one-pixel size, items will appear to shrink or enlarge depending on your resolution setting. This is easy to see by the menu with the monitor on it in the two above graphics. The background is NOT changing. It is simply scaling to fit, whereas the other graphics are maxed out.
Is everyone still following? The higher the resolution, the smaller the pixel and the smaller the images, text, and video will appear.
YOU NEED TO SAVE ALL WEB IMAGES AT 72DPI, RIGHT?
WELL… NOT EXACTLY
In the 1980’s computer screens were at 72DPI (Dots Per Inch, but let’s use the more accepted terminology…PPI…”Pixels Per Inch”), and most printers from the era printed around 144ppi. These days, computer and phone screens are MUCH higher. Apple computers have about a 226ppi, and some phones (Sony Xperia Z5) have a pixel density of 802!
What does that mean?
It means saving out at 72PPI resolution is unnecessarily lowering the fidelity of the image. When viewed on high definition screens (retina, super retina…etc) the images can often appear blurry because the image needs to be scaled up to look right on a high-def phone.
RECAP:
Pixel: This is the smallest building block of your screen.
Resolution: This is refers to the size of the pixel. The smaller the pixel, the higher the resolution.
DPI: (or Dots Per Inch) Although this is technically a printing term referring to the number of physical dots of ink in a printed piece (Yes…printers use dots just like pixels), this term has been misused so often that’s it’s become a synonym for PPI.
PPI: (or Pixels Per Inch) This is the number of square pixels that show up in an inch of a digital screen. Also, more often commonly misused in place of DPI.
