Existen, a mi juicio, unos cuantos falsos mitos sobre las imágenes digitales. Algunos, creo que los he ido desmontando durante estos meses que he escrito sobre diferentes formatos de imagen, como PNG o JPEG. Otros están asentados en el conocimiento más básico de muchos y les llevan a realizar ajustes en sus imágenes que carecen de sentido. Con argumentos, voy a intentar cazarlos. Puede que no estés de acuerdo, eso está bien, yo soy muy bueno equivocándome. Busca tus argumentos, y quédate con lo que más te convenza.

El soporte de la imagen

Entendemos como soporte cualquier cosa capaz de contener una imagen. En este caso, voy a separar los soportes en dos grandes grupos genéricos: digitales y físicos. Aunque siempre hay excepcionesesta división creo que es suficiente para entender estos conceptos.

Vamos a aceptar como soportes digitales la mayoría de pantallas comunes a día de hoy, éstas se caracterizan por ser una matriz de puntos que se iluminan o cambian de color; y como soportes físicos, todo aquello sobre lo que podemos escribir, garabatear a mano o imprimir.

– «¡Es que yo puedo pintar con un rotulador mi pantalla de la tele!»

Si piensas esto de verdad, no sigas leyendo, ve a dibujar en tu tele.

Lo cierto es que, no tengo un conocimiento suficiente como para asegurar que todo lo que voy a describir es absolutamente verdad y seguro que hay algún punto que podría matizarse o discutirse. En todo caso creo que lo que voy a contar hoy es suficiente para entender algunas cosas.

Las características de las imágenes

Lo primero que podemos definir de una imagen es la cantidad de colores que tiene y su tamaño: grande, mediana, pequeña.

La cantidad de colores que contiene es la profundidad de color. Hoy voy a centrarme en el tamaño.

El tamaño lo vamos a medir en ancho por alto: en imágenes en soportes físicos usaremos medidas físicas como centímetros, milímetros, pulgadas… En imágenes digitales, por lo general usaremos píxeles.

¿Qué es un píxel?

Un píxel es la unidad de imagen más pequeña que tiene color homogéneo. Si dividimos una imagen con una cuadrícula, el píxel estará definido por el cuadro más pequeño en el que no haya ningún cambio de color.

En una imagen física el píxel es un poco complicado de definir, y puede coincidir con el punto de color pero no siempre.

En una imagen digital, que ya está definida como una cuadrícula de colores, el píxel será cada uno de esos cuadros.

No existe una relación directa entre el píxel digital y el punto de color de una imagen impresa. Un punto de color puede ser representado en una pantalla por uno o más píxeles y viceversa.

A partir de ahora usaré el píxel cuando me refiera a imágenes digitales y el punto para imágenes físicas.

¿Cuál es la diferencia entre un punto y un píxel?

Definir el punto es casi tan complicado como definir el cero o la nada. He querido buscar punto en Wikipedia con la intención de, al menos tener una definición más o menos única… No me ha valido de mucho. Finalmente encontré una definición más o menos buena como el «Elemento primario de la expresión plástica. No tiene dimensiones, solo tiene posición.»

En una pantalla, hay que distinguir dos tipos de píxel. Por un lado, el píxel de dispositivo: éste tiene un tamaño definido para cada pantalla y está limitado por las características de fabrica del aparato. Como me comentó mi colega José Luis, «podríamos definirlo como un píxel físico».

Por otro lado, el píxel de la imagen, que será la unidad mínima de información de una imagen digital.

Una pantalla no puede pintar más píxeles de los que físicamente contiene su panel. Cuando necesita mostrar una imagen cuyos píxeles de imagen no coinciden con los píxeles de pantalla, se realizan transformaciones para conseguir adaptar la imagen, añadiendo o eliminando píxeles según sea necesario.

Densidad de píxel y densidad de puntos

Hablaba unas líneas atrás de que hay una diferencia entre el píxel de la imagen y el píxel de dispositivo, que es invariable. Así, una pantalla de 800×600px siempre tendrá 800 píxeles de ancho y 600 de alto. Y dependiendo del tamaño de la pantalla, normalmente dado en pulgadas medidas en diagonal, cada píxel tendrá un tamaño mayor o menor.

Densidad de píxel

Bienvenido al concepto densidad de píxel. La densidad de píxel vendrá dado por la cantidad de píxeles que caben en una unidad de medida, normalmente se usa la pulgada. No es relevante para entender el concepto saber si se trata de una pulgada medida en horizontal, en vertical, en diagonal o en superficie. Lo importante es entender que si el píxel es más pequeño, en una misma medida van a caber más píxeles y si es más grande van a caber menos.

Vamos a juntar los dos conceptos. Por un lado, el tamaño del píxel de dispositivo depende de la pantalla y, por otro lado, el tamaño de la pantalla no puede variar, luego la densidad de píxeles va a ser una propiedad exclusivamente aplicable a las pantallas de los dispositivos, no a las imágenes.

De hecho las imágenes, en una pantalla podemos estirarlas o encogerlas, pero, como el tamaño de la pantalla no cambia, la densidad de píxeles tampoco cambia.

Densidad de puntos

– «Pero algunos programas de edición de imagen permiten definir el dpi, o ppi, de una imagen.» Cierto. Entonces, ¿nos mienten? ¡Ojo! ¡PPI y DPI no se refieren a los píxeles! Se refieren a los puntos, puntos impresos. Lo que suele pasar es que no nos damos cuenta de lo que cambia cuando cambiamos esta propiedad.

Si nuestra imagen la hemos definido en unidades físicas, por ejemplo 20×30cm, al aumentar la densidad, nuestra imagen contendrá más píxeles. También, aumentará el tamaño del fichero de imagen. En el momento de imprimir, nuestra impresora pondrá más puntos y más pequeños consiguiendo mejor calidad de impresión. Bienvenidos al otro concepto densidad de puntos.

Si la imagen la hemos definido en píxeles, al cambiar la densidad lo que cambiará es el tamaño físico de la imagen. Aumentará o disminuirá el número de cm que ocupe. Pero la densidad de puntos será la misma. Al imprimir, los puntos serán más grandes y puede que se note el pixelado.

El pixelado en cuadraditos en las imágenes impresas se debe a que el punto de la imagen digital, el píxel, es cuadrado. El dato que recibe la impresora, le viene cuadriculado.

Una conclusión

Ahora, volvamos atrás. Si nuestra pantalla es invariable en tamaño, y es invariable en densidad de píxeles, la densidad de puntos ¿en qué afecta a la visualización de una imagen en pantalla? Pues eso, en nada. A la pantalla lo que le importa es el número de píxeles que tiene que pintar. Igualmente, el tamaño del fichero, va a depender de la cantidad de píxeles que tenga que guardar, el tamaño de estos, no importa.

Entonces, ¿cuál es el DPI apropiado para las imágenes en web?

Si te estás preguntando esto, es que no me he explicado nada bien, o que has leído demasiado rápido todo lo anterior.

He oído hasta la saciedad, y lo seguiré oyendo hasta la indigestión, que para web, una imagen debe estar a 72 puntos por pulgada (dpi). Por si aún no ha quedado claro, voy a mostrar algunas de las densidades de píxel de pantallas que podemos encontrar.

• Google Nexus 10 → 300.24 PPI
• Apple iPad Mini → 162.03 PPI
• HTC One → 468.7 PPI
• 1600×900@20”→ 91,79 PPI
• 800×600@14”→ 71,43 PPI

En https://www.sven.de/dpi/ puedes encontrar más

De modo que, si aún te empeñas en pensar que la densidad de puntos es relevante mostrar una imagen en una pantalla. Verás que 72ppi solamente se aproxima para una pantalla de 14” y 800×600px. En el resto de pantallas, si esto fuera cierto, estarías dando una experiencia bastante deficitaria al usuario.

Sin embargo, sí es importante si esa imagen la quieres imprimir. En este caso, yo suelo irme a los 300ppi.

Nota extra: El Píxel CSS

Esto no acaba aquí. Como podemos ver en https://developer.mozilla.org/ todavía tenemos más conceptos que relacionan el punto y el píxel en este caso. Decir que CSS tiene su propia manera de entender los tamaños del píxel y el punto. Esto, aunque a la hora de intentar explicar conceptos se convierte en una locura, es muy útil, dado que la gran variedad de pantallas haría imposible conseguir resultados que se adaptasen a todas.