Usos habituales de las imágenes redondeadas

  • Fotos de perfil: preparar el recorte permite controlar el encuadre en lugar de dejarlo en manos del ajuste automático de cada plataforma.
  • Íconos de aplicaciones: las tiendas y los sistemas operativos suelen mostrarlos dentro de un cuadrado con esquinas redondeadas.
  • Tarjetas y miniaturas: un radio discreto ayuda a integrar la imagen con el resto de la interfaz.
  • Material impreso: los retratos circulares y las esquinas suavizadas también funcionan bien en credenciales, tarjetas y composiciones fotográficas.

Primero decide si necesitas CSS o un archivo nuevo

Si la imagen solo aparecerá en un sitio web, CSS puede ser suficiente. La propiedad border-radius cambia la forma en que el navegador muestra la imagen, pero no modifica el archivo. Al abrir ese mismo JPG fuera de la página, seguirá teniendo esquinas rectas.

Conviene crear un archivo redondeado cuando la forma deba conservarse al mover la imagen. Las fotos de perfil, los archivos adjuntos, los recursos para aplicaciones y los trabajos impresos no pueden depender del CSS de una página.

Las esquinas transparentes necesitan PNG

Para redondear el archivo de forma permanente, la zona exterior debe convertirse en píxeles transparentes. PNG admite transparencia; JPG no.

Al guardar el resultado como JPG, las esquinas tienen que rellenarse con algún color, normalmente blanco. Puede parecer correcto sobre una página blanca, pero el rectángulo se hará visible al colocar la imagen sobre un fondo oscuro o de otro color.

Una foto cuadrada junto a su versión recortada en círculo, con un patrón de cuadros que indica transparencia real
El patrón de cuadros identifica la parte transparente del archivo. El fondo situado detrás del PNG podrá verse a través de esos píxeles.

¿Recorte circular o rectángulo redondeado?

El círculo funciona bien para avatares, retratos y otras imágenes cuyo sujeto está centrado. Todo lo que quede fuera del límite circular se elimina, por lo que conviene revisar el encuadre antes de exportar.

El rectángulo redondeado conserva una mayor parte de la composición original. Suele ser la mejor opción para fotos horizontales, miniaturas de productos, tarjetas e íconos que todavía necesitan una forma rectangular.

Cómo elegir el radio de las esquinas

Toma como referencia el tamaño final y el uso de la imagen. Un radio pequeño suaviza los bordes sin cambiar demasiado la forma y suele funcionar bien en fotografías grandes y tarjetas de contenido. Un radio mayor llama más la atención y puede favorecer a íconos compactos o miniaturas cuadradas.

Revisa la vista previa sobre un fondo parecido al que tendrá la imagen. Así podrás detectar si las esquinas quedaron demasiado redondeadas o si el recorte acercó el sujeto en exceso a alguno de los bordes.

Cómo crear la imagen redondeada

Abre la imagen en una herramienta de redondeado, elige el recorte circular o ajusta el radio de las esquinas y exporta el resultado como PNG. La transparencia quedará integrada en el archivo descargado y se conservará al subirlo, enviarlo por correo o imprimirlo.

Antes de exportar

¿La imagen original puede ser JPG? Sí. Puedes comenzar con JPG, PNG u otro formato compatible. Exporta el resultado como PNG para conservar la transparencia de las esquinas.

¿El PNG funcionará sobre fondos diferentes? Sí. Las esquinas transparentes dejan ver el color o la imagen que haya detrás, sin añadir un recuadro blanco.

¿El recorte circular utiliza la misma técnica? Sí. Ambas opciones aplican una máscara de transparencia; lo único que cambia es la forma de esa máscara.

Redondea las esquinas o recorta una imagen en círculo

Elige la forma, revisa la vista previa y exporta un PNG transparente. Orisod procesa la imagen en tu navegador sin subirla.

Redondear esquinas de imagen →

Usa CSS cuando el efecto redondeado pertenezca a una sola página web. Exporta un PNG transparente cuando la forma deba acompañar a la imagen dondequiera que la utilices.