DPI vs PPI vs densidad de píxeles: guía práctica para diseñadores

Tres números, tres significados:

• DPI (puntos por pulgada) — cuántos puntos de tinta coloca una impresora por pulgada lineal. Una propiedad de hardware de la impresora.
• PPI (píxeles por pulgada) — cuántos píxeles de imagen se imprimen o muestran por pulgada lineal al tamaño objetivo. Una propiedad de cómo se renderiza la imagen.
• Densidad de píxeles — los píxeles del dispositivo por píxel CSS en una pantalla. Una propiedad de la pantalla (Retina, 4K, etc.).

Casi todas las herramientas de diseño etiquetan su campo “resolución” como DPI cuando realmente significan PPI. El uso incorrecto está tan arraigado que la regla general es: cuando un diseñador dice DPI, asume que quiere decir PPI a menos que literalmente esté hablando de la salida nominal de una impresora física.

Lo que cada número te dice realmente

DPI (impresora o escáner)

Los inkjets modernos funcionan a 1200-4800 DPI. Las impresoras láser funcionan a 600-2400 DPI. Ambos números describen con qué fineza el hardware puede colocar puntos de tinta, no cuánto detalle de imagen puede contener una página. Una impresora de 4800 DPI no puede imprimir una imagen de 4800 PPI — la resolución de imagen efectiva típica (PPI) alcanza como máximo unos 300-400 incluso en los mejores inkjets, porque renderizar un píxel de imagen requiere múltiples puntos de tinta (trama de semitono).

PPI (el número de imagen-con-tamaño-objetivo)

PPI describe una imagen solo cuando especificas un tamaño físico objetivo. Una imagen de 3000×2000 píxeles impresa a 10×6,67 pulgadas es 300 PPI. Impresa a 5×3,33 pulgadas es 600 PPI. Impresa a 20×13,33 pulgadas es 150 PPI. Mismo archivo, tres valores de PPI diferentes.

Reglas estándar sobre qué PPI necesitas:

• 72-96 PPI — visualización web. Los navegadores ignoran el PPI incrustado; solo importa el recuento de píxeles.
• 150 PPI — impresión de periódicos, póster de gran formato visto desde lejos.
• 300 PPI — libro, revista, fotografía impresa vista a distancia de brazo.
• 600+ PPI — arte lineal, dibujos técnicos, tipografía fina.

Densidad de píxeles (el número Retina)

En las pantallas modernas, “1 píxel” en CSS no es un píxel de pantalla. Los iPhones, MacBook Pros y la mayoría de los teléfonos Android modernos usan un devicePixelRatiode 2 o 3 — lo que significa que un píxel CSS corresponde a 2× o 3× los píxeles físicos. Por eso un diseñador que trabaja en Figma al 1× produce imágenes que parecen borrosas en un teléfono a menos que exporte al 2× o 3× de resolución.

Números concretos: un iPhone de 2020 tiene una resolución de píxel CSS de 390×844 pero una resolución física de 1170×2532 (DPR 3×). Los diseñadores necesitan conocer ambos. El DPI de la pantalla física es un número separado (~460 PPI para ese teléfono), pero en términos CSS lo que importa es la proporción de píxeles del dispositivo.

Números prácticos para entregables comunes

Dónde confunde la confusión

1. El problema de la exportación a “72 DPI”

Un diseñador construye en Figma/Sketch a “72 DPI” (que no tiene sentido en pantalla pero es lo que muestra la herramienta), exporta un PDF y lo envía a una imprenta. La imprenta recibe un archivo que afirma 72 PPI en sus metadatos; la salida renderizada es 1/4 de la densidad prevista y la impresión parece pixelada. Solución: reexportar a 300 PPIy asegurarse de que el recuento de píxeles sea suficiente para admitir esa densidad.

2. Exportaciones Retina @1×

Un diseñador que trabaja en Figma al 1× exporta un icono a exactamente las dimensiones CSS (por ejemplo, 24×24 px). En un dispositivo 3× el icono se renderiza borroso porque el escalado del navegador no es tan nítido como una exportación nativa de 72×72. Solución: exportar @1× más variantes @2× y @3×, luego usar HTML srcset o image-seten CSS para servir el archivo correcto.

3. Confundir el PPI fuente con el PPI objetivo

Un fotógrafo dispara una imagen raw de 6000×4000. La cámara incrusta metadatos de 300 PPI. El fotógrafo la coloca en un diseño web de 600×400. La imagen tiene 10× más datos de píxeles de los que necesita el diseño; los metadatos de PPI de la fuente son irrelevantes. Solución: reducir el tamaño a las dimensiones de píxeles objetivo (o 2× para Retina) usando un algoritmo de reducción de muestreo real — nuestra herramienta de redimensionamiento de imágenes lo maneja.

Referencia rápida: cuándo importa cada número

• Trabajo web: solo importan el recuento de píxeles + DPR. Ignora los metadatos de PPI incrustados.
• Trabajo de impresión: el PPI importa absolutamente. Hazlo coincidir con la distancia de visualización de la impresión (300 PPI para sostenido en mano, 150 PPI para colgado en pared, menor para distante).
• Archivo fotográfico: conserva la fuente original de resolución completa. Genera variantes reducidas para cada uso posterior.
• Diseño de UI: diseña a dimensiones CSS de 1×, exporta a 2× y 3×.

Para la comparación de una página más profunda, consulta nuestra comparación DPI vs PPI. Para la parte de conversión de color del diseño, la página de metodología de color cubre RGB vs CMYK y perfiles ICC.

Ejemplo práctico: exportar un icono para tres plataformas

Un icono de barra de herramientas de 24×24 píxeles CSS necesita verse nítido en un navegador de escritorio, un iPhone 15 Pro (DPR 3×) y una imprenta a 300 PPI.

• Escritorio @1×: exportar PNG de 24 × 24. Tamaño de archivo ~1,2 KB.
• Retina @2×: exportar PNG de 48 × 48, servido vía image-set o srcset con el descriptor 2x. Tamaño de archivo ~2,8 KB.
• iPhone @3×: exportar PNG de 72 × 72, servido con 3x. Tamaño de archivo ~4,5 KB.
• Impresión a 300 PPI, impreso a 0,5 pulgadas:exportar PNG de 150 × 150 (o mejor, un SVG para que el rasterizador de la imprenta maneje la resolución).
• Mejor respuesta para todo: enviar la fuente SVG. Las primitivas vectoriales no se preocupan por DPR ni PPI; el renderizador rasteriza a la resolución objetivo bajo demanda. Reserva PNG/JPG solo para contenido raster (fotos, ilustraciones con gradiente).

Errores comunes

• Cambiar el campo PPI en Photoshop en lugar de volver a muestrear.El cuadro de diálogo “Tamaño de imagen” de Photoshop tiene una casilla de verificación “Volver a muestrear”. Cambiar el PPI sin volver a muestrear solo cambia los metadatos del tamaño de impresión; el recuento de píxeles y la calidad visible no se ven afectados. Con el nuevo muestreo activado, realmente añades o eliminas píxeles.
• Diseñar en Figma a 2× de forma predeterminada.Figma usa 1 unidad = 1 píxel CSS. Si diseñas a dimensiones 2×, tu exportación @1× será el doble del tamaño previsto y tu @2× será 4×. Diseña al 1×; deja que la exportación maneje los multiplicadores.
• Mezclar impresión y web en el mismo archivo.Un PDF de impresión a 300 PPI incrusta rasters dimensionados para impresión; una exportación web de la misma fuente es enormemente sobredimensionada para la web. Mantén maestros web e impresión separados, ambos derivados del original.
• Olvidar el sangrado y el corte en impresión.Una tarjeta de visita de 3,5" × 2,0" necesita 3,625" × 2,125" (sangrado de 0,125"). A 300 PPI eso son 1087 × 637 píxeles, no 1050 × 600.
• Tratar “web” como una resolución única. Los viewports modernos van desde 320 px CSS (teléfonos pequeños) hasta 3840 px CSS (monitores 4K), con DPR de 1 a 4. Genera al menos tres tamaños raster por activo y deja que el navegador elija.

Casos extremos

• Teléfonos plegables. Algunos dispositivos Samsung Galaxy Fold reportan DPR 2,625 — una proporción fraccional. Los navegadores rasterizan a través del descriptorsrcset más cercano; envía 1×/2×/3× y deja que elija.
• Zoom del navegador. Un usuario ampliado al 200% efectivamente duplica su DPR. Los activos vectoriales lo manejan con gracia; los rasters son escalados hacia arriba por el navegador. Proporciona suficiente resolución para que el escalado del navegador tenga margen.
• Impresión en casa vs impresión en imprenta.Los inkjets en casa son nominalmente 1200-4800 DPI pero solo ofrecen ~200 PPI de detalle de imagen efectivo. Las imprentas comerciales ofrecen true 300 PPI. Adapta tu fuente a la imprenta de destino, no a la impresora doméstica.
• Dispositivos de tinta electrónica. Kindle Paperwhite, reMarkable y similares usan tinta e-ink Carta a ~300 PPI pero se leen muy diferente a los LCD. Las curvas de contraste de imagen importan más que el PPI aquí; los diseños planos ganan.

Fuentes: Referencia de Producción de Impresión de Adobe (2023); HTML Living Standard del W3C (conjunto de fuentes de imagen); Directrices de Interfaz Humana de Apple sobre Diseño; Módulo de Valores y Unidades CSS Nivel 4 del W3C (unidades de resolución).