La Mitad del Anillo de Tu Foto de Perfil Se Tira
Toda plataforma que muestra una foto de perfil la muestra como círculo. Tú subes un cuadrado y la app le aplica la máscara. Esa máscara es donde muere el anillo que diseñaste, porque un trazo apoyado en el borde del cuadrado queda centrado justo en la línea por donde la máscara corta.
La mitad cae fuera del círculo. No más o menos la mitad — exactamente la mitad, en todos los tamaños que medimos.
Qué le hace el recorte a un anillo
Esto se puede medir en vez de discutir. Traza un anillo en un color que nada más use, aplica la máscara circular que va a aplicar la plataforma, y cuenta cuántos de esos píxeles siguen ahí en la línea horizontal del centro:
| Avatar | Anillo pedido | Anillo que sobrevive |
|---|---|---|
| 400 px | 20 px | 10 px |
| 400 px | 40 px | 20 px |
| 1000 px | 60 px | 30 px |
El motivo es lo único sobre los trazos de canvas que todo el mundo sabe y nadie
aplica aquí: un trazo se centra en su trayectoria. Dale una trayectoria en el radio
R — el borde de la imagen — y se extiende A/2 hacia dentro y
A/2 hacia fuera. La mitad de fuera está fuera del círculo, así que la
máscara se la lleva.
Lo que hace que esto merezca un texto no es la aritmética. Es que el resultado no parece roto. Un anillo con la mitad del ancho que pretendías parece un anillo más fino, que parece una decisión de diseño. Nada falla, nada avisa, nada falta. Simplemente publicas en silencio algo distinto de lo que hiciste — y si intentas corregirlo a ojo, acabas dibujando un anillo de 40 píxeles para obtener uno de 20, sin enterarte nunca del porqué.
El arreglo es una resta
Mete la trayectoria hacia dentro la mitad del ancho del trazo. Traza en
R − A/2 en lugar de R y el ancho entero cae dentro del
círculo:
var R = size / 2;
var W = Math.round(size * ringPercent / 100);
ctx.lineWidth = W;
ctx.beginPath();
ctx.arc(R, R, R - W / 2, 0, Math.PI * 2); // no R
ctx.stroke();Medido igual que antes: 20 px pedidos, 20 px sobreviviendo. 40 por 40. 60 por 60. Una línea, y el anillo es el anillo que dibujaste.
Las esquinas nunca fueron tuyas
El anillo es la mitad visible del problema. La mitad invisible es lo que cuesta el círculo antes de que añadas nada.
Un círculo inscrito en un cuadrado cubre π/4 de su área. Contar los píxeles que sobreviven a una máscara circular da 21,46 % de la imagen perdida — idéntico a 400 px y a 1000 px, porque es una proporción y no una cuenta de píxeles, y 1 − π/4 es 21,46 % exactamente.
O sea que más de una quinta parte de cada avatar jamás subido no la ha visto nadie. Todo lo que te importe — una cara, un logo, una palabra — tiene que caber dentro del círculo inscrito, o no está en la foto. Un logo recortado justo a su caja pierde las esquinas siempre.
Cuánta foto cuesta un anillo
Luego el anillo come hacia dentro de lo que dejó el círculo. Un anillo de ancho
A en un avatar de tamaño T deja una foto de
T − 2A de diámetro, y el área va al cuadrado:
| Avatar | Anillo | Foto restante | Foto oculta |
|---|---|---|---|
| 400 px | 8 px | 384 px | 7,8 % |
| 400 px | 20 px | 360 px | 19 % |
| 400 px | 40 px | 320 px | 36 % |
| 1000 px | 60 px | 880 px | 22,6 % |
Un anillo de 40 píxeles en un avatar de 400 oculta más de un tercio de la fotografía. Es un intercambio real y vale la pena hacerlo a propósito: un anillo contundente es un anillo contundente, pero también es un recorte más cerrado en tu cara del que seguramente querías.
Por qué el ancho debería ser un porcentaje
Elige un anillo en píxeles y solo funciona en un tamaño de exportación. Veinte píxeles son rotundos a 400 px y casi invisibles a 1500 px — el mismo número, una cuarta parte del ancho relativo. Los porcentajes sobreviven al cambio; las cuentas de píxeles no, y por eso un avatar que se veía bien cuando lo hiciste se ve mal el día que la plataforma empieza a servir una versión más grande.
El cinco por ciento es un buen valor por defecto. Se lee con claridad en cualquier tamaño y cuesta el 19 % de la foto, que es lo máximo que un anillo debería quitarle a una cara.
Qué hacer al publicar
- Mantén el sujeto dentro del círculo inscrito. Las esquinas ya no están antes de empezar, y 21,46 % es mucho para perderlo sin querer.
- Exporta a 800 × 800. Queda cómodamente por encima de lo que muestra cualquier plataforma grande, así que sobrevive a su reducción con detalle de sobra.
- Deja las esquinas transparentes. Se enmascaran, así que la transparencia es el archivo honesto — salvo que publiques donde el cuadrado se ve sin recortar, donde la transparencia toma el color de fondo de esa página y parece un error.
- Revisa una vista previa redonda, no una cuadrada. Una vista cuadrada te enseña una imagen que nadie va a ver nunca.
Pruébalo
Nuestro generador de anillo para foto de perfil hace la resta de arriba, y te enseña una tercera vista previa dibujada como se hace siempre para que veas la diferencia en vez de creernos. Te informa del ancho del anillo que sobrevive, de la foto que queda dentro y del 21,46 % que se llevó el círculo. Todo ocurre en tu navegador — la foto nunca se sube.
Si la foto todavía no es cuadrada, el redimensionador de imágenes la deja lista primero, y el verificador de zona segura enseña qué tapa una app cuando publicas otra cosa.
Preguntas frecuentes
¿Por qué el anillo pierde solo la mitad y no todo?
Porque un trazo de canvas se centra en su trayectoria. Una trayectoria en el borde del cuadrado deja la mitad del trazo dentro del círculo y la mitad fuera, y la máscara se queda con la mitad de dentro. Mete la trayectoria hacia dentro la mitad del ancho del trazo y todo queda dentro.
¿Pasa en todas las plataformas?
En todas las que muestran el avatar como círculo, que hoy son casi todas. Los pocos sitios que muestran un cuadrado — algunos foros, algunas apps de chat y a veces la versión grande en la página de perfil — enseñan el anillo entero y las esquinas también, y ese es el argumento para rellenar las esquinas en vez de dejarlas transparentes.
¿Puedo dibujar el anillo con el doble de grosor para compensar?
Te da el ancho visible correcto, y además mete el anillo hacia dentro sobre la foto en la misma medida que añadiste, porque solo se muestra la mitad interior. Meter el trazo hacia dentro te da el ancho que pediste en el sitio donde lo pediste.
¿El 21,46 % se pierde de verdad, o son solo las esquinas que parecen vacías?
Se pierde de verdad. El número es el área del cuadrado menos el área del círculo inscrito, 1 − π/4, y contar los píxeles que sobreviven a la máscara devuelve la misma cifra a 400 px y a 1000 px. Nada fuera del círculo llega a renderizarse.
¿Qué ancho de anillo debería usar?
El cinco por ciento del avatar es un buen valor por defecto: claramente visible en cualquier tamaño de exportación y con un coste del 19 % de la foto. Pasa del 8 % y estás recortando la cara más que decorándola.