Web vs. Print Basics: Resolution

In the Web vs. Print Basics series we are now on the topic of image resolution.  It's probably a term that you've heard before but might not be able to quite pin down with a definition off the top of your head.  That's OK.  Wikipedia's got your back:

Image resolution is the detail an image holds. The term applies to raster digital images, film images, and other types of images. Higher resolution means more image detail.

Let's look at how web and print projects differ on this topic.


First let me talk about screens, since they are what allows you to view web-based projects.  Screen resolutions are set in a number of pixels wide by a number of pixels high.  This applies to both desktops and tablet and mobile devices.  Screen sizes might influence how wide you decide to make a website or an element on a website.  And the next time you go computer shopping and see a number x number statistic about a screen, you'll know that they are talking about resolution.

Now to images and videos.  So here's a surprise for you.  If you know the pixel dimensions of what is needed for an image or video project (like I talked about in the last post in this series), you have already set that image or video's resolution.  Yep!  It's that easy.  (And if you don't believe me, this article can inform you in detail about why that is true.)

An image will display at the defined pixel width and height on the screen, unless there is something else influencing its size.  Done!  And browsers on tablets and phones are designed to resize images to fit on their unique screen sizes.  (A bit deeper tidbit: Super high definition screens like Retina screens do involve creating some larger images to make sure that they show up correctly on the screen, but again, it comes down to making sure that you have an image that is the right number of pixels wide by the right number of pixels high to display properly.)

But let me share a little bit more about videos.  Video resolutions tend to come in aspect ratios of 16:9 ...which basically means a rectangle where the width is a multiple 16 and the height is the same multiple of 9.  This way, you always end up with the same kind of rectangle for the video viewing area.



Video resolutions are named after their height.  A resolution of 480p is 854 pixels wide by 480 high, 720p is 1280 pixels wide by 720 high, 1080p is 1920 pixels wide by 1080 high, etc.  (You can find all of the resolutions for YouTube here.)  So if you want to make a video, you'll need to choose its resolution or tell your video editor what you want the resolution to be.  And if no resolution is specified for where you intend to display your video, a good standards for online videos for YouTube, Facebook, etc. are 720p or 1080p, which are also called HD (high definition) and full HD.


Now let's talk about print projects.  With print projects, you will come across the terms PPI (pixels per inch) and DPI (dots per inch).  PPI has to do with the number of pixels per inch on a SCREEN and affects an image's size.  DPI has to do with the number of little dots of ink that will be printed per inch by a PRINTER and affects your printed product's quality.  (These terms have sometimes been used interchangeably just to confuse everyone.  Even companies like Apple are guilty of using DPI when they really mean PPI.  For an in depth explanation of all of this, go here.)  And while you don't need to understand all of the specifics, you do need to know that these will be important details for anyone doing design work for you.  Different types of projects will be printed at different DPI's, so a full scale vinyl banner may require 100 DPI, a newspaper ad 180 DPI, and a .pdf flyer 300 DPI.  If your printer gives you PPI or DPI information for a project, know that the number is important to ensuring that your end product prints well and pass it on to your designer.  And if you are beefing up your own design skills, look for where to enter the PPI/DPI in your own design program.

I hope that I have resolved the basics of resolution for you or at least made things come into focus a bit more.  (My resolution puns are on point!)  The next topic in this series will be colors.

Posted in Creative Speak and tagged , , .