Resolución de imagen explicada - Entendiendo px, dpi y ppi
Qué es la resolución - El concepto fundamental del detalle de imagen
La resolución describe la cantidad de detalle que contiene una imagen. En diferentes contextos, "resolución" tiene distintos significados: el número de píxeles de una imagen digital, la densidad de puntos de una impresión, o la densidad de píxeles de una pantalla. Comprender estas distinciones es crucial para el manejo correcto de imágenes.
Tres tipos de "resolución":
- Resolución de píxeles: Ancho × alto en píxeles de la imagen (ej. 1920×1080)
- Resolución de impresión (dpi): Puntos de tinta impresos por pulgada
- Resolución de pantalla (ppi): Píxeles de pantalla por pulgada
Concepto erróneo común: "Alta resolución" no equivale a "alto dpi". Una foto de 6000×4000 píxeles mostrada en web no tiene dpi relevante; la misma foto impresa en A4 sí lo tiene. Los dpi/ppi solo son significativos cuando se determina un tamaño de salida físico.
px (píxeles) - La unidad mínima de imágenes digitales
El píxel (Pixel) es la unidad mínima que compone una imagen digital, cada píxel almacena un valor de color. La resolución en píxeles de una imagen determina la cantidad máxima de detalle que puede representar.
Píxeles y tamaño físico: Los píxeles no tienen un tamaño físico fijo. La misma imagen de 1920×1080, en un monitor de 24 pulgadas cada píxel mide aproximadamente 0.27mm, en un teléfono de 5 pulgadas cada píxel mide aproximadamente 0.06mm. El tamaño físico del píxel depende del dispositivo de visualización.
Píxeles CSS vs píxeles de dispositivo:
- Píxeles CSS (lógicos): Unidad abstracta usada en desarrollo web, independiente del dispositivo
- Píxeles de dispositivo (físicos): Los puntos de luz reales en la pantalla
- Ratio de píxeles del dispositivo (DPR): Píxeles de dispositivo / píxeles CSS. Pantallas Retina DPR=2, es decir, 1 píxel CSS corresponde a 4 píxeles físicos
Resoluciones de píxeles comunes:
- Full HD: 1920×1080 (aproximadamente 2 millones de píxeles)
- 4K UHD: 3840×2160 (aproximadamente 8.3 millones de píxeles)
- Cámaras digitales: 24-60 millones de píxeles
- Teléfonos móviles: 12-50 millones de píxeles
dpi (puntos por pulgada) - Unidad de resolución para impresión
dpi (Dots Per Inch) describe el número de puntos de tinta que una impresora produce por pulgada. Determina la finura del material impreso.
Estándares de dpi para impresión:
- 300 dpi: Estándar de impresión de alta calidad (revistas, libros de fotos, fotografías)
- 150 dpi: Materiales impresos generales (folletos, pósters vistos de cerca)
- 72 dpi: Solo adecuado para visualización en pantalla, la impresión será borrosa
Cálculo del tamaño de impresión:
Tamaño de impresión (pulgadas) = Número de píxeles / dpi
Ejemplo: Una foto de 3000×2000 píxeles, impresa a 300 dpi = 10×6.67 pulgadas (aproximadamente 25×17 cm).
dpi y tamaño de archivo: La configuración de dpi en sí no afecta el tamaño del archivo. El tamaño del archivo está determinado por el número total de píxeles y el método de compresión. "Cambiar" una imagen de 72 dpi a 300 dpi no añade detalle, solo cambia el tamaño físico al imprimir.
dpi real de la impresora: Las impresoras de inyección de tinta especifican 2400-4800 dpi, pero esa es la densidad de puntos de tinta, no significa que la imagen necesite esa resolución. 300 dpi de imagen es suficiente para igualar la máxima calidad de salida de la impresora.
ppi (píxeles por pulgada) - Unidad de resolución para pantallas
ppi (Pixels Per Inch) describe el número de píxeles que contiene una pantalla por pulgada. Determina la finura del contenido mostrado en pantalla.
ppi de dispositivos comunes:
- Monitor de escritorio estándar: 96-110 ppi
- MacBook Pro Retina: 220-254 ppi
- iPhone 15 Pro: 460 ppi
- iPad Pro: 264 ppi
Cálculo de ppi:
ppi = √(píxeles horizontales² + píxeles verticales²) / pulgadas diagonales
Ejemplo: Monitor 4K de 27 pulgadas = √(3840² + 2160²) / 27 ≈ 163 ppi.
Retina y HiDPI: Apple denomina Retina a las pantallas cuyo ppi supera la capacidad de resolución del ojo humano a distancia normal de visualización. Típicamente DPR=2 (cada píxel lógico se renderiza con 2×2 píxeles físicos), haciendo que texto e imágenes sean más nítidos.
Impacto en el desarrollo web: Las pantallas de alto ppi necesitan imágenes de resolución 2x o 3x para mantenerse nítidas. Usar srcset para proporcionar imágenes de diferentes resoluciones, permitiendo al navegador elegir según el DPR del dispositivo.
dpi vs ppi - Aclarando la confusión común
dpi y ppi se usan frecuentemente de forma intercambiable, pero describen magnitudes físicas diferentes. Entender la diferencia ayuda a usar la terminología correcta en el contexto adecuado.
Diferencia fundamental:
- dpi: Densidad de puntos de tinta en la salida impresa. Es una propiedad de la impresora
- ppi: Densidad de píxeles en la pantalla. Es una propiedad del monitor
Por qué se confunden: El software de edición de imágenes (Photoshop) etiqueta la configuración de "resolución" como "pixels/inch" (ppi), pero la gente habitualmente lo llama "dpi". Los ajustes de pantalla del sistema operativo también usan frecuentemente "dpi" para describir la escala.
Impacto práctico:
- Imágenes web: La configuración de dpi/ppi es completamente irrelevante. El navegador solo mira el número de píxeles
- Imágenes para impresión: Los dpi determinan el tamaño y calidad de impresión
- Diseño de UI: Los ppi afectan la escala del diseño
"Resolución" en Photoshop: Cambiar la configuración de ppi en Photoshop (sin marcar "Remuestrear") solo cambia los metadatos del tamaño de impresión, no los datos de píxeles. Marcar "Remuestrear" sí cambia realmente la cantidad de píxeles.
Configuración óptima de resolución por caso de uso
Elegir la resolución correcta según el uso final, evitando archivos innecesariamente grandes o calidad insuficiente.
Web y visualización en pantalla:
- Diseñar en unidades de píxeles, ignorar la configuración de dpi
- Pantalla estándar: imágenes 1x son suficientes
- Retina/HiDPI: proporcionar imágenes 2x (si se muestra a 400px de ancho, proporcionar imagen fuente de 800px)
- No es necesario superar 2x, la mejora visual de 3x es extremadamente mínima
Material impreso:
- Impresión de alta calidad: 300 dpi (revistas, libros de fotos)
- Pósters grandes (vistos a distancia): 150 dpi es suficiente
- Vallas publicitarias exteriores: 30-72 dpi (distancia de visualización lejana)
Escaneo:
- Documentos OCR: 300 dpi
- Escaneo de fotos (archivo): 600 dpi
- Escaneo de película: 2400-4800 dpi
Vídeo:
- 1080p: 1920×1080
- 4K: 3840×2160
- La tasa de fotogramas tiene mayor impacto en la fluidez que la resolución