Recorta una imagen cuadrada en círculo y sobrevive más o menos el 79 por ciento de la superficie. La quinta parte que falta son todo esquinas, que es donde un logotipo cuadrado suele tener lo que lo hace un logotipo cuadrado.
Casi todas las plataformas recortan hoy las fotos de perfil en círculo, y casi todos los recursos de marca se dibujaron cuadrados. Ese desajuste es todo el problema.
¿A qué tamaño se muestra de verdad?
Mucho más pequeño que la versión que subes. Una foto de perfil aparece junto a publicaciones y comentarios a unos cuarenta píxeles de ancho, y la versión grande de la página de perfil se ve muchas menos veces.
| Dónde | Aproximadamente |
|---|---|
| Junto a un comentario | 24–32 px |
| En la cabecera de una publicación | 32–48 px |
| En una lista de seguidores | 48–56 px |
| En la página de perfil | 100–180 px |
La primera fila es para la que hay que diseñar. A treinta píxeles hay sitio para una forma o dos letras, y cualquier cosa más se convierte en una mancha que parece un avatar genérico.
Subirla a un tamaño mucho mayor sigue siendo lo correcto, porque la plataforma genera las versiones pequeñas a partir de ella. La decisión de diseño va de qué sobrevive a la reducción, no del archivo.
¿Qué funciona con un logotipo?
El símbolo solo, centrado, con margen alrededor. Quitar el nombre parece una pérdida y es lo que hace reconocible la imagen a los tamaños a los que de verdad se muestra.
Una sola letra en la tipografía de la marca es la alternativa fiable cuando no hay un símbolo compacto. Sobrevive al círculo, sobrevive a la reducción y se distingue al instante de una fotografía en una lista.
Aquí conviene darle al símbolo un fondo relleno en lugar de transparencia. Un logotipo transparente queda sobre el color que use la interfaz, que cambia entre el modo claro y el oscuro y entre plataformas.
¿Qué funciona con una cara?
Un recorte ajustado. Una fotografía encuadrada como retrato se convierte en un óvalo pequeño con una persona irreconocible dentro, porque casi todo el círculo lo ocupan los hombros y el fondo.
Recortar para que la cara llene casi todo el círculo lo resuelve; en el editor parece exagerado y queda bien en todos los sitios donde se usa. La prueba es reducir el resultado a unos cuarenta píxeles y ver si te reconocerías.
El fondo importa más de lo que parece. Un fondo recargado a treinta píxeles se convierte en ruido alrededor de la cara, y uno liso que contraste con ella se lee limpio a cualquier tamaño.
¿Tiene que funcionar en los dos temas?
Sí, porque las plataformas no la cambian. La misma imagen queda sobre una interfaz clara para unos y oscura para otros, así que lo que dependa del color de alrededor falla para la mitad.
La regla práctica es que la imagen tenga su propio borde definido, un círculo relleno de su propio color, en lugar de fundirse con lo que haya detrás. Un logotipo blanco sobre transparencia desaparece en un tema claro.
Es el mismo razonamiento que lleva a darle a un favicon su propia forma rellena, y por la misma razón: el entorno no lo controlas tú.
¿Tiene que ser igual en todas las plataformas?
Sí, y es de las formas más baratas de ganar reconocimiento. La misma imagen en todas partes hace que alguien que te ha visto una vez te identifique de un vistazo en otro sitio, a un tamaño demasiado pequeño para leer un nombre.
Cambiarla a menudo cuesta eso. En una lista que pasa deprisa, la imagen es el identificador que de verdad usa la gente, más que el nombre de al lado.
El artículo sobre banners cubre la otra mitad de un perfil, que tiene el problema contrario: un banner es grande y se recorta por el ancho, y el avatar va encima.
¿Cuánto del cuadrado sobrevive exactamente?
Más o menos el 79 por ciento. La superficie de un círculo inscrito en un cuadrado es π entre cuatro de la del cuadrado, que da algo menos de cuatro quintos, así que se descarta aproximadamente una quinta parte, y toda de las esquinas.
Esa es la cuenta que hay detrás del consejo práctico. Un diseño que llena su cuadrado de borde a borde pierde su contenido más exterior por todos los lados, y un diseño centrado con margen no pierde nada que estuviera haciendo algo.
La misma proporción vale para un cuadrado con esquinas muy redondeadas, y por eso un solo diseño suele servir para los dos recortes.
Preguntas que hace la gente
¿Cada cuánto debería cambiarla? Pocas veces. Es el identificador que la gente reconoce en una lista antes de leer un nombre.
¿Un avatar animado funciona? Unas pocas plataformas lo permiten y la mayoría se quedan con el primer fotograma. Diseña para la imagen fija.
¿Un equipo debería compartir estilo? Un encuadre y un fondo coherentes en todo el equipo se leen como algo deliberado a tamaño pequeño, cosa que las fotografías sueltas no consiguen.
¿Todas las plataformas son circulares? Casi todas. Unas pocas usan un cuadrado redondeado, y un diseño que funciona en un círculo funciona en los dos.
¿Puedo subir un PNG transparente? Sí, y se compondrá sobre un fondo que no eliges. Dale el suyo.
¿A qué tamaño la subo? Más grande que el mayor tamaño al que se muestra, cuadrada, y deja que la plataforma genere el resto.
¿Por qué la mía se ve borrosa? Se subió por debajo del tamaño de la página de perfil y se amplió.
Diseña para el círculo más pequeño. Recortar y girar imágenes aplica la máscara circular para que veas qué sobrevive, redimensionar imágenes hace el original cuadrado, y la tabla de tamaños de imagen para redes sociales, de momento en inglés, da las medidas que de verdad piden Instagram, Facebook y TikTok.