Image Resolution Explained - Understanding px, dpi, and ppi
What Is Resolution - The Fundamental Concept of Image Detail
Resolution refers to how much detail an image contains. Digital images are composed of tiny dots called pixels, and the density or total count of these dots determines the resolution. Higher resolution means finer detail, while lower resolution results in a coarser appearance.
In everyday usage, the term "resolution" is often used loosely, but technically it can be divided into two types: absolute resolution (total pixel count of an image) and relative resolution (pixel density per unit length). For example, "a 1920x1080 image" describes absolute resolution, while "a 300 dpi image" describes relative resolution.
Understanding this distinction is the first step toward preparing appropriate images for web design and print production. The required resolution varies dramatically depending on the use case - web display typically needs only 72-96 ppi, while commercial printing demands 300 dpi or higher. By properly grasping the concept of resolution, you can avoid creating unnecessarily large files or ending up with blurry images when printing.
px (Pixels) - The Smallest Unit of Digital Images
Pixels (px) are the smallest individual points that make up a digital image. Each pixel holds one color value, and these pixels arranged in a grid form the complete image. A notation like "1920x1080" means 1920 pixels horizontally and 1080 pixels vertically.
Pixels themselves have no inherent physical size. The same 1920x1080 image will have extremely small pixels on a 5-inch smartphone but large ones when projected on a 100-inch screen. This means pixels are relative units whose physical size changes depending on the display device.
- Web design: CSS pixels may differ from device pixels (on Retina displays, 1 CSS px = 2-3 device px)
- Photography: Camera megapixel counts indicate total pixels (12MP = approximately 4000x3000 px)
- Video: 4K is 3840x2160 px, Full HD is 1920x1080 px
More pixels mean more information in the image, but also larger file sizes. Choosing the appropriate pixel count for your intended use is essential for balancing quality and performance.
dpi (Dots Per Inch) - Resolution Units for Printing
dpi (dots per inch) represents the number of ink dots printed per inch. It indicates how finely a printer can place ink and directly affects print quality.
Common dpi guidelines for various print applications:
- 300 dpi: Standard for commercial printing, photo books, business cards, and other high-quality materials
- 150 dpi: Newspaper printing, large-format posters (when not viewed up close)
- 72 dpi: Former standard for monitor display (largely irrelevant today)
- 600-1200 dpi: Laser printer output resolution
An important distinction: printer dpi and image dpi are different concepts. Even if a printer has 1200 dpi capability, if the source image only contains 150 dpi worth of information, the print result will only be 150 dpi quality. Conversely, sending a 300 dpi image to a 72 dpi printer won't produce quality beyond the printer's capabilities.
When creating print-ready files, calculate pixel dimensions using finished size × required dpi. For example, printing at A4 size (approximately 8.27 × 11.69 inches) at 300 dpi requires an image of at least 2481 × 3507 pixels.
ppi (Pixels Per Inch) - Resolution Units for Displays
ppi (pixels per inch) represents the number of pixels displayed per inch on a screen. While dpi indicates ink dot density for printing, ppi indicates pixel density on displays - a subtle but important distinction. In practice, dpi and ppi are often used interchangeably, though they are technically different concepts.
Representative display ppi values:
- iPhone 15 Pro: 460 ppi (Super Retina XDR)
- MacBook Pro 14-inch: 254 ppi (Liquid Retina XDR)
- Typical 27-inch 4K monitor: 163 ppi
- Typical 27-inch Full HD monitor: 82 ppi
On high-ppi displays, images with the same pixel count appear physically smaller. Therefore, for high-ppi displays (like Retina), you need to provide images with 2-3 times the normal pixel count. This is why srcset attributes and @2x, @3x images are necessary.
In web development, considering the ratio between CSS pixels and device pixels (window.devicePixelRatio) and delivering appropriately resolved images is essential for balancing both performance and visual quality.
dpi vs ppi - Clarifying the Commonly Confused Points
dpi and ppi are frequently confused in everyday usage, but they have clear technical differences. Understanding these differences helps prevent configuration mistakes during image production.
Fundamental differences:
- dpi: Physical ink dot density. Indicates printer output capability. Multiple dots may be used to represent a single pixel's color
- ppi: Digital image pixel density. Indicates the density of the image data itself. 1 pixel = 1 color value
For example, inkjet printers reproduce the color of a single pixel by combining multiple fine CMYK dots. Therefore, a printer may need 1200 dpi or higher capability to print a 300 ppi image accurately.
Practical usage guidelines:
- The "resolution" setting in image editors (Photoshop, etc.) refers to ppi
- The "resolution" in printer specifications refers to dpi
- When asked to submit files at "300 dpi" for printing, they actually want a 300 ppi image
To avoid confusion, use ppi when discussing image data density and dpi when discussing printing device capabilities. However, industry convention frequently uses dpi to mean ppi (as in "300 dpi for print"), so contextual flexibility is also necessary.
Optimal Resolution Settings by Use Case
Here is a comprehensive guide to optimal resolution settings based on intended use. Choosing the right resolution helps balance quality and file size effectively.
Web and social media:
- General web images: 1200-2400 px wide (including Retina support)
- OGP images: 1200 × 630 px
- Favicons: 32 × 32 px, 180 × 180 px (Apple Touch Icon)
- ppi setting: Irrelevant for web (browsers only reference pixel dimensions)
Print production:
- Commercial printing (flyers, brochures): 350 ppi
- Photo prints (standard sizes, A4): 300 ppi
- Large-format posters (B1 and above): 150-200 ppi (viewing distance is greater)
- Business cards: 350 ppi or higher
Common mistakes and solutions:
- Exporting web images at 300 ppi: Creates unnecessarily large files. For web, only pixel dimensions matter - ppi settings have no effect
- Using smartphone photos directly for print: 12MP (4000 × 3000 px) is sufficient for A4 at 300 ppi
- Enlarging low-resolution images for print: Pixel interpolation causes blurriness. If the source lacks sufficient pixels, consider AI upscaling
The golden rule for resolution settings is to work backward from your final output destination. First confirm the output size and required ppi/dpi, then calculate the necessary pixel dimensions from there.