¿Cómo creo imágenes Retina para dispositivos móviles?

Apple comenzó la locura: una resolución de pantalla tan buena que el ojo humano no puede distinguir la diferencia entre impreso y digital. Apple las llama imágenes Retina. El resto del mundo las conoce como píxeles por pulgada (PPI).

Como marco de referencia, la impresión está en cualquier lugar entre 300 a 600 PPI. La mayoría de los dispositivos móviles líderes están alrededor de 300 PPI. El problema es el siguiente: Muchas PC siguen estando alrededor de 120 PPI. Para la web, la diferencia entre 120 y 300 PPI para imágenes puede significar la diferencia entre una pequeña imagen de 50 KB descargándose rápido y las imágenes masivas de muchos megabytes que toman tiempo para descargarse a través de conexiones más lentas.

La buena noticia es que hay maneras darle la vuelta a este problema espinoso. La primera decisión que debe tomar es si se debe utilizar una imagen vectorial (una imagen creada por líneas matemáticamente formadas) o una imagen de mapa de bits (una imagen creada píxel a píxel). Ambas tienen ventajas y desventajas.

Vamos a empezar con las imágenes vectoriales. La ventaja que las imágenes vectoriales tienen sobre las de mapa de bits es que la imagen se puede ampliar con elegancia a cualquier resolución de tamaño y no verse pixelada. La desventaja es que no puede tener imágenes fotorrealistas. Pero usted puede acercarse.

Las imágenes vectoriales se crean de forma nativa en el programa Illustrator de Adobe. Logos de  compañías, dibujos animados y arte lineal se pueden dibujar en vectores. Todos los navegadores principales ahora son compatibles con la presentación de vectores nativa mediante el uso de gráficos vectoriales escalables (SVG), un formato de archivo. Aquí está la buena noticia: Illustrator y la mayoría de herramientas de dibujo principales soportan SVG como exportación.

Las imágenes de mapa de bits se ponen un poco más complicadas. Hay muchos formatos diferentes para un mapa de bits que incluyen JPEG, PNG y GIF. Para las imágenes Retina, tendrá que mantenerse alejado de GIF, ya la resolución de las imágenes GIF es muy baja. Francamente, me sorprende que sigan siendo populares.

JPEG y PNG son los dos formatos que se desea utilizar para imágenes Retina. Muchas cámaras digitales toman sus fotos en JPEG o PNG a una resolución de 8 a 20 MB. Una imagen de 8MB se verá muy bien cuando se imprima en papel de tamaño póster. Para la web, se necesita dos tipos de imagen: alta y baja resolución. Photoshop y otras herramientas de edición de fotos le permitirá exportar imágenes en diferentes tipos de resolución.

Las herramientas de gestión de contenido web, como WordPress, ahora son compatibles con la presentación de diferentes resoluciones de imágenes para diferentes navegadores. Tome ventaja de este servicio. Déle al iPhone una imagen increíble y a su PC una página web de carga rápida.

Al final del día, usted tiene muchas opciones. No es un caso de SVG frente JPEG o PNG; es más un caso de SVG o JPEG o PNG para ofrecer imágenes Retina de calidad, deliciosas.