La tecnología de retina permite una mayor definición en las imágenes pues duplica el número de pixeles por pulgada. Al ser una tecnología que, en general, mejora la experiencia de usuario no hay duda que deberías optimizar tu sitio web para retina. Aquí te damos algunos consejos para que puedas aprovechar esta tecnología y ofrecer un sitio web “retina ready”
Reemplazar fuentes
Si estás familiarizado con CSS3 seguro sabes que puede hacer cualquier familia de fuentes accesible desde CSS al incluir un enlace a dicha fuentes. Esto es bastante útil pues se puede incluir cualquier fuente, incluso las que son gráficas. Al enlazar estas fuente mediante CSS puedes emplear como iconos y se escalarán de manera automática. Te ahorra mucho trabajo pues evitarás tener que crear gráficos en vectores o subir dos archivos de diferentes tamaños.
La única desventaja de emplear este “truco” es que tus iconos serán de un solo color y tal vez no logres el efecto que estés buscando. Pero si el estilo de estos iconos funciona no dudes en usar este método para agilizar tu proceso.
Formato SVG
Los gráficos vectoriales se emplean usualmente para diseño de logos e iconos que deben escalarse en diferentes resoluciones para verse adecuadamente en los diversos dispositivos. Para incluir gráficos vectoriales en la web se usa el formato SVG, que contiene información sobre los colores, líneas, segmentos, sombras y todas las características que componen tu ilustración en vectores.
Imágenes
Las dos soluciones más comunes para colocar gráficos aptos para retina es a través de búsquedas en CSS3 o librerías de JavaScript. Cualquier puede funcionar, sólo depende del propósito y de tu método para programar sitios web.
El proceso de colocación de gráficos en CSS3 consiste en verificar cuando el usuario tiene tecnología de retina, de ser el caso, reemplaza las imágenes para que se vean correctamente. Aunque suena complejo, si el dispositivo soporta este lenguaje, el resultado es casi inmediato.
Por otro lado, gran parte de los navegadores y dispositivos soporta JavaScript, así que no dudes en emplearlo si e sientes más cómodo trabajando con este lenguaje de programación.
