Social Media Custom Graphics Cheat Sheet

Personalizando el avatar, nuestra imagen on-line

Un avatar (y no me refiero a la película del mismo nombre que se basa en el concepto) es una imagen que representa a un usuario. Existen distintas tendencias como usar fotos reales, caricaturas, imágenes prediseñadas, autogeneradas o de personajes famosos ya sean reales o de comic, película, videojuego o serie de televisión.

A día de hoy prácticamente la totalidad de los sistemas de mensajería, foros de discusión o redes sociales permiten subir avatares de usuario (que suelen denominar imagen del perfil), fondos o “portadas”. Lo que no suelen especificar es el tamaño más adecuado para subir la imagen.

Aunque empecé con avatares prediseñados con el tiempo he evolucionado a imágenes reales que “humanizan” el perfil. Recientemente, he actualizado la foto que utilizo como mi avatar y me he enfrentado a este problema. Así que empecé a buscar y este es el resumen de mis pesquisas.

¿Por dónde empezamos?

Independientemente del servicio que estemos pensando hay que analizar una serie de aspectos antes de empezar.

  1. Todos los perfiles suelen utilizar avatares cuadrados (mismo ancho que alto). Así que tenemos que buscar una imagen que podamos recortar a esa proporción y que deje una composición adecuada.

    Los servicios suelen proporcionar herramientas para recortar y redimensionar la imagen al subirla. Personalmente, no me gusta su imprecisión y las transformaciones pueden estropear tu imagen (si usas alguna característica especial del formato).

  2. Los formatos normalmente admitidos son GIF, JPEG y PNG. Cada uno de ellos tiene sus particularidades, ventajas e inconvenientes. Personalmente, suelo utilizar PNG ó JPEG (dependiendo del tamaño del fichero).

    • Los GIF permiten tanto transparencias como animaciones. Sin embargo, las herramientas online suelen suprimir la animación (procesan únicamente el primer “fotograma”) y ponen un fondo blanco o negro por lo que no es aconsejable utilizarlos.
    • Los JPEG son formatos con pérdida. Al manejarlos hay que tener cuidado ya que en cada vez que se almacena se degrada su calidad (basta con tener una imagen maestra o “negativo” que no se modifique).
    • Por su parte los PNG también soportan transparencias. Al igual que con los GIF, al redimensionar las imágenes suelen poner el fondo en blanco o negro estropeando el posible efecto.
  3. Se suele limitar el tamaño máximo del fichero por lo que tenemos que minimizar al máximo su resolución sin que se vea afectada la calidad. En condiciones normales no suele ser un problema salvo que tengamos una imagen de alta calidad que ocupe decenas de MB.

    Para reducir el tamaño del fichero sin afectar a la calidad basta con generar imágenes con al menos 72 ppp y de la resolución lo más reducida posible.

Los servicios suelen proporcionar una herramienta para ajustar la imagen cuando se sube pero suele ser mejor hacerlo con alguna herramienta de tratamiento de imágenes (Gimp, Paint.NET o Photoshop, por citar algunas). Estas herramientas permiten recortar la imagen a la proporción deseada y redimensionarla para obtener un fichero lo más ligero posible. También permiten aplicar pequeñas mejoras como correcciones en el balance de la imagen, suprimir ojos rojos… o incluso artísticos (boceto a tinta, acuarela…)

Lo ideal es partir de una imagen de alta resolución que la recortaremos para que sea cuadrada y le aplicaremos los filtros deseados para formar el avatar a “máxima resolución”. A partir de esa imagen se redimensiona al tamaño necesario para cada perfil obteniendo una imagen de suficiente calidad y ligera.

Avatar en nuestros perfiles

El tamaño de los avatares ha ido incrementándose con el paso del tiempo. Hace apenas 4 ó 5 años era suficiente con 80px ó 100px, lejos de los tamaños que se utilizan hoy.

Social Media Custom Graphics Cheat Sheet

Social Media Custom Graphics Cheat Sheet (Original PDF version)

A la vista de esos datos, basta con crear una o dos versiones del avatar:

  • 200×200 el tamaño “estándar” utilizado en Facebook, LinkedIn y Twitter. Algunos servicios utilizan un avatar ligeramente más pequeño con lo que puede servir
  • 250×250 es el tamaño para Google+. Éste se puede utilizar en los anteriores servicios y usar las herramientas online para ajustar el tamaño.
  • 420×420 es el tamaño para Gravatar. Es el tamaño que utiliza en su perfil ya que una de las características del servicio es servir la imagen redimensionada al tamaño adecuado a blogs, foros, Github… Una opción es crear sólo este tamaño y pedirle el tamaño que deseemos a Gravatar.

Avatar de nuestros contactos

Pero no sólo manejamos nuestro avatar sino que en los smartphones (y algunos otros terminales no considerados como tales) es posible añadir una foto a cada uno de nuestros contactos para que aparezcan en la pantalla durante una llamada o al lado de sus mensajes. Estas imágenes tienen también sus particularidades.

En el caso de dispositivos con iOS si la imagen es de al menos 320×320 aparecerá a pantalla completa en el dispositivo mientras que si es más pequeña aparecerá en pequeño en la esquina superior derecha de la pantalla.

En el caso de Android (Google Contacts) la resolución es de 96×96 aunque con aplicaciones como Fotos de contactos HD externas puede incrementarse hasta los 256px.

Cualquiera de los dos tamaños (256×256 ó 320×320) son un buen compromiso entre calidad/tamaño, salvo si se prefiere usar la imagen a pantalla completa en iOS, que hay que utilizar 320×320 obligatoriamente.

Avatares generados

Aunque prefiero usar una foto real como avatar, el artículo no quedaría completo si no mencionara las numerosas herramientas para generar avatares estilo Pocoyo, Simpsons, South Park… Estos servicios suelen ser un asistente en el que se configuran las características (piel, peinado, accesorios) y permiten descargar la imagen.

Existen multitud de ellos y existen numerosas recopilaciones de este tipo de herramientas (15 generadores de avatares originales para tu perfil o 8 mejores sitios web para crear caricaturas (avatares) para tus perfiles sociales). Continuamente aparecen nuevos (y desaparecen algunos) cada cierto tiempo por lo que estas recopilaciones quedan obsoletas en pocos meses.