Rotador de imágenes gratuito

90/180/270 frente a todo lo demás: la línea de la ausencia de pérdidas

Hay dos tipos completamente diferentes de rotación de imágenes. Las rotaciones de exactamente 90°, 180° o 270° son sin pérdidas: cada píxel de origen aterriza en exactamente un píxel de destino entero, el mapa de bits se permuta en lugar de recalcularse, y no hay interpolación, ni mezcla, ni ninguna pérdida de calidad en absoluto. Una rotación de 90° en sentido horario asigna el píxel (x, y) de una imagen W × H a la posición (H − 1 − y, x) en la nueva salida H × W. Una rotación de 180° asigna (x, y) a (W − 1 − x, H − 1 − y). Son operaciones puras de barajado de memoria.

Cualquier otro ángulo requiere remuestreo: para cada píxel de destino, el algoritmo calcula de dónde habría venido en el origen (mediante una rotación inversa), encuentra que la ubicación de origen es generalmente fraccionaria y combina los píxeles de origen circundantes usando un núcleo de interpolación. Los núcleos comunes:

• Vecino más cercano: elige el único píxel de origen más cercano. Rápido, conserva los bordes duros, pero produce «dientes de sierra» visibles a lo largo de las líneas rotadas.
• Bilineal: media ponderada de los cuatro píxeles de origen más cercanos. Suave, rápido, el valor por defecto de la mayoría de las implementaciones de lienzo de los navegadores.
• Bicúbico: media ponderada de los 16 píxeles de origen más cercanos usando un núcleo cúbico suave. Más nítido que el bilineal; el valor por defecto en las opciones bicúbicas de Photoshop.
• Lanczos: una función sinc con ventana sobre un vecindario de 6×6 u 8×8. El núcleo de mayor calidad de uso común; significativamente más lento; puede producir artefactos de halo (ringing) en los bordes nítidos.

Cada núcleo compensa la conservación del detalle frente al halo o el desenfoque, y todos comparten una verdad: cualquier rotación que no sea de 90 descarta parte de la información de origen. El detalle fino de alta frecuencia (líneas de un píxel, bordes de texto posicionados en subpíxeles, pixel art con alias limpio) no puede sobrevivir a una rotación de 30° o 45° con ningún núcleo sin algo de suavizado. Una intuición útil: rota 1° y luego de vuelta −1°, y no obtienes el original: obtienes una copia más suave. Rota 90° y luego −90° y recuperas el mapa de bits original exacto.

Orientación EXIF: la razón silenciosa por la que tu foto salía de lado

El problema de «el navegador muestra mi foto al revés» tiene una causa específica. Los smartphones modernos no rotan físicamente la imagen cuando haces una foto sosteniendo el teléfono de lado, sino que almacenan la orientación original del sensor y añaden una etiqueta de orientación EXIF (introducida por JEIDA alrededor de 1995) que indica a los visores cómo debe mostrarse la imagen. La etiqueta tiene 8 valores posibles: 1=normal, 3=180°, 6=90° en sentido horario, 8=90° en sentido antihorario, más cuatro variantes reflejadas.

Antes de alrededor de 2010, los dispositivos escribían los píxeles rotados y Orientación = 1; a partir de entonces, los teléfonos modernos almacenan los píxeles originales con la Orientación establecida en su lugar, lo que ahorra almacenamiento y batería. La pega: históricamente, los navegadores no respetaban la orientación EXIF fuera de los elementos <img>. Arrastra una foto de teléfono en vertical a una herramienta basada en lienzo, y el lienzo la dibujaría de lado a menos que la herramienta leyera y aplicara explícitamente la etiqueta de Orientación. La propiedad CSS image-orientation, añadida en 2017, solucionó esto para HTML; el moderno createImageBitmap() con imageOrientation: 'from-image' lo soluciona para el lienzo. Chrome 81 (abril de 2020) convirtió image-orientation: from-image en el valor por defecto para los elementos <img>.

Si alguna vez has rotado una foto en tu navegador y apareció «ya rotada», o rotada dos veces: te has topado con esto. La solución honesta es que la herramienta de rotación lea la etiqueta EXIF, aplique mentalmente esa orientación primero y luego añada encima la rotación elegida por el usuario.

Cómo lo hace el lienzo

El método rotate(angle) del lienzo rota el sistema de coordenadas alrededor del origen del lienzo (0, 0). Como el origen es la esquina superior izquierda, llamar ingenuamente a ctx.rotate(angle) seguido de ctx.drawImage(img, 0, 0) rota la imagen alrededor de su esquina superior izquierda, enviando la mayoría de los píxeles rotados fuera del lienzo, hacia la parte superior izquierda. La receta estándar corrige esto con un sándwich de traslación-rotación-traslación:

ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);   // canvas takes radians
ctx.translate(-image.width / 2, -image.height / 2);
ctx.drawImage(image, 0, 0);
ctx.restore();

Para una rotación de 90/180/270, el lienzo de destino debe tener un tamaño que se ajuste a las dimensiones intercambiadas (90/270) u originales (180). Para un ángulo arbitrario, el rectángulo delimitador de la imagen rotada es más grande que cualquiera de las dimensiones de origen: para una imagen W × H rotada en θ, la nueva caja delimitadora mide |W·cos(θ)| + |H·sin(θ)| de ancho y |W·sin(θ)| + |H·cos(θ)| de alto. Por tanto, una imagen de 1000 × 800 rotada 45° necesita un lienzo de aproximadamente 1273 × 1273 para contener cada píxel rotado. El interruptor «Recortar a la forma» decide si expandir el lienzo (conservando cada píxel, con esquinas triangulares transparentes o blancas) o recortar a las dimensiones originales (recortando el contenido rotado).

Salida PNG frente a JPG: el problema de las esquinas

Cuando una rotación que no es de 90 expande el lienzo, las cuatro esquinas triangulares deben rellenarse con algo. PNG puede representar esos huecos como píxeles totalmente transparentes (alfa = 0), perfecto para superponer la imagen rotada sobre otro fondo. JPG no tiene canal alfa y representa cualquier píxel sin rellenar como el color de fondo del lienzo, que JPEG aplana a negro opaco. Un usuario que descarga un JPG de una foto rotada y se sorprende por las cuñas negras en las esquinas se ha topado exactamente con este problema.

Esta herramienta compone la salida JPG sobre un fondo blanco antes de codificar, para evitar el problema de las esquinas negras. La salida PNG conserva la transparencia. La elección entre formatos: PNG para cualquier cosa con transparencia o donde vayas a seguir editando, JPG para fotos que se dirigen a un destino final donde el tamaño del archivo importa.

Hay un matiz más para los JPG. La rotación JPEG sin pérdidas es técnicamente posible: la utilidad jpegtran reorganiza los límites de los bloques JPEG (los bloques de coeficientes DCT de 8×8) sin volver a decodificar la imagen, así que una rotación de 90/180/270 puede dejar intactos los datos comprimidos subyacentes y emitir un JPEG idéntico bit a bit en calidad al original. La pega es una restricción de borde de iMCU: las dimensiones de la imagen deben ser un múltiplo del tamaño de bloque, de lo contrario la rotación o bien recorta unos pocos píxeles del borde o deja un bloque parcial. Esta página usa la API canvas en lugar de la manipulación de bloques al estilo de jpegtran, así que la salida JPG aquí siempre se vuelve a codificar, a la máxima calidad, pero con la pequeña pérdida de generación inherente a cualquier recodificación JPEG.

Cuándo recurrirías a un rotador de navegador

• Fotos de smartphone que se importaron de lado a una aplicación de escritorio que no respeta la orientación EXIF.
• Documentos escaneados que entraron rotados 90° porque la detección automática del escáner se equivocó.
• Orientación de impresión: preparar una imagen para impresión en vertical frente a horizontal.
• Composición artística y de diseño: rotar una fotografía para probar diferentes orientaciones visuales.
• Arreglos rápidos antes de subir a las redes sociales cuando la rotación automática de la plataforma se confunde.
• Contenido sensible: documentos de trabajo, fotos de identificación, fotos familiares, que prefieres no subir a un servicio de terceros.

Más preguntas

¿Mi foto perderá calidad si solo la roto 90°?

No, no en el paso de rotación en sí: las rotaciones de 90/180/270 son permutaciones sin pérdidas. El riesgo de calidad es el codificador. Si subes un JPEG, esta herramienta lo decodifica, rota la matriz de píxeles y luego vuelve a codificar el resultado. La recodificación añade una pequeña cantidad de pérdida de generación (normalmente invisible a la máxima calidad) porque JPEG es con pérdidas. Para evitar incluso eso, descarga como PNG, o usa una herramienta específica como jpegtran que reorganiza los bloques DCT sin volver a decodificar.

¿Por qué al rotar un SVG la imagen se mantiene nítida?

Porque el SVG es vectorial: almacena las formas como rutas matemáticas en lugar de como una cuadrícula de píxeles. Rotar un SVG mediante transform="rotate(angle)" solo modifica las coordenadas de las rutas; no hay paso de remuestreo ni pérdida de calidad en ningún ángulo. El navegador vuelve a rasterizar las rutas rotadas cada vez que redibuja, siempre al nivel de zoom actual. Esta herramienta opera sobre imágenes rasterizadas (PNG, JPG, WebP) y por eso encuentra el coste del remuestreo; los SVG se rotan mejor editando el atributo transform directamente o usando un editor vectorial como Inkscape o Illustrator.

¿Por qué las esquinas son blancas en lugar de transparentes?

Estás descargando la salida JPG. El JPG no tiene canal alfa, así que los huecos triangulares que deja una rotación que no es de 90 se rellenan de blanco antes de codificar (o de negro, en las herramientas que no componen sobre un fondo, la demasiado habitual sorpresa de las esquinas oscuras). Cambia a la descarga PNG y las esquinas serán correctamente transparentes.

¿Puedo rotar en incrementos de 1°?

Sí. El deslizador de arriba se mueve en pasos de 1°; el campo de entrada acepta cualquier decimal (45,5° funciona bien). Para el trabajo de alineación muy precisa (enderezar un horizonte inclinado en una foto, por ejemplo), la precisión por debajo del grado puede importar. Cada rotación que no es de 90 cuesta una pequeña cantidad de calidad, así que, para el ajuste fino repetido, considera hacer una única rotación al ángulo objetivo final en lugar de varios ajustes incrementales.

¿Se envía algo a un servidor?

No. La imagen la decodifica tu navegador, se dibuja en un lienzo mediante la API Canvas 2D y se vuelve a codificar para la descarga, todo en el proceso de tu navegador. El archivo nunca sale de tu dispositivo. La herramienta también funciona sin conexión una vez cargada la página.