En una pantalla, los DPI no significan nada. El valor de DPI guardado en un archivo de imagen es una nota que le dice a la impresora con qué densidad colocar los píxeles, y un navegador no la lee. Dos archivos con las mismas dimensiones en píxeles se ven idénticos en una página web tengan la etiqueta 72, 96 o 300 DPI, y el de la etiqueta más alta no es más nítido.
¿Qué guarda realmente el campo de DPI de una imagen?
Un solo número, o dos (uno por eje), en la cabecera del archivo: cuántos píxeles deben caber en una pulgada cuando la imagen se imprime. Al dividir los píxeles por ese número se obtiene el tamaño impreso. Una foto de 3000 píxeles de ancho con la etiqueta 300 DPI se imprime de 10 pulgadas de ancho. Si vuelves a etiquetar el mismo archivo como 150 DPI, se imprime de 20 pulgadas, con exactamente los mismos píxeles, solo que más separados.
La etiqueta no cambia nada de la imagen en sí. Si editas solo los DPI, los datos de píxeles quedan intactos. Lo que cambiaste fue una sugerencia para el software que coloca imágenes en papel: un procesador de texto, un programa de maquetación, un controlador de impresión. Esos programas suelen leerla para decidir con qué tamaño llega la imagen al insertarla, y por eso el número parece tan importante a quienes trabajan con ellos.
¿Por qué se dice que las imágenes web deben ser de 72 DPI?
Es un resto de las primeras pantallas de Macintosh, donde un píxel se dibujaba como un punto tipográfico y un punto mide 1/72 de pulgada. Con ese arreglo, 72 píxeles por pulgada describían la pantalla, y "resolución web" se volvió una expresión corriente. Windows usaba 96 por una razón parecida. Ninguno de los dos números describe las pantallas actuales, y ninguno fue nunca leído por un navegador para decidir de qué tamaño dibujar una imagen.
El consejo sobrevive porque es inofensivo. Exportar a 72 no hace daño, y quienes lo aprendieron siguen repitiéndolo. Lo que nunca hizo fue volver el archivo más liviano ni más rápido. Si un archivo de 72 DPI pesa menos que uno de 300 DPI, la causa es que además alguien redimensionó los píxeles, y los píxeles son lo que importa.
¿Qué decide el tamaño de una imagen en una página?
Dos cosas: las dimensiones en píxeles de la imagen y el tamaño que le da la página. Sin CSS, un navegador dibuja una imagen con su ancho en píxeles, contados como píxeles CSS. Un píxel CSS se define como 1/96 de pulgada, que es una unidad de la hoja de estilos y no una medida de tu vidrio. Un teléfono y un monitor con densidades físicas distintas muestran una imagen de 400 píxeles de ancho con el mismo ancho CSS.
Las pantallas densas añaden una complicación. Una pantalla con relación de píxeles de dispositivo de 2 usa un bloque de 2×2 píxeles físicos por cada píxel CSS, así que una imagen mostrada a 400 píxeles CSS de ancho tiene 800 píxeles físicos que rellenar. Si entregas 400, el navegador los estira y la imagen se ve borrosa. Si entregas 800, se ve nítida. Esa es la decisión de "resolución" en la web, y vuelve a ser una cantidad de píxeles: aproximadamente el doble del ancho mostrado en las pantallas densas habituales, como detallan en cifras los tamaños que convienen a las imágenes web.
Así que cuando un diseño pide una imagen principal "en alta resolución", la pregunta a responder es cuántos píxeles de ancho. Si tienes una imagen demasiado grande para eso, la solución es reducirla, y un redimensionador que funciona en tu navegador lo hace sin enviar el archivo a ninguna parte.
¿Cuándo importa el número de DPI?
Cuando el archivo va a papel, o a un programa que maqueta papel. Una imprenta que pide 300 DPI en realidad te está diciendo cuántos píxeles necesitas para el tamaño que quieres: multiplica las pulgadas impresas por 300. Una impresión de 8 por 10 pulgadas necesita 2400 por 3000 píxeles. El mismo archivo con la etiqueta 72 DPI sería tratado como de 33 por 42 pulgadas por un programa que confíe en la etiqueta, así que al insertarlo en un documento puede aparecer una imagen del tamaño de la página hasta que lo reescales.
Tres puntos prácticos:
- 300 es una convención para fotos impresas que se miran a un brazo de distancia, no una ley. Los carteles que se ven desde lejos suelen imprimirse con densidades mucho menores, y la imprenta te dirá la cifra que quiere.
- Subir la etiqueta de DPI nunca agrega detalle. Si la cantidad de píxeles es insuficiente para el tamaño de impresión, las únicas soluciones honestas son un original más grande o una impresión más chica.
- La etiqueta es solo un valor por defecto. Los programas de impresión y maquetación permiten cambiar el tamaño, y cuando lo haces, la etiqueta vuelve a no importar.
¿Qué hace el redimensionador de imágenes con los DPI?
Trabaja en píxeles y nada más. El redimensionador de este sitio recodifica a través del canvas del navegador, y ese codificador no escribe una etiqueta de DPI con sentido. Un archivo que produzca se abrirá en otros programas con el valor por defecto de ese programa, normalmente 72 o 96. Los píxeles son los que pediste; la etiqueta simplemente falta. Si una imprenta insiste en la etiqueta, defínela después en el editor que te indiquen. El redimensionador no estampará 300 en un archivo y no puede decirte un tamaño de impresión, así que haz tú la división con la cantidad de píxeles que muestra.
Lo mismo vale para cualquier cosa que pase por un canvas, incluido el compresor de imágenes. Ninguna de las dos herramientas es el lugar para preparar un archivo cuya función es llevar una etiqueta concreta.
¿Una imagen de 300 DPI carga más lento en la web?
No por sí misma, porque la etiqueta ocupa unos pocos bytes. Un archivo llamado "300 DPI" suele ser grande por otra razón: se exportó con un tamaño pensado para imprimir, con miles de píxeles de ancho. Esos píxeles cuestan bytes, y el navegador no muestra una imagen de ancho de página más grande por ellos. Reduce las dimensiones en píxeles a lo que necesita el diseño y el peso baja; cómo reducir el tamaño de una imagen recorre ese orden de operaciones.
Si un archivo tiene el tamaño equivocado, lo que hay que cambiar es la cantidad de píxeles, y el redimensionador de imágenes muestra las nuevas dimensiones antes de descargar, todo dentro de tu navegador. Cuando sepas que una impresión necesita, por ejemplo, 2400 por 3000 píxeles, escribe exactamente eso en vez de buscar una casilla de DPI.
La misma confusión entre una etiqueta y los píxeles aparece con las proporciones: la relación de aspecto es una tercera propiedad independiente de una imagen, y la relación entre las tres explica la mayoría de las preguntas del tipo "por qué mi imagen se ve mal".
Preguntas frecuentes
¿Importan los DPI en las imágenes de un sitio web?
No. Un navegador dibuja una imagen a partir de sus dimensiones en píxeles y del tamaño CSS que le da la página, y nunca lee el valor de DPI guardado en el archivo. Dos archivos con los mismos píxeles pero distinta etiqueta de DPI se ven idénticos en una página web y pesan lo mismo.
¿Debo guardar las imágenes web a 72 DPI?
Puedes hacerlo, pero no cambia nada. La cifra de 72 viene de las primeras pantallas de Macintosh y nunca ha afectado cómo un navegador muestra una imagen ni lo que pesa el archivo. Lo que cuenta es el ancho en píxeles: aproximadamente el doble del ancho mostrado en pantallas con relación de píxeles de dispositivo de 2.
¿Cuántos píxeles necesito para una impresión a 300 DPI?
Multiplica el tamaño impreso en pulgadas por 300. Una impresión de 4 por 6 pulgadas necesita 1200 por 1800 píxeles, y una de 8 por 10 necesita 2400 por 3000. Cambiar la etiqueta de DPI de un archivo más pequeño no agrega píxeles, así que la impresión seguiría viéndose borrosa.
¿Puedo cambiar los DPI de una imagen sin cambiar su calidad?
Sí, porque la etiqueta son metadatos y los píxeles quedan intactos. Cambiarla solo altera el tamaño que el software de impresión y maquetación supone para la imagen. Es distinto de remuestrear, donde el programa agrega o descarta píxeles y la imagen misma cambia.
¿Por qué mi imagen se ve borrosa en una pantalla de alta resolución?
Probablemente el archivo tiene muy pocos píxeles para el espacio que ocupa. En una pantalla con relación de píxeles de dispositivo de 2, una imagen mostrada a 400 píxeles CSS de ancho necesita unos 800 píxeles para verse nítida; con 400, el navegador los estira. Los DPI no intervienen en esto.
Última actualización 7 de octubre de 2026
