Respuesta rápida: el DPI no es el interruptor de calidad web
Para las imágenes de un sitio web normal, 72 DPI frente a 300 DPI no decide qué tan nítida se ve la imagen en línea. El navegador trabaja sobre todo con:
- las dimensiones reales en píxeles de la imagen, por ejemplo 1200 × 800;
- el tamaño CSS en la página, por ejemplo 600 px de ancho;
- las reglas de imágenes responsivas como
srcsetysizes; - la relación de píxeles del dispositivo en la pantalla;
- la compresión y el formato usados al exportar.
Un JPG de 1200 × 800 etiquetado como 72 DPI y el mismo JPG de 1200 × 800 etiquetado como 300 DPI se muestran igual en una página web. Tienen exactamente los mismos píxeles. El valor DPI es, en esencia, una instrucción de impresión.
El DPI empieza a importar cuando la imagen debe convertirse en un tamaño físico. Una foto de pasaporte de 2 × 2 pulgadas a 300 DPI requiere 600 × 600 píxeles. Una copia de 4 × 6 pulgadas a 300 DPI requiere 1200 × 1800 píxeles. Ahí es donde el número DPI resulta útil: conecta píxeles con pulgadas o milímetros.
Así que cuando alguien pide «300 DPI», la mejor pregunta de vuelta es:
¿Es para imprimir o realmente necesitas una imagen con más píxeles para la web?
DPI, PPI, píxeles y píxeles CSS
DPI se usa para varias cosas distintas y por eso los consejos suelen ser un lío.
| Término | Qué significa | Dónde importa |
|---|---|---|
| DPI | Puntos por pulgada; originalmente puntos de tinta de una impresora | Impresoras y jerga de impresión |
| PPI | Píxeles por pulgada en una imagen o diseño de impresión | Tamaño de impresión digital |
| Dimensiones en píxeles | Ancho y alto reales del archivo en píxeles | Web, apps, impresión, redimensionado |
| Píxel CSS | Unidad de disposición del navegador | Diseño web e imágenes responsivas |
| Device pixel ratio | Píxeles físicos por píxel CSS | Pantallas Retina y HiDPI |
Para archivos de imagen digital, PPI es el término más preciso. Un archivo no tiene puntos de tinta: tiene píxeles. Pero la gente busca «DPI», los laboratorios piden «DPI» y los clientes dicen DPI cuando se refieren a PPI, así que esta guía usa ambos con cuidado.
La fórmula práctica es simple:
píxeles = pulgadas de impresión × PPI
pulgadas de impresión = píxeles / PPI
Si una foto tiene 3000 píxeles de ancho, puede imprimirse a 10 pulgadas de ancho a 300 PPI, a 20 pulgadas de ancho a 150 PPI o a 41,7 pulgadas de ancho a 72 PPI. El archivo no mejora ni empeora: solo cambia con qué densidad se colocan esos píxeles en el papel.
Qué hace en realidad el DPI dentro de una imagen
Muchos formatos de imagen pueden guardar un valor de resolución o densidad. En el software del día a día puedes verlo como:
- 72 DPI,
- 96 DPI,
- 240 PPI,
- 300 PPI,
- un campo «Resolución» en Photoshop,
- metadatos de densidad horizontal y vertical en un JPG o PNG.
Ese valor son metadatos. Sugiere el tamaño con el que la imagen debería imprimirse o colocarse en un diseño que respete esa densidad. No añade detalle.
Imagina una foto de 3000 × 2000:
| Etiqueta de metadatos | Píxeles reales | Tamaño de impresión sugerido |
|---|---|---|
| 72 DPI | 3000 × 2000 | 41,7 × 27,8 in |
| 150 DPI | 3000 × 2000 | 20 × 13,3 in |
| 300 DPI | 3000 × 2000 | 10 × 6,7 in |
Los mismos píxeles. Distinto tamaño de impresión sugerido.
Aquí es donde se cae mucha gente. Si solo cambias el campo DPI, no has redimensionado la imagen para la web, no la has comprimido y no la has vuelto más nítida: has cambiado la etiqueta de impresión.
Qué usan los navegadores en su lugar
Para el trabajo habitual en páginas web, los navegadores se basan en los datos de píxeles del archivo y en las instrucciones de disposición de la página.
Si el HTML o el CSS dicen que una imagen debe mostrarse a 600 píxeles CSS de ancho, el navegador la coloca a 600 píxeles CSS de ancho. Si aportas una fuente de 1200 píxeles de ancho para ese hueco, tienes píxeles de sobra para una pantalla 2x de alta densidad. Si aportas una fuente de 400 píxeles de ancho, es probable que se vea blanda porque el navegador tiene que ampliarla.
Por eso el trabajo con imágenes web suele sonar así:
- Imagen hero: exporta cerca del mayor ancho de visualización esperado, a menudo con variantes responsivas.
- Imagen de blog: haz una versión de 1200-1600 px de ancho, salvo que el diseño exija más.
- Miniatura: exporta cerca del tamaño de tarjeta mostrado.
- Icono para Retina: entrega píxeles fuente 2x o 3x del tamaño CSS.
- Página lenta: redimensiona y comprime los píxeles, no la etiqueta DPI.
La documentación de MDN sobre naturalWidth es útil aquí porque describe el ancho de imagen en píxeles CSS, no como «lo que diga la etiqueta DPI». La guía de MDN sobre imágenes responsivas también explica cómo srcset y sizes ayudan al navegador a escoger una fuente adecuada en función de la disposición y del dispositivo.
Hay un matiz técnico: CSS tiene una propiedad experimental image-resolution, y W3C CSS Images habla de los metadatos de resolución de imagen. MDN marca actualmente image-resolution como experimental y advierte que la compatibilidad de los navegadores no está lista para producción. Para la publicación web normal, no cuentes con que el metadato DPI de un JPG o PNG controle el tamaño visible de la página.
Por qué 72 DPI se volvió folclore web
La regla de «72 DPI para la web» es sobre todo un hábito heredado.
Los flujos de autoedición antiguos tenían una relación más cercana entre píxeles de pantalla, puntos y pulgadas. Las convenciones antiguas de pantalla de Macintosh se asocian con frecuencia a 72 píxeles por pulgada. Windows y la historia de CSS trajeron los 96 DPI al panorama. W3C CSS Values define una relación fija en la que 1in equivale a 96px, y la documentación de MDN sobre resolución explica que 1dppx corresponde a 96dpi en términos de CSS.
Eso no significa que debas exportar las imágenes web a 96 DPI.
Significa que CSS tiene un sistema de referencia para unidades de disposición. Tu imagen web real sigue necesitando suficientes píxeles para el tamaño en el que aparece. Una foto de 5000 px de ancho es demasiado pesada para una miniatura de 300 px, tanto si está etiquetada como 72 DPI como si lo está a 300 DPI. Un logo de 400 px de ancho puede verse blando en un hueco de 600 px por mucho que el campo DPI diga otra cosa.
Para las imágenes web, la mejor pregunta es:
¿Cuántos píxeles ocupará esta imagen en la disposición y cuántos píxeles fuente debería aportar para las pantallas que me importan?
La trampa del remuestreo en Photoshop
Photoshop y herramientas similares muestran ancho, alto y resolución en el mismo cuadro de diálogo. Para imprimir es útil, pero para la web es una trampa.
La documentación de Tamaño de imagen de Adobe separa:
- Dimensiones: el número de píxeles.
- Ancho y alto: el tamaño físico o de disposición según la unidad.
- Resolución: píxeles por pulgada para la calidad de impresión.
- Remuestrear: añadir o quitar píxeles.
El interruptor clave es Remuestrear.
Con Remuestrear desactivado, pasar de 72 PPI a 300 PPI mantiene los mismos píxeles y cambia el tamaño de impresión sugerido. Un archivo 3000 × 2000 sigue siendo 3000 × 2000. Es trabajo a nivel de metadatos.
Con Remuestrear activado, cambiar la resolución puede añadir o quitar píxeles según los campos de ancho y alto. Eso modifica los datos de imagen: puede hacer el archivo más grande o más pequeño, más nítido o más blando, e introduce artefactos de interpolación si amplías demasiado.
Para el uso web, evita la orden vaga «déjalo en 72 DPI». Nombra el objetivo real:
- «Redimensiona esto a 1600 px de ancho.»
- «Exporta una miniatura de 320 px.»
- «Comprime este JPG por debajo de 200 KB.»
- «Haz una imagen 2x para un hueco CSS de 600 px, es decir, exporta 1200 px de ancho.»
¿Cambiar el DPI cambia el tamaño del archivo?
Casi siempre, no.
Si editas únicamente el metadato DPI/PPI, el tamaño del archivo puede quedarse igual o variar en unos pocos bytes por el cambio de metadatos. Los datos de imagen siguen siendo la misma cuadrícula de píxeles.
El tamaño del archivo cambia cuando haces alguna de estas cosas:
- Redimensionar las dimensiones en píxeles.
- Recortar parte de la imagen.
- Ajustar la calidad JPG/WebP/AVIF.
- Convertir a otro formato.
- Eliminar EXIF u otros metadatos.
- Aplanar la transparencia.
- Reducir fotogramas o duración de una animación.
Si un sitio dice que la subida debe pesar menos de 500 KB, cambiar de 300 DPI a 72 DPI es la solución equivocada. Redimensiona la imagen, comprímela o ambas cosas.
Cuándo importa de verdad 300 DPI
300 DPI es una abreviatura útil para el trabajo de impresión que se mira de cerca. Significa que el archivo de impresión tiene 300 píxeles por cada pulgada de salida final.
Casos habituales a 300 DPI:
- Fotos de pasaporte y visado.
- Copias de laboratorio de 4 × 6 y 5 × 7 pulgadas.
- Pequeños folletos y trípticos.
- Imágenes de libros o revistas.
- Etiquetas de producto vistas de cerca.
- Escaneos donde importan textos pequeños o líneas finas.
La cuenta:
| Tamaño de salida | Píxeles a 300 DPI |
|---|---|
| 1 × 1 in | 300 × 300 |
| 2 × 2 in foto de pasaporte | 600 × 600 |
| 35 × 45 mm foto de identidad | unos 413 × 531 |
| 4 × 6 in foto | 1200 × 1800 |
| 5 × 7 in foto | 1500 × 2100 |
| 8 × 10 in impresión | 2400 × 3000 |
| Página A4 | unos 2480 × 3508 |
Para imprimir, el tamaño físico no es opcional. Decir «300 DPI» a secas es incompleto. Una imagen a 300 DPI para una foto de pasaporte de 2 × 2 pulgadas son 600 × 600 píxeles. Una imagen a 300 DPI para una página A4 son unos 2480 × 3508 píxeles. Son archivos radicalmente distintos.
Cuándo no importa 300 DPI
300 DPI suele ser el foco equivocado para:
- imágenes web,
- publicaciones en redes sociales,
- archivos adjuntos de correo,
- miniaturas de producto,
- capturas de pantalla para blogs,
- iconos de app y gráficos de interfaz,
- formularios en línea que validan dimensiones en píxeles y tamaño de archivo.
Algunos portales de subida mencionan DPI en las instrucciones porque el resultado final se imprime. Aun así, el portal suele comprobar dimensiones en píxeles, relación de aspecto, tamaño de archivo, modo de color o posición del rostro, y no la etiqueta de metadatos. Si el requisito dice «2 × 2 pulgadas a 300 DPI», conviértelo a píxeles: 600 × 600.
Para pantallas, usa requisitos en píxeles. Para impresión, usa requisitos en píxeles más el tamaño físico.
Retina y HiDPI no son «300 DPI»
Las pantallas de alta densidad necesitan más píxeles fuente que las antiguas, pero eso no es lo mismo que cambiar los metadatos del archivo a 300 DPI.
Ejemplo:
- El diseño muestra una foto de producto a 600 píxeles CSS de ancho.
- Una pantalla 1x se apaña con una fuente de 600 px de ancho.
- Una pantalla 2x se beneficia de una fuente de 1200 px de ancho.
- Una pantalla 3x puede beneficiarse de una fuente de 1800 px de ancho si el detalle importa.
La imagen puede seguir etiquetada como 72, 96 o 300 DPI y la lógica del diseño no cambia. Lo que importa es la relación entre los píxeles fuente y los píxeles CSS mostrados.
Por eso las imágenes responsivas usan descriptores como 1200w o 2x, no «300dpi». El navegador intenta escoger una imagen con datos suficientes para el tamaño renderizado, la densidad de pantalla y las condiciones de red.
Cómo traducir peticiones habituales
Muchas peticiones de cambio de DPI en realidad piden otra cosa. Traduce la petición antes de tocar el archivo.
| Petición | Qué preguntar | Qué hacer |
|---|---|---|
| «Ponlo a 300 DPI» | ¿Qué tamaño físico de impresión? | Calcula píxeles = pulgadas × 300 |
| «Ponlo a 72 DPI para web» | ¿Qué ancho de visualización o tope de tamaño? | Redimensiona/comprime píxeles; la etiqueta DPI no es el objetivo |
| «Se ve borroso en línea» | ¿A qué tamaño CSS se muestra? | Exporta más píxeles fuente o revisa la compresión |
| «La imprenta dice baja resolución» | ¿A qué tamaño imprimes? | Usa una fuente de mayor resolución o reduce el tamaño de impresión |
| «El archivo pesa demasiado» | ¿Qué límite en bytes? | Redimensiona y comprime; cambiar solo el DPI no ayuda |
| «Necesito la foto de pasaporte a 300 DPI» | ¿Qué país y qué tamaño de papel? | Usa las dimensiones exactas de foto e imprime al 100 % |
Esa pregunta extra evita la mayoría de los errores de DPI.
Cómo aborda PhotoTools las tareas relacionadas con DPI
PhotoTools está pensado alrededor de lo que realmente cambia la salida: los píxeles.
Para trabajo web:
- Usa Redimensionar para fijar las dimensiones reales en píxeles.
- Aplica compresión si hay un objetivo de tamaño de archivo.
- Deja el original intacto.
- Exporta una copia web con un nombre útil, como
hero-1600.jpgocard-600.webp.
Para impresión de fotos de pasaporte o identidad:
- Abre el Creador de fotos de pasaporte.
- Elige un preset como 2 × 2 pulgadas, 35 × 45 mm o un tamaño personalizado.
- La herramienta convierte el tamaño físico de la foto a píxeles al DPI seleccionado.
- Construye una hoja de impresión de 4 × 6 o 6 × 4 pulgadas en el navegador.
- Imprime al 100 %, a tamaño real, con «ajustar a la página» desactivado.
- Mide la foto impresa antes de entregarla.
La implementación local usa el tamaño de foto seleccionado, el tamaño de hoja y el DPI para calcular las dimensiones en píxeles. Por ejemplo, una hoja de 4 × 6 pulgadas a 300 DPI se convierte en un lienzo de 1200 × 1800 píxeles. Un área de foto de 2 × 2 pulgadas a 300 DPI se convierte en 600 × 600 píxeles.
Eso es un diseño de impresión real. No tiene nada que ver con abrir una imagen web pequeña, cambiar el campo de metadatos a 300 y esperar que la impresión salga nítida.
Lista de comprobación práctica
Usa esta lista antes de editar un archivo porque alguien mencione DPI:
- Si el destino es un sitio web, pide dimensiones en píxeles y límites de tamaño.
- Si el destino es impresión, pide tamaño físico y DPI/PPI objetivo.
- Si el archivo pesa demasiado, redimensiona o comprime en vez de tocar metadatos.
- Si la imagen se ve borrosa, revisa píxeles fuente, compresión y tamaño de visualización.
- Si la impresión sale blanda, comprueba si la fuente tiene suficientes píxeles.
- Si la impresión sale con el tamaño físico equivocado, revisa la escala de la impresora y el tamaño del papel.
- Si es una foto de pasaporte o visado, mide la copia impresa y verifica los requisitos oficiales.
La versión corta: el DPI conecta los píxeles con el papel. Los píxeles y el CSS controlan la web.
Fuentes técnicas consultadas
Esta guía se revisó frente a:
- W3C CSS Values and Units Module Level 4, por las unidades absolutas de CSS, las unidades de resolución y la relación
1dppx = 96dpi. - W3C CSS Images Module Level 4, por cómo CSS define la resolución de imagen y la propiedad
image-resolution. - MDN: image-resolution, por las notas actuales de implementación y el estado experimental de
image-resolutionen CSS. - MDN: HTMLImageElement naturalWidth, por el dimensionado de imagen del navegador en píxeles CSS.
- MDN: referencia del elemento img, por
srcset,sizes, los descriptores de ancho y la selección de fuente del navegador. - Adobe Photoshop — tamaño y resolución de imagen, por la distinción de Photoshop entre dimensiones, resolución y remuestreo.
- Adobe Photoshop — cambiar tamaño y remuestrear, por cómo el remuestreo modifica los datos de píxeles y por qué resolución y tamaño físico son conceptos de impresión.
En resumen: cambiar la etiqueta DPI casi nunca es la solución. Decide primero el destino y luego cambia los píxeles, la compresión o el diseño de impresión que ese destino realmente necesita.