Recortar imagen

¿Qué es un recortador de imágenes?#

Recortar parece la operación de imagen más simple: conservar un rectángulo y tirar el resto. En cuanto necesitas hacerlo bien, sin embargo, se acumula todo un conjunto de preguntas: ¿el recorte mantiene una relación de aspecto fija para una miniatura o un banner?, ¿puedo enderezar primero un horizonte inclinado?, ¿la exportación será lo bastante pequeña para subirla?, ¿algo de esto sale de mi dispositivo? Esta página es un estudio completo de recorte que responde a las cuatro preguntas dentro del navegador.

Arrastras una imagen, dibujas una caja de selección sobre ella (o agarras uno de sus ocho tiradores para redimensionarla), opcionalmente rotas o volteas todo el encuadre, bloqueas la selección a una relación como 1:1 o 16:9 y exportas la región recortada como PNG, JPEG o WebP con la calidad que elijas. Todo se ejecuta sobre la Canvas API dentro de esta pestaña: el archivo original se lee en local y el resultado se recodifica en local, así que no se sube nada.

Cómo se usa#

1. Arrastra una imagen a la zona de arrastre punteada (o haz clic en ella para elegir un archivo). Aparece el editor, que sustituye a la zona de arrastre.
2. Usa la barra de herramientas sobre la vista previa para transformar todo el encuadre antes de recortar:
   • Rotar 90° gira la imagen 90° en sentido horario en cada clic. La selección de recorte se sigue en el espacio de coordenadas rotado, así que siempre se alinea con lo que ves.
   • Voltear H / Voltear V reflejan el encuadre en horizontal o en vertical.
3. Elige una Relación de aspecto en el desplegable: Libre (arrastra cualquier rectángulo), 1:1 (avatar o perfil), 4:3 o 16:9 (fondo de pantalla o portada de vídeo). Con una relación bloqueada, la caja mantiene esa forma mientras arrastras: los tiradores de esquina crecen para alcanzar tu cursor, y los de borde deducen el lado perpendicular automáticamente.
4. Arrastra el cuerpo de la caja para moverla; arrastra cualquiera de sus ocho tiradores para redimensionarla. Funciona tanto con ratón como con táctil.
5. Ajusta las opciones de exportación bajo la vista previa:
   • Formato de salida — JPEG (el más pequeño, con pérdidas), WebP (pequeño, moderno) o PNG (sin pérdidas; el control de calidad se desactiva porque PNG no tiene dial de calidad).
   • Lado máximo de salida — un número en píxeles; el lado más largo del recorte se limita a este valor conservando la relación. Déjalo en 0 para mantener la resolución completa del recorte.
   • Calidad — 5–100, solo usada por JPEG y WebP. 92 es un valor por defecto razonable; bájalo a 80 para miniaturas.
6. Mira la lectura junto a Descargar: muestra el tamaño de la selección y el tamaño de salida resultante, p. ej. 1500×1500 → 800×800 cuando una selección 1:1 se limita a 800.
7. Haz clic en Descargar para guardar. Usa Restablecer recorte para devolver la selección a su valor centrado por defecto.

Características clave#

• Redimensionado con relación bloqueada que de verdad se siente bien. Los tiradores de esquina crecen para alcanzar tu cursor en ambos ejes; los de borde ajustan solo el eje arrastrado y recalculan el otro a partir de la relación. Sin estiramientos accidentales.
• Selección consciente de las transformaciones. La rotación y el volteado se aplican una vez a un canvas fuera de pantalla, y la caja de recorte vive en ese espacio transformado, así que lo que seleccionas es exactamente lo que exportas: sin desajuste entre vista previa y salida.
• Tres formatos con calidad honesta. PNG se marca como sin pérdidas y desactiva el control en lugar de ignorarlo silenciosamente. JPEG y WebP exponen un valor de calidad real que se pasa directo al codificador.
• Límite de salida opcional. Define una dimensión máxima y el recorte se escala hacia abajo preservando la relación (útil para avatares, imágenes de Open Graph o límites de subida) sin que tú hagas la matemática.
• Lectura en vivo antes/después. Las dimensiones de la selección y las dimensiones finales de salida están una junto a otra, así un límite o un cambio de relación son visibles antes de confirmar.
• 100 % local. La imagen la decodifica el navegador y la recodifica el navegador. No hay endpoint de subida.

Ejemplo práctico#

Tienes una foto paisaje de 4000×3000 y necesitas una miniatura de banner 16:9 cuyo lado más largo sea 1280 px. Carga la foto, pon Relación de aspecto en 16:9 y arrastra la selección sobre el horizonte. Como la relación está bloqueada, la caja encaja en un rectángulo 16:9; supongamos que la selección se asienta en 4000×2250 en píxeles de origen. Ahora escribe 1280 en Lado máximo de salida. La lectura se actualiza a:

crop size  4000 × 2250  →  1280 × 720

Elige Formato de salida: JPEG, deja Calidad en 92 y haz clic en Descargar. Obtienes un JPEG de 1280×720 de unos 180–280 KiB según la escena: una fracción del archivo original de varios megabytes, con la relación de aspecto exacta que necesita un banner protagonista y sin bandas negras. El mismo flujo con 1:1 y Lado máximo de salida 512 produce una foto de perfil lista para subir.

Preguntas frecuentes#

La selección no baja de un cierto tamaño. ¿Por qué?#

Hay un mínimo de 8 píxeles por lado, impuesto para que los tiradores sigan siendo agarrables y la exportación nunca sea un recorte degenerado. Si necesitas un recorte extremadamente ajustado, no hagas zoom y recortes una región minúscula: recorta un área más grande y luego escálala hacia abajo con Lado máximo de salida.

Bloqueé 16:9 pero la caja cambió de tamaño al arrastrar cerca del borde.#

Es el limitador de bordes manteniendo la caja completamente dentro de la imagen. Cuando una caja con relación bloqueada se saldría por un borde, el lado más corto se reduce para que la relación sobreviva dentro del espacio disponible. Mueve primero la caja hacia el centro y luego redimensiónala.

¿Debería exportar JPEG o WebP?#

WebP con la misma calidad es típicamente un 25–35 % más pequeño que JPEG y hoy es compatible con todos los navegadores que importan. Usa JPEG solo cuando algún pipeline heredado aguas abajo rechaza WebP. Usa PNG cuando el recorte es un logo, una captura de interfaz o cualquier cosa con bordes afilados y color plano donde los artefactos con pérdidas serían visibles.

¿Recortar reduce el tamaño del archivo?#

Puede, de dos formas: menos área significa menos píxeles que codificar, y Lado máximo de salida puede reducir la escala encima de eso. Pero un recorte de 200×200 de una foto ruidosa en calidad 100 puede seguir siendo más grande que la imagen completa en calidad 80: el control Calidad es la palanca real para el tamaño con pérdidas.