Heard of DPI & PPI or pixel dimension, which one do you need to focus on we’ll explain so we can save images for the web the right way.
When uploading images to your website, you might worry about what DPI to use for your images or someone talked about pixel dimension. Or you wonder what PPI is and why both names are almost always interchanged but mean something totally different.
Let’s start with DPI.
DPI stands for DOTS PER INCH and is a reference for offset printing where the dots are actual ink droplets hitting the paper and the more dots the finer the detail and crisper the picture.
Then there is PPI.
PPI stands for PIXELS PER INCH and represents how many pixels are getting cramped into an inch in your image.
And the Difference?
What is actually the difference of DPI to PPI and is there a difference? Yes, there is. Even though DPI is often used to express PPI, DPI is really a print term. Let me explain. The primary difference between DPI vs PPI is, DPI is really the physical ink dots or droplets that get printed on paper whereas PPI means the number of square pixels that are contained in one inch of an image that then is displayed on your computer monitor, iPad or cellphone. So the image you create is setup with Pixels and when you print this image, the pixels get represented with tiny ink dots on the paper. The confusion comes in when screen sizes are referencing DPI when really it should be called PPI.
Guess what, neither DPI nor PPI matter for the web. So what matters then? Keep reading…
About pixel dimension!
In regards to the web what really matters is the pixel dimension. Nothing else. Period!
But first let’s talk about pixels a bit more. The more megapixel your digital camera or cellphone has, the more pixels in your images. For example the Nikon D700 is a 16-megapixel camera and takes photos that are 4928 by 3264 pixels in dimensions. Or your iPhone with 12-megapixels takes photos that are 4000 by 3000 pixels in dimensions. When you multiply the two numbers you get 12 million pixels, hence one mega pixel is a whooping 1 million pixels.
Pixels are used with all digital mediums. Your cellphone screen is based on pixels, your monitor, your tv and your digital camera. Plus the big world wide web. Everything is calculated in pixels. That’s why the dimensions of your image matter and not the DPI or PPI, which is commonly referred to as resolution.
Which brings me back to the printing world. There the DPI/PPI matters greatly. Let’s assume you have an image 300×300 pixels at 72PPI, then 300×300 pixels at 150PPI then 300×300 pixels at 300PPI and one300x300 pixels at 600PPI. When looking at the images side by side on the web, you won’t see a difference. The dimensions are the same, the only difference is the density of pixels per inch and they all look the same in size! Have a look:
Printing an image on paper and pixel dimension
Printing the same files, you’ll see that the size of the image will have on paper differs greatly. With the same width and height for each image, so basically no change in pixel dimension, the higher the PPI(DPI) the smaller the image on the paper when printed.
So let’s look back to what the acronym actually stands for: PIXELS/DOTS PER INCH. This refers to how many pixels/dots are squeezed into one inch of space on a printed page. The four images with the same pixel value (300×300 pixels ) will print at very different sizes depending on the set PPI/DPI. An image at 72 PPI/DPI will be 4.167 inches by 4.167 inches, at 150 PPI/DPI will be 2 inches by 2 inches, at 300 PPI/DPI will be 1 inch by 1 inch. All that DPI/PPI does is determine how many pixels/dots your printer is going to cram into one inch of space on the page. That’s why a higher DPI image looks better than a lower DPI image – the more pixels you squeeze into a small area, the finer the detail in your printed image.
Remember the four images I showed you above with different DPI values that will look exactly the same on the web? Here’s what they’d look like printed:
Pixel dimension!
This can be confusing since you think that we have more pixels per inch so the image should get bigger. But the pixels are only assigned to the inch, not to the dimensions, hence the same dimension with more pixels per inch, the smaller the image when printed. You cannot add more pixels to the image itself. In this case, the image stays 300×300 pixels. Only the assigned pixel per inches changes and this affects the size on paper.
It might be a bit more clear when we talk about the megapixels of a camera. The more mega pixels the greater the image dimension of the photo. So an image taken by the Nikon D700 with 16 megapixels is 4928 by 3264 pixels whereas that of an iPhone with 12 megapixels is no more than 4000 by 3000 pixels. More megapixels larger image, but not necessarily a better image, but this is another topic for another article.
You might think if I have an image 300 by 300 @72ppi, I’ll just go to Photoshop, use Image Size, check Resample and then boost the pixels per inch from 72 to 300.
Of course you can do this, but look what happens to the image, yes it get larger in dimensions (from 300px by 300px to 1250 px by 1250px) but it also looses clarity and sharpness. The simple reason is that you cannot add pixels to an image that didn’t exist in the image before.
Let’s get back to the web
The confusion comes in when mixing printing with the web, and even more confusion was added when high resolution or Retina screens appeared on the market. One could assume that if I save an image at 300 PPI/DPI then this would take care of the high resolution screens, but it doesn’t. Remember the web only cares about pixel dimension, not pixels per inch. Saving an image at 150 PPI will not make it look good on a Retina screen. The only thing we need to focus on is the dimension.
This is where Adobe Illustrator’s Export for Screens is awesome. It lets you set multiple screen exports. For example if I’m creating a Facebook cover image 820 by 360 pixels I can export it as 1x, 2x 3x, etc. So if my concern is the Retina display, I will upload the image exported @2x. Basically the image at 1640 by 720 pixels in dimension. When this image gets shown on a Retina screen, it will look sharp.
If you need to know how to export for screens, watch my tutorial: How to use the Asset Export Feature in Illustrator .
Since Illustrator is vector based, we won’t have any issues with the look of the image either. Remember, vector graphics are resolution-independent. Scale them up to a billboard size and it still look awesome. This of course doesn’t apply to Photoshop where you’ll have to start creating with a bigger dimension right from the start. One more reason to create your artwork in Illustrator 🙂
Let’s do a quick recap
So if you are not sure, remember that on the web, it’s all about the pixel dimension. Create the right sizes and you’ll be good to go saving @72ppi. If you’re using a vector format like SVG then forget the dimension, they scale wonderfully up and down, but now we are talking about totally different beast called SVG (Scalable Vector Graphic). Maybe I’ll right another article on SVGs…until then don’t stress about DPI or PPI ever again, just worry about pixel dimension if you must worry at all.
