Image resolution is one of the most misunderstood concepts in digital design. Understanding resolution, DPI, PPI, and how they relate to different output methods is essential for creating professional-quality work.

Core Concepts

Resolution

Resolution refers to the amount of detail an image holds, measured in pixels.

1. Pixel: The smallest unit of a digital image
1. Dimensions: Width × Height in pixels (e.g., 1920×1080)
1. Megapixels: Total pixels in millions (1920×1080 = 2.07 MP)

DPI vs PPI

These terms are often confused but have distinct meanings.

PPI (Pixels Per Inch):

1. Refers to digital images and screens
1. Determines image quality on digital displays
1. Example: A 300 PPI image has 300 pixels per inch

DPI (Dots Per Inch):

1. Refers to printed output
1. Determines print quality
1. Example: A 600 DPI printer places 600 dots per inch

Important: While technically different, many people use DPI and PPI interchangeably. In practice, when someone says "300 DPI image," they usually mean 300 PPI.

Resolution Requirements by Medium

Web and Digital Screens

Standard resolution: 72–96 PPI

Most screens display at 72–96 PPI, so higher resolution doesn't improve quality—it just increases file size.

1. Mobile phones: 375×667 to 428×926 px
1. Tablets: 768×1024 to 1024×1366 px
1. Laptops: 1366×768 to 1920×1080 px
1. Desktop monitors: 1920×1080 to 3840×2160 px (4K)

Print Materials

Standard resolution: 300 PPI

Print requires much higher resolution than screens because you view it closer and it doesn’t emit light.

1. High-quality print: 300 PPI minimum
1. Professional photography: 300–600 PPI
1. Large format (billboards): 150 PPI
1. Newspapers: 200 PPI
1. Fine art prints: 360–720 PPI

Calculating Required Resolution

For Print

Formula: (Width in inches × DPI) × (Height in inches × DPI)

Example: 8×10 inch print at 300 DPI → 2400×3000 pixels

For Screens

Formula: Match or exceed the display resolution

Example: Full-screen image on 1920×1080 monitor → 1920×1080 pixels minimum

Resizing Images

Upscaling (Making Larger)

1. Avoid when possible: Always start with high-resolution originals
1. AI upscaling: Tools like Topaz Gigapixel AI, Adobe Super Resolution
1. Vector conversion: Convert to vector if possible

Downscaling (Making Smaller)

1. Use bicubic interpolation
1. Sharpen slightly after downscaling
1. Save at appropriate quality setting

File Formats and Resolution

Raster Formats (Pixel-Based)

1. JPEG: Best for photos
1. PNG: Transparency, lossless
1. WebP: Modern and efficient
1. TIFF: Best for print

Vector Formats (Math-Based)

1. SVG: Web graphics
1. AI: Illustrator
1. EPS: Universal format
1. PDF: Can contain both vector and raster

Conclusion

1. Web: 72–96 PPI, optimize file size
1. Print: 300 PPI minimum, use CMYK
1. Downscaling: Generally safe
1. Upscaling: Avoid or use AI tools
1. Keep originals: Always maintain high-res masters

By mastering resolution concepts, you'll ensure your images look sharp and professional in any medium.