Bhinish Dhiman
Cómo recortar, rotar y cambiar el tamaño de una imagen de una sola vez sin perder nitidez
Traducido del original en inglés. Leer el original
Arrastra la imagen al editor de imágenes, define el recorte arrastrando o escribiendo Left, Top, Width y Height, gírala con los botones de 90°, escribe el Width o el Percent final y presiona Download una sola vez. La herramienta aplica recorte, volteo, rotación y cambio de tamaño en ese orden fijo y codifica una única vez. Para redimensionar usa Lanczos3 en lugar del escalador propio del navegador, que pierde detalle visiblemente en reducciones de más de un tercio.
Un trabajo típico tiene tres verbos. Una foto de 4032 × 3024 tomada mirando hacia abajo sobre un escritorio salió de lado, y necesita un recorte cuadrado, un cuarto de giro y un tamaño final de 1080 píxeles. Si lo haces en tres sitios web de una sola función, son tres subidas, tres descargas y tres codificaciones nuevas de la misma imagen. Si lo haces en un solo lugar, es una decodificación y una codificación, y la nitidez que sobrevive depende sobre todo de cómo el último paso reduce los píxeles.
El ejemplo práctico, paso a paso
| Paso | Tamaño resultante | Megapíxeles | Lo que importa aquí |
|---|---|---|---|
| Foto original | 4032 × 3024 | 12.19 | Cualquier indicador de orientación que haya escrito el teléfono se respeta al cargarla; esta foto está de lado de verdad |
| Recorte 1:1 centrado (Left 504, Top 0, Width 3024, Height 3024) | 3024 × 3024 | 9.14 | (4032 − 3024) ÷ 2 = 504 píxeles recortados de cada lado |
| Cuarto de giro con ↻ 90° | 3024 × 3024 | 9.14 | Un cuadrado conserva su tamaño; los números del recorte siguen refiriéndose a los mismos bordes |
| Width puesto en 1080 | 1080 × 1080 | 1.17 | 1080 ÷ 3024 = 35.7% del ancho, una reducción del 64% |
| Descarga | Un archivo | Una codificación, con el nombre del formato que el navegador escribió en realidad |
La última fila antes de la descarga es donde se gana o se pierde la nitidez. Una reducción del 64% está muy por encima del punto, alrededor de un tercio, a partir del cual el escalador integrado de un navegador empieza a desechar detalle de forma visible.
Por qué las reducciones grandes se ven borrosas
El remuestreo consiste en calcular píxeles nuevos a partir de los que los rodean cuando una imagen cambia de tamaño. Todo cambio de tamaño lo hace; la cuestión es con cuánto cuidado.
El método propio del navegador es dibujar la imagen en un canvas más pequeño. Eso toma muestras de forma barata y, en una reducción de más de un tercio, se salta el detalle que había entre las muestras: las líneas finas se vuelven punteadas, el texto pequeño se convierte en una mancha, el cabello y el follaje se suavizan. Tampoco puedes elegir el método. Chrome y Firefox usan algo parecido a Lanczos, Safari usa bicúbico, y nada en la interfaz de canvas permite que una página pida otra cosa.
El editor de imágenes redimensiona con Lanczos3, que calcula cada píxel de salida a partir de una ventana ponderada de píxeles de origen en lugar de una sola muestra barata. Por eso los bordes y las letras sobreviven a una reducción del 64%. El remuestreador ocupa 14 KB comprimido con gzip, solo se carga en esta página y se ejecuta en un worker, así que arrastrar un controlador de recorte sigue siendo fluido mientras trabaja. Solo se ejecuta cuando el tamaño cambia de verdad; a 1:1 no hay nada que remuestrear.
Ampliar pasa por el mismo remuestreador y el resultado sale limpio, pero no inventa nada. El detalle que la cámara nunca captó no está en el archivo, que es el tema del ampliador de imágenes.
Por qué una sola pasada le gana a tres
Cada herramienta por separado decodifica tu archivo, hace su único trabajo y codifica un archivo nuevo. Si el formato es JPEG, o WebP con calidad inferior a la máxima, cada una de esas codificaciones vuelve a descartar detalle, además del que descartó la anterior, y no lo puedes recuperar. Tres herramientas son tres codificaciones; una sola pasada es una.
La comparación de la propia herramienta con las páginas de una sola función:
| El editor de imágenes | Páginas separadas para recortar, rotar, voltear y redimensionar | |
|---|---|---|
| Idas y vueltas | Una decodificación, una codificación | Recodifica entre cada paso |
| Orden de las transformaciones | Declarado: recorte, volteo, rotación, cambio de tamaño | No documentado |
| Coordenadas del recorte | Guardadas en los píxeles de la imagen original | Se recalculan después de cada rotación |
| Reducción | Lanczos3 en un worker | Lo que haga el navegador |
| Teclado | Campos numéricos y una selección que recibe el foco | Solo puntero |
“Smallest” (el más pequeño), la opción de exportación por defecto, prueba WebP, JPEG y PNG y se queda con el que haya salido más pequeño. Son tres codificaciones de los mismos píxeles terminados, no una codificación que alimenta a la siguiente, así que el archivo que conservas sigue estando a una sola generación de tu original.
El orden es fijo, y está por escrito
El orden de transformación de la imagen es la secuencia en la que se aplican el recorte, el volteo, la rotación y el cambio de tamaño. Importa porque las transformaciones no son conmutativas: voltear y luego rotar da una imagen distinta que rotar y luego voltear.
Aquí siempre es recorte, luego volteo, luego rotación y luego cambio de tamaño. Las cajas de recorte se guardan en las coordenadas de píxeles propias de la foto original, así que un Left de 504 que escribiste antes de presionar ↻ 90° sigue refiriéndose al mismo borde después. El cambio de tamaño va al final porque no tiene sentido remuestrear píxeles que un recorte está a punto de desechar.
Hay una consecuencia que parece un error y no lo es. Como el volteo va antes de la rotación, un volteo horizontal guardado aparece como vertical cuando la imagen está a 90°. Los botones de volteo lo compensan, así que “Flip ↔” siempre voltea en la dirección que esperas a la vista, y el indicador de al lado muestra el giro y los volteos tal como los ves.
Cómo hacerlo en el editor de imágenes
- Abre el editor de imágenes y presiona “Choose an image” (elegir una imagen), o arrastra una al recuadro. Un HEIC recién salido de un iPhone a menudo necesita convertirse primero.
- Define el recorte en “Crop · drag or type” (recortar: arrastra o escribe). Arrastra un rectángulo sobre la foto, elige una proporción entre “Free”, “1:1”, “4:3”, “16:9” y “3:2”, o escribe valores exactos en “Left”, “Top”, “Width” y “Height”. Pasa con Tab a la selección y las flechas la mueven un píxel a la vez, veinte si mantienes presionada Shift. “Reset” vuelve al encuadre completo.
- Gira y voltea en “Turn” (girar): “↺ 90°”, “↻ 90°”, “180°”, “Flip ↔” y “Flip ↕”.
- Cambia el tamaño en el siguiente panel. Escribe un “Width”, un “Height” o un “Percent”; “Ratio locked” mantiene las proporciones, y “Match crop” devuelve el tamaño a las dimensiones del recorte. Los indicadores “Output” y “Megapixels” junto a la vista previa se actualizan mientras escribes.
- Elige un formato en “Save as” (guardar como): “Smallest”, “PNG”, “JPEG” o “WebP” si tu navegador puede codificarlo. El control deslizante “Quality” va de 0.30 a 1.00, empieza en 0.85 y se desactiva para PNG, que no tiene pérdida.
- Presiona “Download”. El archivo lleva el nombre de lo que el navegador produjo realmente, y “Last file” muestra su tamaño.
Lo que cambia la exportación además de los píxeles
- Los metadatos desaparecen. Al recodificar se eliminan los datos EXIF, lo que borra las coordenadas GPS que un teléfono escribe en cada foto, y también los campos de copyright y de cámara si los necesitabas.
- JPEG no admite transparencia. Todo lo transparente se aplana sobre blanco.
- Hay un límite de tamaño. Un canvas del navegador admite unos 8 192 píxeles por lado, y las versiones antiguas de iOS limitan el total a cerca de 16 megapíxeles. Si superas cualquiera de los dos límites, el canvas devuelve una imagen en blanco sin ningún error, así que la herramienta limita el tamaño y lo avisa. La comprobación también cubre el canvas intermedio: un escaneo de 12 000 píxeles recortado a 11 000 píxeles sigue por encima del límite.
- No hay rotación en ángulo libre. Solo cuartos y medios giros. Enderezar un horizonte dos grados implicaría interpolar, y suavizar, cada píxel.
Otras formas de hacerlo
En una Mac, Preview puede hacer dos de las tres cosas: Tools → Crop recorta a una selección, y Tools → Adjust Size cambia el tamaño. En Windows, la app Fotos recorta y rota imágenes. Uses la app que uses, haz todos los cambios antes de guardar, para que la imagen se codifique una sola vez.
Cómo comprobar que no se subió nada
Abre las herramientas para desarrolladores de tu navegador en la pestaña Network antes de empezar. El primer cambio de tamaño descarga el propio remuestreador, un script servido por este sitio; no sale nada que transporte tu imagen, porque el recorte, el giro y el remuestreo ocurren en la pestaña.
Haz los tres trabajos a la vez en el editor de imágenes. Para saber a qué tamaño se imprimirán los píxeles finales, usa el convertidor de píxeles; para que el archivo guardado pese menos sin tocar un solo píxel, el compresor de imágenes.