Cómo funciona el recorte de imágenes en el navegador
El proceso de recorte se ejecuta completamente dentro de la pestaña de tu navegador usando la Canvas API. Sin procesamiento en servidor, sin subidas, sin servicios de terceros. Cada paso ocurre en tu dispositivo.
- Carga la imagen en un elemento
<img>para que el navegador la decodifique localmente. Un lienzo superpuesto renderiza la imagen escalada para que quepa en la ventana, mientras que un rectángulo de selección arrastrable muestra la región de recorte actual. - Arrastra el rectángulo por sus bordes o esquinas para ajustar el área de recorte. El rectángulo permanece sujeto a los límites de la imagen para que no puedas seleccionar una región fuera de la foto. Cuando una proporción fija está activa (1:1, 16:9, 4:3), el redimensionamiento mantiene esa proporción automáticamente.
- La lectura de píxeles se actualiza en vivo mientras arrastras, mostrando el ancho, alto, X e Y actuales del recorte en coordenadas de píxeles de la imagen. Esto te permite apuntar a dimensiones exactas sin conjeturas.
- Cuando haces clic en Recortar y Descargar, la página dibuja solo la región seleccionada de la imagen de origen en un lienzo fuera de pantalla a la resolución de píxeles original, luego exporta el resultado mediante
canvas.toBlob()en el mismo formato que el archivo de origen. Se genera una URL Blob para la descarga.
¿Por qué recortar imágenes online?
- Recortar elimina bordes no deseados, espacio vacío o desorden visual. Un solo recorte a menudo mejora la composición de una foto más que cualquier filtro o ajuste de color.
- El control de la proporción es esencial para las plataformas de publicación. Los feeds de redes sociales esperan 1:1 para perfiles, 16:9 para miniaturas de video y 4:3 para fotografía estándar. Recortar con la proporción correcta evita el molestio letterboxing o los recortes al subir.
- El recorte del lado del cliente es la única opción en dispositivos corporativos restringidos que carecen de un editor de fotos. Como no se sube nada, no hay riesgo de fuga de datos ni se necesita revisión de cumplimiento para imágenes sensibles.
- La lectura de dimensiones en vivo elimina las conjeturas. Ves las coordenadas de píxeles y el tamaño de selección mientras arrastras, para que puedas recortar a un ancho y alto exactos sin cambiar a una herramienta de medición de píxeles.
Aplicaciones comunes del recorte
Recortar es una de las ediciones de imagen más comunes en la publicación web, las redes sociales y el desarrollo de software. Aquí hay tres patrones donde un recortador basado en navegador ahorra tiempo.
- Preparar fotos de productos para una tienda online. Recorta a una proporción consistente 1:1 o 4:5 para que cada miniatura de catálogo se alinee en la cuadrícula. La exportación preserva el formato original, así que las fotos de producto JPEG se mantienen como JPEG.
- Recortar capturas de pantalla para documentación o informes de errores. Recorta la barra de herramientas del navegador, la barra de tareas de Windows o las notificaciones sensibles antes de adjuntar la imagen a un ticket o una solicitud de cambios.
- Encuadrar una imagen principal o banner para una página de aterrizaje. Bloquea el preajuste 16:9, coloca la parte más importante de la foto en el centro del rectángulo de recorte y exporta a la resolución original para la mejor calidad en pantallas retina.
Un ejemplo práctico: recortar una foto de 4000×3000 a 1200×675 para un banner principal
Una foto de 4000×3000 píxeles de una cámara digital es demasiado grande para un banner web típico. El espacio del banner puede ser de 1200×675 (un marco 16:9).
Suelta la foto en la zona de carga. La imagen se carga a resolución completa pero se escala para ajustarse a la ventana para una interacción de arrastre cómoda. Selecciona el preajuste de proporción 16:9. El rectángulo de recorte se ajusta instantáneamente a la región 16:9 más amplia que quepa en la imagen. Arrastra el rectángulo para posicionar el punto focal — un pico de montaña, un producto, el rostro de una persona — en el encuadre. La lectura en vivo muestra la selección actual a 4000×2250 (la ventana 16:9 de la imagen completa). Toma un controlador de esquina y arrastra hacia adentro hasta que la lectura de ancho llegue a 1200 px. La altura sigue automáticamente porque la proporción está bloqueada. Haz clic en Recortar y descargar. La página extrae la región seleccionada de 1200×675 de los píxeles originales y entrega el archivo recortado en el formato de origen. Todo el proceso toma uno o dos segundos y no usa ancho de banda de red más allá de la carga inicial de la página.
¿Qué formatos de imagen se admiten para recortar?
La herramienta acepta cualquier formato que el navegador pueda decodificar: PNG, JPEG y WebP cubren casi todos los casos de uso reales. La salida recortada se guarda en el mismo formato que el archivo de origen. PNG permanece sin pérdida, JPEG conserva su nivel de calidad original y WebP sigue siendo WebP. El formato se detecta a partir del tipo MIME del archivo de origen.
¿El recorte reduce el tamaño del archivo de imagen?
Recortar elimina píxeles, por lo que el tamaño del archivo de salida suele ser menor que el de origen, especialmente cuando recortas un borde grande o un área vacía. La exportación usa el formato de archivo original y sus parámetros de codificación — PNG permanece sin pérdida, JPEG conserva su configuración de calidad original — así que el único ahorro proviene de la reducción de píxeles, no de la recompresión.
¿Qué hacen los preajustes de proporción?
Los preajustes (1:1, 16:9, 4:3, 3:2, 9:16) bloquean la relación ancho-alto del rectángulo de recorte. Cuando un preajuste está activo, arrastrar cualquier esquina o borde ajusta el tamaño de selección manteniendo la proporción constante. Cambiar al modo Libre elimina la restricción para que puedas redimensionar el rectángulo arbitrariamente. La proporción se aplica sobre coordenadas de píxeles de la imagen, por lo que la salida exportada tiene exactamente la proporción que seleccionaste.
¿La imagen se sube a un servidor?
No. La imagen nunca sale de tu dispositivo. La página usa la API File del navegador para leer la imagen en memoria y la Canvas API para recortar y exportar el resultado. Puedes verificarlo abriendo el panel Network de las DevTools de tu navegador — las únicas solicitudes salientes durante el recorte son la carga inicial de la página y las llamadas de anuncios. No se transmiten datos de imagen.
¿Puedo recortar un área específica introduciendo coordenadas exactas de píxeles?
La versión actual ajusta el rectángulo de recorte mediante interacción de arrastre en la vista previa de la imagen. Puedes leer las coordenadas de píxeles en vivo para X, Y, ancho y alto de la selección. La entrada numérica directa para el rectángulo de recorte no está disponible en v1, pero es una mejora planificada para una futura actualización.
¿Qué ocurre con la imagen original?
El archivo original permanece en tu dispositivo. La página lo lee en la memoria del navegador para mostrarlo y recortarlo, pero nunca modifica el archivo de origen en el disco. La salida recortada es un archivo nuevo que descargas por separado. El original permanece intacto en su ubicación original en tu ordenador o teléfono.
¿Hay un límite de tamaño de archivo para recortar?
La herramienta respeta un límite de 30 MB por archivo en la zona de carga para mantener la memoria del navegador bajo control en dispositivos de gama baja. Si tu imagen es mayor de 30 MB, puedes redimensionarla primero usando una herramienta dedicada de redimensionamiento de imágenes antes de cargarla aquí para recortarla.
¿El recorte funciona en móviles y tabletas?
Sí. Los controles del recorte están diseñados con objetivos táctiles en mente, y la interacción usa eventos pointer que funcionan tanto con clics de ratón como con toques de dedo. En una pantalla de teléfono, la vista previa de la imagen se adapta al ancho disponible y los controles se apilan verticalmente para un uso fácil con una mano.