Cómo solucionar los problemas de las imágenes en las pantallas retina

Cuando usamos nuestro móvil para navegar, podemos ver en muchas ocasiones que determinadas imágenes no se muestran lo nítidas que debieran, especialmente cuando nuestro smartphone tiene una pantalla retina o, dicho de otro modo, una pantalla de alta resolución. Generalmente suelen dar ese problema imágenes pequeñas, como iconos, pero también el logotipo de la marca. Remarco esto: el logotipo de la marca. Eso es lo suficientemente importante como para prestar atención a este problema. Lo bueno es que hay soluciones y yo voy a explicar qué es eso de la resolución, como se forman las imágenes y qué tienes que hacer para que se vean nítidas en los smartphones.

¿Qué es la resolución de pantalla?

Muy fácil. Es la densidad de píxeles por pulgadas, centímetros o cualquier tipo de medida. Generalmente se plantea en píxeles por pulgada (ppp). Un píxel es un cuadradito muy pequeño en la pantalla que da información de color y luminosidad. Con menos densidad por pulgada, veremos píxeles de mayor tamaño. Con píxeles mayores veremos una línea recta diagonal como una pequeña sierra, con dientes, y lo mismo ocurre con los elementos curvado, como las letras. Por el contrario, cuando mayor sea el número de píxeles en una pulgada, más pequeñas son esas celdas con información de color. Mientras más pequeños sean los píxeles, más definidas serán las letras o cualquier línea curva o diagonal.

Una pantalla de PC normal tendrá una resolución de 72ppp, mientras que la de un iPhone 6s Plus, un Samsung Galaxy S6 o cualquier otro gama alta superarán los 400ppp. Casi 6 veces más. Eso quiere decir que tendremos que aumentar el tamaño de las imágenes o su resolución.

Las imágenes están compuestas por píxeles

Casi todas las imágenes que vemos en una web están formadas por píxeles. Normalmente, en las cámaras se define el tamaño de las fotografías en megapíxeles (MP). Y esto es porque están compuestas de millones de puntitos minúsculos y cada uno muestra un color y una luminosidad. Solamente comenzaremos a ver estos puntitos cuando ampliemos la imagen más allá del 100%. Es por ello que el aumentar el tamaño de las fotografías hace que pierdan definición y comiencen a verse zonas dentadas. A estas imágenes se las conoce como mapa de bits.

Existen otro tipo de imágenes, las vectoriales, que son dibujos cuyas formas se crean mediante cálculos matemáticos y pueden ampliarse o reducirse sin pérdida de calidad. Los logotipos se crean mediante esta modalidad. Pero cuando las exportamos a jpg, png o gif, se convierten en mapas de bits y pierden sus cualidades vectoriales. Aún así, podemos convertirlas a SVG, un formato vectorial que pueden interpretar correctamente los navegadores web, aunque todavía no está muy extendido. Las tipografías también son vectoriales y se muestran vectorialmente. Eso sí, cuando veamos una imagen puramente vectorial en un monitor, quedan igualmente afectadas por la resolución en píxeles de la pantalla, pudiéndose observar los dientes de sierra si el monitor tiene una baja resolución.

El problema con las pantallas viene de la resolución y el tamaño de las imágenes. Si debemos mostrar un logotipo en mapa de bits de una pulgada de alto por una de ancho a una resolución de 72ppp en un monitor de 72ppp, veremos esa imagen prácticamente a tamaño real y sin problemas. Lo malo viene cuando la mostramos en una pantalla de 300ppp e igualmente queremos mantener su dimensión en una pulgada. El navegador tendrá que ampliar dicha imagen para ocupar ese espacio e, inevitablemente, al aumentar la proporción de cada píxel, veremos el logotipo menos nítido y con dientes, lo que se conoce como imagen pixelada.

¿Cuáles son los smartphones que tienen pantalla retina o de alta resolución?

Pues la verdad es que hoy en día son casi todos, no sólo los de gama alta. Normalmente se consideran de alta resolución cuando superan los 196ppp, pero la verdad es que es muy frecuente verlos alrededor de los 300ppp. Sólo los muy baratos quedan por debajo de esos 196ppp.

Así que si en las estadísticas de tu web observas un tráfico alto con dispositivos móviles y tus imágenes no están adaptadas a las pantallas retina, tendrás que trabajarlas un poco para ofrecer una experiencia de navegación más digna a tus usuarios de móvil.

La pega es que el peso en MB de las imágenes de alta resolución es un poco mayor y conllevará más consumo de datos para el usuario.

Lo bueno es que podemos hacer que el navegador cargue unas imágenes de baja resolución (72ppp) para una pantalla de PC y las de 300ppp cuando detecte que es un smartphone. ¡Y es sencillo!

Solución 1 a las pantallas retina: trabajar el HTML de la página con el atributo SRCSET.

Es, en mi opinión, la más sencilla y la que más uso yo. Se trata de exportar la misma imagen a diferentes resoluciones y llamarlas por medio del atributo SRCSET de la etiqueta HTML <img>. Un ejemplo, si guardamos una imagen llamada foto1-72.jpg a 72ppp y otra llamada foto1-300.jpg a 300ppp, idéntica a la anterior, pero a mayor resolución, las llamaríamos de la siguiente manera:

<img src="foto1-72.jpg" srcset="foto1-72.jpg 1x, foto1-300.jpg 2x" alt="Imagen de ejemplo">

Esto es lo que ves y así funciona:

1. El atributo src llama la imagen que se cargará por defecto: foto1-72.jpg.
2. El atributo srcset establece que foto1-72.jpg está a la resolución normal (1x) y que foto1-300.jpg está a una resolución mayor (2x). En realidad está a más de 4x, pero queremos que se cargue a partir de 196ppp, o sea, 2x. Podríamos poner más resoluciones si vemos que es lo adecuado.
3. El atributo alt es el mismo para las dos imágenes, puesto que muestran lo mismo.

Añadir que no es estrictamente necesario aumentar la resolución de la imagen. Podemos crear la misma imagen a 72ppp pero de mayor tamaño y, si hemos establecido un tamaño en las CSS, esta imagen se adaptará, lo que hará que parezca que tiene mayor resolución.

¿Quién decide cuando se carga cada resolución? El navegador. No hay que hacer nada más. El navegador se encarga de distinguir la resolución de pantalla y elige la imagen adecuada.

Nada mejor que unos ejemplos gráficos. Eso sí, tendréis que comparar las imágenes en vuestro smartphone o en una pantalla de escritorio retina.

En esta imagen cargamos una resolución u otra con el atributo SRCSET. Este logotipo se muestra con un ancho de 150px, su tamaño real o 1x, si lo ves en un monitor de 72ppp. Si lo ves en tu smartphone con pantalla retina, se cargará una versión de 800px de ancho y de alto, pero reducida a 150px. Pero en este último caso, no veremos pixelación.

Veamos ahora una comparativa. Este ejemplo se verá apropiadamente desde una pantalla retina o de alta resolución. Desde un monitor normal no notarás diferencias entre las dos. Ambas imágenes se muestran con un ancho y un alto de 150px. En este caso, no usamos 'srcset'. Simplemente es para mostrar que debemos usar imágenes de mayor resolución o mayor tamaño para pantallas retina.

Solución 2 a las pantallas retina: las CSS y las media queries.

Otra opción es trabajar las CSS, pero para ello debemos crear cajas que carguen imágenes de fondo. Es menos directo que el HTML, pero muchas veces serán necesarias porque usaremos "backgrounds" en el fondo de la página o en otros elementos.

.fondo {
	display:inline-block;
	width: 50px;
	heigth: 50px;
	background: url(foto1-72.jpg) top left no-repeat;
	background-size: 50px 50px;
}
@media only screen and (min-device-pixel-ratio: 2) {
	.fondo {
		background: url(foto1-300.jpg) top left no-repeat;
	}
}

Lo que hacemos con .fondo es crear un bloque de 50px de ancho por 50 de alto, asignarle la imagen de 72ppp y que esta tenga el mismo tamaño del bloque para que lo ocupe por completo. Luego creamos la media query para .fondo y le decimos que cuando la pantalla tenga el doble de densidad, cargue la imagen de 300ppp. Las demás propiedades de .fondo las mantiene, sólo escribimos la que queremos modificar.

Solución 3 a las pantallas retina: tipografías de iconos.

El uso de las tipografías de iconos se han puesto de moda por su efectividad. Las tipografías son vectores (cálculos matemáticos) y esto hace que podamos aumentarlas o reducirlas sin que pierdan detalles. Si ampliamos una fotografía en seguida veremos los píxeles que la componen. Así que cuando se tratan de colocar iconos, estas tipografías nos permiten aumentarlos o reducirlos sin deformar la imagen y se adaptan perfectamente a cualquier resolución de pantalla.

En internet se pueden encontrar juegos tipográficos de iconos gratis o de pago. WordPress tiene la suya propia, los Genericons, y podemos usarlos con CSS o con HTML, según nuestras preferencias. También Bootstrap tiene las suyas propias, llamadas Glyphicons.

Veamos unas muestras de Genericons:

Su uso puede ser tan sencillo como copiar los códigos HTML que facilitan en la web Genericons.

Y eso es todo. Hay soluciones a nivel de Javascript, pero sólo he querido poner las más fáciles. Sé que la mayoría de los dueños de empresas o comercios no saben de HTML y CSS. Si os parece complicado, siempre podéis contar con algún profesional que os arreglen las imágenes y os modifiquen el HTML o las CSS de vuestra web. Si no tenéis demasiadas imágenes, será un trabajo rápido. Eso sí, preocuparos de que al menos el logo se vea bien en pantallas retina.