Recortar imagen en círculo gratis en línea — Creador de fotos de perfil redondas

Círculo o cuadrado redondeado: qué forma usar

La forma no es realmente decisión tuya: la plataforma aplica su propia máscara al mostrar tu avatar y no puedes anularla. Lo que sí eliges es si tu archivo encaja con esa máscara.

Importa porque un círculo recorta cerca del 21% de un cuadrado, y todo en las esquinas. Si recortas tú el círculo, ves exactamente qué sobrevive. Si subes un cuadrado entero y cruzas los dedos, el círculo de la plataforma cortará lo que hubiera en esas esquinas: la parte de arriba de un gorro, un hombro o medio logotipo.

La regla práctica: las caras piden un círculo; los logotipos con texto, un cuadrado redondeado. Una cara ya es más o menos redonda, así que las esquinas nunca llevaban información. Un logotipo con texto suele ser más ancho que alto, y el círculo le amputa los extremos de la palabra. Por eso Slack, iOS y Play Store usan cuadrados redondeados para los iconos mientras que todas las redes sociales usan círculos para las personas.

Por qué un PNG transparente merece los bytes de más

Un círculo recortado en JPG no es realmente un círculo. JPG no tiene canal alfa, así que las cuatro esquinas tienen que contener algo — normalmente blanco. Sobre una página blanca nadie lo nota. Pon ese avatar sobre un tema oscuro, una tarjeta de color, una presentación o un vídeo y aparecerán cuatro triángulos blancos alrededor de la cabeza.

PNG y WebP tienen canal alfa, así que las esquinas guardan «nada» y el círculo se compone limpiamente sobre cualquier fondo. Por eso PNG es la opción por defecto aquí. WebP hace lo mismo con cerca de un tercio de los bytes y todos los navegadores actuales lo leen, pero algunos formularios de subida y programas de escritorio antiguos siguen rechazando la extensión, así que PNG es la elección segura cuando entregas el archivo al sistema de otra persona.

El único caso a favor de JPG es un límite de peso. Si un formulario exige JPG o te limita a unas pocas decenas de kilobytes, elige JPG aquí y pon como color de fondo el que use realmente la página de destino, para que las esquinas se fundan con ella.

Encuadrar una cara que siga leyéndose a 32 píxeles

Tu avatar casi nunca se ve al tamaño al que lo exportaste. En un hilo de comentarios mide de 32 a 40 píxeles. A ese tamaño lo único que sobrevive es la silueta de la cabeza, el contraste entre cara y fondo y, más o menos, dónde están los ojos. Todo lo demás es una mancha.

Así que recorta más cerca de lo que te parece natural. Llena entre el 60 y el 70% de la altura del círculo con la cabeza, coloca los ojos un poco por encima de la línea central y deja un dedo de aire sobre el pelo para que el recorte no parezca accidental. Un fondo recargado es el error más común: compite por los pocos píxeles disponibles y convierte la miniatura en ruido. Si tu fondo está muy cargado, uno liso o desenfocado detrás de un recorte circular se lee mejor a cualquier tamaño.

Una prueba práctica: exporta el avatar y míralo en tu explorador de archivos con las miniaturas más pequeñas. Si no distingues que eres tú, nadie más lo hará.

El «squircle» de iOS, explicado

Los iconos de apps de Apple no son rectángulos redondeados. Un rectángulo redondeado une sus lados rectos con una esquina de cuarto de círculo, y la curvatura salta de golpe en esa unión: el ojo lo lee como un ligero pliegue. Apple usa en su lugar una superelipse , donde la curvatura crece de forma gradual desde el borde, de modo que el contorno no tiene ninguna transición visible. Los diseñadores llaman «squircle» al resultado.

Canvas solo puede dibujar esquinas de arco circular, así que el modo de cuadrado redondeado de aquí es la aproximación de rectángulo redondeado, no una superelipse real. A tamaño de avatar la diferencia es de un píxel o dos en cada esquina y nadie va a notarlo. Pon el radio de esquina en torno al 22% del lado y darás con la misma proporción que usa Apple en los iconos de apps; la herramienta usa 24% por defecto, que es como Slack y la mayoría de apps de chat enmascaran sus avatares.

El control llega hasta el 50%, que es un círculo: a un cuadrado redondeado cuyo radio de esquina alcanza la mitad del lado no le queda ningún borde recto. Esa continuidad es la razón de que aquí ambas formas compartan un mismo código en vez de ser dos herramientas distintas.

Los bordes, y por qué se recortan

Un anillo alrededor del avatar es una buena forma de separarlo de un fondo recargado, y es el único detalle de estilo que sobrevive a la máscara de la plataforma, siempre que el anillo esté dentro de tu imagen y no alrededor de ella.

Conviene ser preciso aquí. Si una herramienta añade un borde de 6 px fuera de un círculo de 320 px, el archivo pasa a 332 px, y entonces la plataforma lo reescala y vuelve a aplicar su máscara circular, que corta por la mitad de tu anillo y lo deja desigual. Esta herramienta dibuja el borde dentro del tamaño que has pedido, así que 320 px siguen siendo 320 px y el anillo queda justo en el borde que la máscara espera. El control del borde está limitado al 12% del lado por la misma razón: a partir de ahí deja de ser un anillo y empieza a ser un marco.

Por qué recortar en el navegador es más privado

La mayoría de las webs de «recortar en círculo en línea» suben tu foto, la recortan en un servidor y te la devuelven. Para una foto de tu propia cara la diferencia es real: existe una copia en el disco de otra persona, sujeta a la política de retención que tenga este mes y, a menudo, a una cláusula de las condiciones de uso que les concede una licencia sobre ella.

Resizo no tiene ningún servidor que reciba imágenes. El recorte se hace en tu pestaña con la propia API canvas del navegador. Dos formas de comprobarlo: abre el panel de Red de tu navegador y verás que no se envía nada mientras recortas, o desconéctate de internet una vez cargada la página y recorta igualmente: sigue funcionando.

Un efecto secundario útil: al reescribir el archivo se pierden los metadatos EXIF, así que las coordenadas GPS y la fecha que tu móvil grabó en el original no viajan con el avatar que publicas. Si necesitas esos metadatos, guarda el archivo original.