／var／logmarcus chiu

Resolution (PPI - DPI - DP／DIP - PX - SP)

Created on · Last Modified on

Resolution is the measure of clarity/detail of an image. Resolution can be described in 2 ways:

  • Dots Per Inch (DPI) or Dot Density describes the resolution of a printed image in dots
  • Pixels Per Inch (PPI) or Pixel Density describes the resolution of a digital image in pixels

Higher resolution means more clarity/detail. Higher DPI means higher resolution. Resolution is not “size”, but it’s often confused with it because higher resolution images are often bigger, but that doesn’t necessarily have to be the case

Screen Resolution vs Screen Density

  • screen resolution - describes the number of pixels in the horizontal-by-vertical directions
  • screen density - synonymous with PPI - describes the number of pixels per inch. either in the horizontal or vertical direction

Front-End Developer Related Units

  • Pixel (PX) - a pixel fills an arbitrary amount of screen area depending on the density
  • Density-independent Pixel (DP pronounced “DIP”) - are flexible units that scale to have uniform dimensions on any screen (units relative to 160ppi/dpi). Material UIs use density-independent pixels to display elements consistently on screens with different densities
  • Scalable Pixels (SP) - serve the same function as DP but for fonts

dpi example:

  • screen with screen-density 160ppi/dpi has, 1dp 1px 1/160in
  • screen with screen-density 240ppi/dpi has, 1dp 1.5px 1/160in

so 1dp != 1px. There is exactly one case when 1dp == 1px, and that’s on a 160ppi/dpi screen. Physical measurement units like inches should never be part of your design—that is unless you’re making a ruler.

to calculate dp:

  • dp = (screen-width-or-height-in-pixels * 160) / screen-density
  • dp = 160 * screen-width-or-height-in-inches

the conversion formula between px and dp:

px = dp * (dpi / 160)

Image Resolution Standards

Standard

Standard Resolution

Color Model

Other Things To Know

Print

300dpi is standard

CMYK (cyan, magenta, yellow, and key/black) color model

(aka subtractive color model)
  • Inkjet printers produce a resolution of around 300 to 720 DPI, while laser printers produce images anywhere from 600 to 2,400 DPI
  • there is no standard dot size or shape, so higher DPI does not always equate to a higher quality print

Web/Digital

72dpi is ideal

RGB (red, green, and blue) color model

(aka additive color model)

Don’t Confuse “Image-Size” with “File-Size”

  • image-size refers to the dimensions of the image
  • file-size is how much space the image takes up on a hard drive (kilobytes or megabytes)