Resolution
A measure of image detail expressed as pixel dimensions (width x height) or pixel density (PPI/DPI) by context.
Resolution describes the level of detail in a digital image and carries two distinct meanings depending on context. The first is pixel dimensions (e.g., 3840x2160 pixels), representing the total information content. The second is pixel density (PPI: Pixels Per Inch, or DPI: Dots Per Inch for print), describing how tightly pixels are packed in physical space.
Higher pixel dimensions preserve more detail when zooming or cropping. Higher pixel density means the same pixel dimensions render smaller but sharper on the output device.
- Web usage: Pixel dimensions matter most. Serve images sized appropriately for their display container to avoid unnecessary bandwidth consumption
- Print usage: 300 DPI is the commercial printing standard. An A4 page (210x297mm) at 300 DPI requires approximately 2480x3508 pixels
- Retina support: 2x displays need images with double the CSS pixel dimensions, delivered via
srcsetorimage-set()
Resolution misconfiguration is a common practical issue. Using 72 PPI web exports for print produces blurry results, while serving 300 DPI print-ready images on the web causes severe loading delays. Proper resolution planning for each delivery context is essential for balancing quality and performance.