Cómo recortar imágenes en línea: proporciones de aspecto, formatos y consejos prácticos

Recortar suena como la operación de imagen más simple que existe. Corta la parte que no quieres, conserva la que sí. Pero hay más que simplemente arrastrar un cuadro de selección: las proporciones de aspecto afectan cómo las plataformas muestran tus imágenes, recodificar archivos JPEG te cuesta calidad, y recortar demasiado cerca de tu sujeto puede hacer que una foto buena se sienta asfixiante.

Esta guía cubre el lado práctico — las proporciones de aspecto que realmente importan, las opciones de formato, cuándo una herramienta de navegador es suficiente y cuándo necesitas software adecuado.

Por qué el recorte importa más allá de lo obvio

El instinto detrás del recorte es la composición — eliminar el molesto estacionamiento en el fondo de una buena foto, o ajustar una foto de producto para que el artículo llene el encuadre. Eso es válido y probablemente el uso más común.

Pero para desarrolladores web y creadores de contenido, el recorte cumple un segundo propósito: ajustar imágenes a los contenedores en los que vivirán.

Una foto de 4000x3000px desde una DSLR colocada en un slot de Open Graph de 1200x630px se mostrará en la proporción incorrecta por la mayoría de las plataformas. La estirarán, la comprimirán o la recortarán automáticamente — y el recorte automático rara vez se centra en el sujeto correcto. Recortar deliberadamente a las dimensiones correctas significa que tu imagen se verá exactamente como lo pretendiste en todas partes.

El peso de la página es otro factor. Una imagen que se muestra a 500px de ancho no necesita tener 4000px de ancho en el archivo. Recortar a las dimensiones de visualización antes de subir puede reducir drásticamente el tamaño del archivo, lo que importa para la velocidad de carga de la página y los Core Web Vitals.

Proporciones de aspecto comunes y cuándo usar cada una

1:1 (Cuadrado) es el predeterminado para fotos de perfil y publicaciones en cuadrícula de Instagram. Casi todas las plataformas sociales que muestran fotos de perfil las muestran como círculos o cuadrados.

16:9 es el estándar para miniaturas de video, portadas de YouTube, banners principales y cualquier cosa que deba parecer cinematográfica.

4:3 fue la proporción estándar de TV y web temprana, y persiste en muchas plantillas de CMS y software de presentación.

2:1 (a veces llamado "doble ancho") es común para tarjetas de Twitter/X y encabezados de sitio.

9:16 (video vertical) se ha vuelto cada vez más importante con el contenido de video corto. Si estás reutilizando fotos para Instagram Reels, TikTok o portadas de YouTube Shorts, esta es la proporción a la que recortar.

3:2 es la proporción de sensor nativa de la mayoría de las DSLR y cámaras sin espejo.

Requisitos específicos de plataforma que vale la pena conocer

Para imágenes Open Graph (la vista previa que aparece al compartir un enlace en la mayoría de las plataformas sociales), 1200x630px es el tamaño estándar. Eso es aproximadamente una proporción 1.91:1.

Las tarjetas de Twitter/X también usan 1200x630px para tarjetas de resumen con imágenes grandes.

El feed de Instagram admite múltiples proporciones: cuadrado 1:1, retrato 4:5 (el máximo recorte de retrato), y paisaje 1.91:1.

CSS object-fit: La alternativa al recorte físico

Para desarrolladores web específicamente, hay una distinción importante entre recortar el archivo de imagen real y usar CSS para controlar cómo una imagen llena su contenedor.

object-fit: cover le dice al navegador que escale la imagen para que llene completamente el contenedor, luego recorta el desbordamiento:

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center top; /* Enfocar en la parte superior */
}

La compensación: usar object-fit no reduce el tamaño de archivo que descarga el navegador. Para páginas críticas en términos de rendimiento, recortar físicamente la imagen a las dimensiones correctas es mejor que depender de CSS.

Cuándo una herramienta de navegador es suficiente

Para la mayoría de las tareas de recorte rutinarias — redimensionar una foto de perfil, preparar una imagen para una publicación de blog, poner una captura de pantalla en las dimensiones correctas — una herramienta basada en navegador es completamente adecuada.

La herramienta de recorte de imágenes en ToolBox Hub te permite subir una imagen, establecer una proporción de aspecto personalizada o arrastrar un área de recorte libre, y descargar el resultado.

Las herramientas de navegador tienen limitaciones reales. Generalmente tienen dificultades con archivos muy grandes — las imágenes de más de 10-15MB pueden ser lentas de procesar o fallar completamente dependiendo de los límites de memoria del navegador.

Entendiendo la pérdida de calidad por recodificación JPEG

JPEG es un formato con pérdida: cuando guardas un JPEG, el codificador descarta algunos datos de imagen usando un algoritmo de compresión.

Cuando abres un JPEG, lo recortas y lo guardas de nuevo como JPEG, el codificador se ejecuta de nuevo en la imagen ya comprimida. Acumulas artefactos de compresión. Haz esto varias veces y las imágenes comienzan a verse suaves o a desarrollar halos visibles alrededor de los bordes y las áreas de alto contraste.

La regla práctica: siempre vuelve al original cuando sea posible. Si estás trabajando con fotos, conserva el RAW original o el JPEG de alta calidad y vuelve a exportar desde él cada vez que necesites un recorte diferente.

Para capturas de pantalla e imágenes con colores planos o texto, usa PNG o WebP en lugar de JPEG.

Consideraciones sobre el formato de salida

JPEG es el formato más compatible para fotos. Usa JPEG a calidad 75-85 para un buen equilibrio entre tamaño de archivo y calidad visual.

PNG preserva cada píxel exactamente, lo que lo hace ideal para capturas de pantalla, diagramas, logotipos e imágenes con transparencia.

WebP es el formato de Google y el estándar moderno para imágenes web. Produce archivos 25-35% más pequeños que el JPEG equivalente a calidad comparable, y también admite compresión sin pérdida y transparencia.

Errores comunes de recorte que debes evitar

Recortar demasiado cerca de las caras. Un retrato donde la parte superior del cabello está cortada parece asfixiante. Deja algo de aire sobre la cabeza.

Ignorar la regla de los tercios. Centrar cada sujeto se vuelve aburrido y a menudo desperdicia el interés visual de una foto.

Recortar una imagen de baja resolución. Recortar elimina píxeles, así que si empiezas con una imagen pequeña, tienes menos con qué trabajar.

Subir el original sin recortar a una plataforma social y dejar que lo recorte automáticamente. Las plataformas sociales no son inteligentes acerca de qué parte de una imagen mantener. Recortan por defecto al centro, lo que a menudo corta caras o sujetos importantes.

Poniéndolo todo junto

Recortar bien se trata principalmente de saber qué espera el contenedor de destino antes de empezar. Determina la proporción de aspecto que necesitas, mantén suficiente resolución para mostrar en las dimensiones requeridas, elige el formato de salida correcto y preserva tu archivo original.

Para recortes rápidos basados en navegador, la herramienta de recorte de imágenes maneja bien los casos comunes. Para cualquier cosa más compleja — procesamiento por lotes, edición no destructiva o enmascaramiento avanzado — Photoshop, GIMP o Affinity Photo te servirán mejor.