Pixel Lava Interactive
  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment

Field Notes Blog

News and thoughts on UI/UX, web design, and more.

Digital Summer Camp 05: Understanding Resolution

8/8/2018

1 Comment

 
Picture
A high resolution image is usually 300dpi and a low res image is around 100 dpi, but what do those numbers actually mean? Computers use pixels, so why do we say “dots per inch”? And how can a “high res” image from a fancy camera or smartphone be 72 dpi? In this one minute episode, I’ll explain a bit about how resolution works in conjunction with dimensions and give you some tips for using the best resolution to make your images look great wherever they are. I'll also show you how to avoid some common pitfalls and we'll end with a surprising item of design geek trivia!

A post shared by Ame Stanko (@pixellava) on Aug 8, 2018 at 10:35am PDT

DPI and PPI
DPI stands for dots per inch but most of us also use it to mean PPI or pixels per inch. A pixel is the smallest single component of a digital image, you can think of pixels as the atoms of computer displays. DPI indicates how many dots or pixels are in a one inch printed area. Even though the two actually mean different things, the term dpi is most commonly used when referring to resolution in both print and digital.
  • Digital images are most often about 150 dpi but computer monitors and TVs vary widely from 72dpi (older machines) to 180 dpi (Retina displays). Think about how soft and faded an old iMac looks compared to a crisp and bright a new digital TV. The lower the resolution, the poorer the quality
  • Print images are most often about 300 dpi but printed pieces vary from 200dpi (some newspapers) to 600 dpi (magazines). Compare a community newspaper (where you can often see the individual dots) to a razor-sharp glossy fashion magazine. The higher the resolution, the better the quality.  
What to use where?
  • Use low res (72dpi) to medium res (150dpi) for online images.
  • Use high resolution 300 dpi for print images.
Pitfalls
You can make any image larger by changing it’s dimensions but you’ll see the image become blurry or jaggedy. Because photos are made of pixels, if you stretch those pixels out, the quality declines. Think of trying to fill a bathtub with a glass of water. However, if you make an image smaller, you’re not stretching out the pixels, so the quality is maintained. Sizing images down is usually fine.

How to make big images smaller for the web:
Many smartphones take photos that are over 2000 pixels wide and can be heavy in file size at 8mbs or more. When you’re adding images to a website you need them to be small in file size so they load quickly. Open your image in a photo editor like the free online www.pixlr.com, Photoshop or some other software. Usually under Image Size you’ll find a way to enter the dimensions you want. Pixlr.com will automatically save out the image at a web-friendly 72dpi. In Photoshop you can chose your own dpi, and I recommend 150 in most cases. Then export your image to add to your site. The file size of your web-ready version should be much less than the original with no loss of quality.
 
How to make resize images for print:
Say you want to change a digital photo from 2000 pixels wide at 72 dpi to a print-friendly size like 4” x 6” at 300 dpi. We’ve seen how to change the dimensions, but how do you change the resolution? A commonly-used method is resampling. Using image editing software like Photoshop, go to Image | Image Size. Check the Resample box and change the resolution to 300. Next enter the dimensions you want, either at the top in pixels or lower in document size. Be sure that the pixel dimensions value at the top is smaller than when you started. Resampling adds pixels, but you must stay within the original file size to maintain quality. If the image was 10m and, after resizing it’s 8m you’re in good shape. Note that Pixlr can’t do this, so if you’re goal is professional print graphic design you’ll need Photoshop or a similar pro tool. 
 
Why is resolution so confusing?
The size of digital images is always measured in pixels but we measure things in inches or centimeters in real life.
The term “resolution” is a value of the dpi of a printed image. Even though DPI and PPI are actually very different things, and even though the word resolution really only applies to print, we use those terms as a shorthand way to understand how digital images will behave when printed.
 
Say you have an image that is 1000 × 1000 pixels. If it has a “resolution” of 250 dpi, that tells a printer to print it at a size of 4 × 4 inches. If you change it to 100 dpi, that tells the printer to print it at 10 × 10 inches but the size of the image in pixels remains 1000 × 1000. The dpi/ppi value is an instruction to the printer, not the size of the image itself. You have probably noticed that most digital cameras take HUGE images that look great in print even though they are only 72 dpi. That’s because when printed out at small dimensions, all those pixels yield a high res print.
 
To quickly accommodate this continual translating of pixels to inches we change the dimensions and “resolution” into commonly understood values through the resampling method above, but you can also do it by just changing the dimensions in pixels.
 
For example, using the print resolution of 300 dpi, if the image is to be printed 8 inches in size, then your digital image has to be at least 2400 pixels. 300 (pixels) multiplied by 8 (inches) = 2400 pixels.
 
Because of this confusion, the most common approach is to size images to the desired pixel or inches dimensions at 300dpi.
 
Bonus Trivia Item: What resolution are billboards? A bazillion dpi because they’re huge, right? 

Answer: Actually, they’re only 12-15dpi, surprisingly. Our eyes  perform the interpolation at a distance. It’s the same as Pointillism in painting.
 
References:
“A quick primer on image resolution, DPI, and professional printers” http://pixlr.com/blog/support/a-quick-primer-on-image-resolution-dpi-and-professional-printers/
“What is DPI?” http://www.rideau-info.com/photos/whatisdpi.html
What is a Pixel? https://en.wikipedia.org/wiki/Pixel
“Image size and resolution” https://helpx.adobe.com/photoshop/using/image-size-resolution.html
1 Comment
Anne
8/8/2018 03:22:13 pm

This is fabulous! Clear, easy to understand explanations of the mysteries of dpi and resolution. I loved the bathtub analogy.

Reply

Your comment will be posted after it is approved.


Leave a Reply.

    Blog

    Ame Stanko, San Diego Web Designer

    About the author

    As the owner of Pixel Lava Interactive I've helped hundreds of small businesses and nonprofits with websites, graphic design and more. I hope you'll find this blog full of useful information.
    ~ Ame Stanko
    Mailing List Sign Up
    Subscribe

    RSS Feed

    Categories

    All
    Announcements
    Community
    Digital Summer Camp
    DIY
    DIY Marketing
    Email Marketing
    Featured Projects
    For Nonprofits
    Fun Stuff
    Happy Holidays
    How Tos
    HTML Is Not So Scary
    Industry Musings
    Interwebs 101
    LGBT Business
    Marketing Ideas
    Monday Motivation
    New Products
    Newsletters
    Nonprofit Marketing
    Online Marketing
    Partner Program
    Pixel Lava Unplugged
    Product Updates
    Promo Ideas
    Reviews
    Scam Alerts
    Small Business Inspiration
    Small Business Marketing
    Social Media Marketing
    Tips & Tricks
    Training
    UI/UX
    Webinars
    Web Labs
    Website Workshops

    Archives

    June 2021
    September 2020
    August 2020
    December 2019
    March 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    June 2017
    May 2017
    January 2017
    December 2016
    November 2016
    August 2016
    June 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    June 2015
    May 2015
    April 2015
    March 2015
    February 2015
    January 2015
    December 2014
    October 2014
    April 2014
    January 2014
    December 2013
    November 2013
    October 2013
    July 2013
    January 2013
    December 2012
    September 2012
    April 2012
    March 2012
    February 2012
    January 2012
    December 2011
    October 2011
    February 2011
    December 2010
    October 2010
    December 2009
    October 2009
    February 2009
    December 2008
    December 2007
    December 2006
    December 2005

Home  |  Websites  |  Graphic Design  |  Marketing  |  Training  |  About  |  Shop  |  Contact

©2005-2019 Pixel Lava Interactive. All rights reserved. 🚀

  • Home
  • Websites
    • New Websites
    • Website Redesigns
    • Website Portfolio
    • Website Tune Ups
    • Website Updates
    • Zoom
  • Graphic Design
    • Logo design and brand identity
    • Business Cards
    • Postcards, flyers, ads and more
    • Illustration & Infographics
  • Marketing
    • Seasonal Website Promos
    • Video Holiday Cards​
    • Video & Motion Graphics
  • Training
    • Online Event Hosting
    • Web Lab Kits
    • Webinars
    • 1-to-1 Trainings
    • Weebly Training
    • Digital Summer Camp
    • Training FAQs
  • About
    • Blog
    • Client List
    • Good Vibes
    • Review Me
    • Recommendations
    • Partner Program  🔸
      • Partner Portal
    • Adventure Indoor Fitness
    • Pixel Lava Unplugged
    • Art Barn Shop
    • Happy Holidays
    • Happy Halloween
    • Remembering Bob
    • Remembering Mary
    • Sample Store
  • Contact
    • Download page
    • Support
    • Make a Payment