Al crear sitios web y aplicaciones web, es importante tener en cuenta que los usuarios los abrirán en dispositivos con diferentes pantallas. Por lo tanto, debes hacer todo lo posible para que la maquetación se vea bien en cualquier dispositivo.
Hay muchas formas de preparar la maquetación, desde el uso de expresiones de medios hasta la escritura de scripts. No nos adentraremos en este tema y solo analizaremos los puntos principales que son útiles para los desarrolladores web principiantes.
¿Qué es un Pixel?
Para entender en qué se diferencian las pantallas Retina de las demás y cómo trabajar con ellas, primero debes entender el concepto de píxel. Hay dos tipos de píxeles: físico y CSS.
Un píxel físico es un píxel en la matriz del dispositivo. Por ejemplo, cuando decimos que el ancho de la pantalla del dispositivo es de 480 px, significa que hay 480 celdas indivisibles en todo el ancho. Son estas las que, mediante el esquema de color RGB, forman la imagen en la pantalla.
Cuantos más píxeles físicos haya en la pantalla, mayor será su densidad y más detallada será la imagen que se muestre en ella. Para medir la densidad de las pantallas, se utiliza una unidad especial PPI (píxeles por pulgada). Muestra la cantidad de píxeles físicos en una pulgada cuadrada de pantalla. Es decir, cuanto mayor sea el PPI, mejor será la gráfica.
El tamaño de los píxeles físicos puede variar entre diferentes dispositivos y fabricantes. Por lo tanto, ajustan la información que se muestra en la pantalla de sus dispositivos al píxel CSS. Si no lo hacen, las imágenes y los textos, cuyos tamaños están establecidos en CSS, se verán diferentes incluso en dispositivos que aparentemente son similares.
Por su parte, los desarrolladores nunca trabajan con píxeles físicos de dispositivos, solo con píxeles CSS.
¿A qué Equivale un Píxel CSS?
Inicialmente, el estándar W3C lo equiparaba a 1/96 de pulgada, es decir, unos 0,26 mm., y los navegadores, para simplificar los cálculos, lo tomaban como 1:1 con el píxel físico a una escala del 100%. Pero luego muchas cosas cambiaron: llegó el momento de las pantallas con una alta densidad de píxeles.
¿Qué son las Pantallas Retina?
Retina (Retina Display) es el nombre que se le da a las pantallas de Apple con una alta densidad de píxeles por pulgada cuadrada. Se habló por primera vez de ellas en 2010, cuando Steve Jobs presentó el iPhone 4. El nuevo smartphone, para entonces, tenía una pantalla con una densidad de 326 PPI, el doble que su predecesor, el iPhone 3GS.
Las pantallas Retina llevaron a los smartphones a un nuevo nivel. Según las palabras del propio Steve Jobs, en las pantallas Retina se logró un PPI tal que el ojo humano deja de distinguir los píxeles individuales. El texto empezó a verse como si estuviera impreso en un buen libro, no en la pantalla de un dispositivo móvil. Las imágenes se volvieron más nítidas y fluidas. Aparecieron los medios tonos y desapareció la «granulosidad» de las imágenes.
Hoy en día, casi todas las grandes marcas lanzan pantallas con una alta densidad de píxeles. No se les puede llamar Retina, ya que este nombre pertenece únicamente a Apple. Pero el principio de visualización es similar.
Cómo Saber la Densidad de Píxeles por Pulgada
Con los dispositivos Apple, todo es sencillo. Puedes ir a la página web oficial, seleccionar el dispositivo que te interese y hacer clic en el botón «Especificaciones» (ejemplo, iPhone 15). Accederás a una página con las características técnicas detalladas, incluyendo información sobre la diagonal de la pantalla, la resolución y el PPI:
Con otros dispositivos, puede ser un poco más complicado: no todos los fabricantes especifican la densidad de píxeles por pulgada. Por ejemplo, algunas marcas solo describen la diagonal y la resolución de la pantalla en las especificaciones técnicas. Por lo tanto, si necesitas saber el PPI de un dispositivo en particular, puedes calcularlo tú mismo con la siguiente fórmula:
PPI = √[(Resolución horizontal)² + (Resolución vertical)²] / Tamaño de la pantalla (en pulgadas)Si no quieres calcularlo a mano, puedes usar cualquier calculadora online. Por ejemplo, hay servicios de este tipo en el sitio web de Omni calculator, CalculatorSoup.com o sven.de. Muestran los mismos resultados, así que puedes elegir cualquiera.
Características de la Maquetación para Pantallas Retina
La retinización de imágenes es un estándar en el mercado del desarrollo web. Actualmente, muchos dispositivos (y no solo de Apple) utilizan pantallas con una alta densidad de píxeles. Por lo tanto, para que la maquetación se vea bien, debes aprender a retinizar el contenido. Vamos a analizar qué tipo de contenido necesita optimizarse para pantallas con alta densidad y qué contenido no necesita preparación adicional.
Texto
Con el texto no hay que hacer nada, ya que las fuentes modernas están en formato vectorial. El texto vectorial se adapta automáticamente a los parámetros de la pantalla y se ve igual en todos los dispositivos. Por lo tanto, todos los textos del sitio web deben agregarse no como imágenes, sino mediante <p>, <h1-h2>, <span> y otras etiquetas.
Excepción: logotipos
Incluso si los logotipos parecen texto, es mejor insertarlos como imágenes. La razón es que si, por alguna razón, la fuente principal no se carga, el navegador la reemplazará por una fuente estándar. En este caso, el logotipo ya no coincidirá con el estilo corporativo de la empresa. Por ejemplo, imagina el logotipo de Coca-Cola escrito no con la cursiva característica, sino con el Arial estándar. Así podría verse el logotipo de Coca-Cola si la fuente no se cargara:
Incluso en un caso tan simple, el logotipo de «CyberMentor» es mejor hacerlo en forma de imagen en formato SVG, y no escribirlo con texto simple
Iconos e imágenes decorativas
La mejor solución para los iconos y los elementos decorativos es usar el formato SVG. SVG es un formato de gráficos vectoriales, y, como en el caso de las fuentes, se ve muy bien en pantallas con diferentes resoluciones y densidades de píxeles, y no necesita optimización adicional al maquetar para Retina. Lo principal es no olvidarse de indicar el tamaño de estos elementos.
Los iconos de las categorías es mejor usarlos en formato SVG.
También existen otros formatos vectoriales, como AI, como en esta imagen. Es adecuado para la impresión en gran formato en una imprenta, pero no para un sitio web.
Imágenes de contenido e imágenes de fondo
Para las imágenes de contenido y de fondo, suelen utilizarse PNG, JPG, WebP y otros formatos de mapa de bits. ¿Por qué no SVG? Porque renderizar gráficos fotorrealistas en vectores es un proceso muy laborioso y técnicamente complejo.
Todos los gráficos de mapa de bits se componen de píxeles, cuya cantidad se determina al crear la imagen y permanece constante. Por lo tanto, cuando se amplía o se reduce una imagen de este tipo, su calidad se deteriora: se vuelve «granulosa». Debido a estas características, el principal énfasis en la optimización de la maquetación para pantallas Retina se centra precisamente en la preparación y adición de gráficos de mapa de bits: imágenes de contenido e imágenes de fondo.
Los gráficos deben prepararse al menos para dos variantes de pantallas. Una para las pantallas habituales, la otra, con un número mayor de píxeles, para Retina.
Por lo general, los diseñadores conocen las pantallas con alta densidad y preparan las imágenes adicionales por sí mismos. Así, si trabajas con Figma, puedes descargar fácilmente las imágenes con el índice @1x para pantallas normales y @2x para las pantallas cuya densidad de píxeles es el doble. Por lo general, estos índices son suficientes. Pero en algunos proyectos se va más allá y se utiliza una gráfica independiente con el índice @3x o superior.
Cómo Añadir una Imagen para Pantallas Retina
Al retinizar las imágenes, se tiene en cuenta la densidad de píxeles de la pantalla del dispositivo y, en función de ella, se muestran diferentes imágenes. Para que el navegador comprenda qué imagen mostrar al usuario, se utilizan expresiones de medios o atributos especiales.
Las imágenes de fondo se insertan mediante la expresión de medios @media(min-resolution: 2dppx) {...}.
Variante con prefijos:
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 2dppx) {
…
}Por ejemplo:
.block {
background-image: url("../img/some-img.png");
@media (min-resolution: 2dppx) {
background-image: url("../img/some-img@2x.png");
}
}Al añadir un fondo, asegúrate de indicar el ancho y la propiedad background-size. Si es posible reemplazar el fondo por un degradado, es mejor hacerlo. Se verá bien en todas las pantallas.
Otra forma de retinizar las imágenes de fondo es usar la función CSS image-set(). Esta función permite especificar varias opciones de imagen y proporciona al navegador la posibilidad de elegir por sí mismo cuál mostrar al usuario. La elección del navegador dependerá de la calidad de la conexión a Internet. Por ejemplo, si la conexión es lenta, el navegador mostrará la imagen marcada en la función como 1x.
.block {
background-image: image-set("some-image.png" 1x, "some-image-2x.png" 2x);
}La función image-set() tiene algunas particularidades:
- Los navegadores en webkit requieren la presencia del prefijo
webkit-image-set(). - En Safari, no es necesario indicar el prefijo, pero la sintaxis de la función es ligeramente diferente, usando la función
url():background-image: (url("platypus.png" 1x));. - Todavía no todos los navegadores tienen una compatibilidad total con esta función. Por lo tanto, antes de usarla, comprueba si la admiten los navegadores que necesitas mediante el servicio Caniuse.com.
Para las imágenes de contenido, debes utilizar el atributo srcset. Por ejemplo:
<figure>
<img src="some-image@1x.png" srcset="some-image@2x.png 2x" width="820" height="500" alt="Texto alternativo.">
<figcaption class="figurecaption-inside">Leyenda a través de figcaption.</figcaption>
</figure>Cómo Comprobar la Maquetación
Después de añadir varias opciones de gráfica, es útil comprobar cómo se muestran las imágenes en pantallas con diferentes densidades de píxeles. Esto se puede hacer con las herramientas del desarrollador. Por ejemplo, en Chrome DevTools, en la barra superior, puedes cambiar la densidad de la pantalla a DPR: 1.0, 2.0 o 3.0. Y en la pestaña «Red» o Network puedes ver qué imágenes se cargan en las pantallas con diferentes densidades. Lo importante es que, al cambiar el DPR, no te olvides de recargar la página.
Resumen
- Utiliza textos y degradados: no necesitan optimización adicional.
- Utiliza imágenes en al menos dos formatos: para pantallas normales y para Retina.
- Da prioridad a SVG siempre que sea posible.
- Al añadir imágenes de contenido, utiliza el atributo
srcset. - Para las imágenes de fondo, utiliza la expresión de medios
@media(min-resolution: 2dppx) {...}o usa la función CSSimage-set. - No olvides comprobar cómo se ve la maquetación en las pantallas con diferentes densidades de píxeles.
