Skip to content

Redimensionar Imagen Online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Redimensionador de Imagen — Remuestreo Clase Lanczos vía Canvas drawImage

Redimensiona cualquier imagen a dimensiones exactas en píxeles o por porcentaje usando la pipeline drawImage() del Canvas 2D Context del HTML Living Standard de WHATWG (html.spec.whatwg.org/#dom-context-2d-drawimage). La propiedad CanvasRenderingContext2D.imageSmoothingQuality — 'low' (por defecto, clase bilinear), 'medium' (clase bicubic) o 'high' (clase Lanczos) — controla el filtro de remuestreo; el algoritmo concreto es definido por la implementación según WHATWG, pero Chrome / Edge / Safari / Firefox mapean 'high' a un kernel de la familia Lanczos al reducir. El filtro Lanczos (Duchon 1979, Journal of Applied Meteorology 18(8):1016-1022) usa el kernel L(x) = sinc(x)·sinc(x/a) para −a ≤ x ≤ a; Turkowski & Gabriel mostraron que Lanczos a=2 es el compromiso óptimo de reducción de aliasing, nitidez y ringing mínimo para decimación 2D, razón por la que Image.Resampling.LANCZOS de Pillow (la referencia canónica de la industria, con ANTIALIAS retirado en Pillow 10.0.0 el 1 de julio de 2023 tras la deprecación) y la vía Canvas 'high' del navegador usan ambos lo mismo. El bloqueo de proporción mantiene las proporciones intactas para que el sujeto no se estire ni se aplaste; el redimensionado ocurre en la codificación sRGB (IEC 61966-2-1:1999) del búfer del canvas independientemente del perfil de color del archivo origen. Los archivos nunca salen del dispositivo — el canvas lee los bytes localmente y serializa la salida vía HTMLCanvasElement.toBlob() de vuelta a JPG / PNG / WebP.

Relacionado: Recortar Imagen Comprimir Imagen PNG a JPG Imagen de Marcador Redimensionar Imagen Divisor de Cuadrícula

Cómo redimensionar una imagen

  1. Arrastra tu imagen a la herramienta o haz clic para seleccionarla. La decodificación del origen ocurre localmente vía los decoders JPG / PNG / WebP / AVIF / HEIC integrados del navegador.
  2. Introduce el ancho y/o alto objetivo en píxeles, o elige una escala por porcentaje (25% / 50% / 75% son objetivos comunes de reducción).
  3. Mantén el bloqueo de proporción activo para conservar las proporciones — la dimensión complementaria se calcula sola para que el sujeto no se estire ni se aplaste.
  4. La herramienta llama a drawImage() con imageSmoothingQuality = 'high' (kernel clase Lanczos) y serializa el resultado vía HTMLCanvasElement.toBlob() en el formato de salida elegido.
  5. Descarga la copia reescalada. El original queda intacto en el disco; nada se sube.

Casos de uso comunes

  • Bajar fotos de cámara a dimensiones amigables para web antes de subirlas a un blog o CMS con presupuesto de peso por imagen.
  • Casar una foto de producto con las dimensiones exactas de un slot de CMS para evitar el recorte centrado o el letterbox de la plataforma.
  • Producir copias más pequeñas de un máster grande para uso de miniatura o vista previa al pasar el cursor sin reexportar desde un editor de escritorio.
  • Asegurar que las fotos para redes aterrizan en las dimensiones esperadas sin estirar ni recortar (usa la herramienta hermana social-media-resizer para presets de plataforma con un clic).
  • Generar variantes responsive (entradas srcset 1× / 2× / 3×) desde un único origen ejecutando escalas por porcentaje consecutivas.

Preguntas frecuentes

¿Debo mantener la proporción bloqueada?

Casi siempre sí. Estirar a una proporción distinta distorsiona el sujeto — el sistema visual humano registra cualquier escalado no uniforme de caras o cuerpos como 'mal'. Si necesitas otra proporción, recorta primero con la herramienta aspect-ratio-crop para recomponer y luego redimensiona. El bloqueo viene activo por defecto por esa razón.

¿Qué algoritmo de remuestreo usa la herramienta?

La herramienta llama a Canvas drawImage() con imageSmoothingQuality = 'high', que Chrome / Edge / Safari / Firefox mapean a un kernel clase Lanczos (Duchon 1979). Lanczos a=2 es el filtro de reducción estándar de la industria — Turkowski & Gabriel mostraron que ofrece el compromiso óptimo de reducción de aliasing, nitidez y ringing mínimo para decimación 2D, y es lo que usa Image.Resampling.LANCZOS de Pillow (la referencia canónica en Python; ANTIALIAS era un alias de LANCZOS hasta su retirada en Pillow 10.0.0, 1 de julio de 2023). El algoritmo concreto es definido por la implementación según la spec WHATWG, pero el resultado práctico es consistentemente nivel Lanczos en todos los navegadores.

¿Puedo ampliar aquí?

Para ampliaciones leves (por debajo de 2×) Canvas Lanczos funciona bien. Más allá de 2× usa la herramienta image-upscaler, que aplica otra clase de algoritmo afinada para la dirección de ampliación (super-resolución / reconstrucción consciente de bordes) en lugar de interpolación limitada en banda. Ningún método de interpolación inventa detalle que no estuviera en el origen — solo redistribuyen las muestras existentes.

¿Reescalar pierde calidad?

Reducir es efectivamente sin pérdida dentro del presupuesto perceptual de la nueva resolución — Lanczos limita la banda del origen para que el contenido de alta frecuencia que no puede sobrevivir a la frecuencia de muestreo menor se filtre con limpieza, evitando moiré y aliasing. Ampliar no inventa detalle; solo interpola entre muestras existentes. Recodificar a JPG después de reescalar introduce cuantización con pérdida según el Anexo K de ITU-T T.81 (usa PNG o WebP sin pérdida si necesitas preservación píxel-exacta del resultado reescalado).

¿Y los orígenes HDR o de gama amplia?

La vía Canvas 2D opera en sRGB a precisión de 8 bits según IEC 61966-2-1:1999. Los orígenes HDR (Display P3 de gama amplia, BT.2020 con transferencia PQ o HLG) se mapean tonalmente a SDR sRGB durante el paso drawImage, perdiendo gama amplia y alto rango dinámico en la salida reescalada. Para flujos con HDR redimensiona en un editor de escritorio que preserve el perfil de color (Photoshop, Affinity Photo, GIMP 3.0+) y exporta al final.

Cómo funciona el redimensionado en navegador — y por qué importa la proporción

Redimensionar en un navegador es una operación de bitmap en dos pasos: decodificar el archivo origen a un ImageBitmap y luego drawImage() a un canvas nuevo con el ancho × alto objetivo, donde el filtro de suavizado gobernado por imageSmoothingQuality interpola entre los píxeles origen. (1) Reducir es la dirección bien comportada: un filtro propiamente limitado en banda como Lanczos a=2 elimina contenido de alta frecuencia que no puede sobrevivir a la frecuencia de muestreo menor, evitando moiré y aliasing. El resultado es visualmente equivalente al origen dentro del presupuesto perceptual de la nueva resolución — la calidad no se 'pierde' tanto como 'ya no hace falta'. (2) Ampliar no inventa detalle: bilinear da un resultado suave, bicubic añade nitidez de borde artificial que a menudo se ve cerosa, y Lanczos reproduce las frecuencias originales con limpieza pero no genera detalle que no estuviera en el origen. Más allá de 2× usa la herramienta image-upscaler que aplica otra clase de algoritmo afinada para esa dirección. (3) El bloqueo de proporción casi siempre es lo correcto por defecto — el sistema visual humano es sensible a la proporción cara/cuerpo y cualquier escalado no uniforme (p. ej. 1080 → 1200 de ancho manteniendo 1080 de alto) se registra como 'mal'. Si necesitas otra proporción, recorta primero con aspect-ratio-crop para recomponer y luego redimensiona. (4) El paso de remuestreo del canvas normaliza todo a sRGB a precisión de 8 bits según IEC 61966-2-1:1999; los orígenes HDR (Display P3, BT.2020) se mapean tonalmente a SDR sRGB durante el drawImage. (5) El formato de salida coincide por defecto con el MIME del origen pero puedes cambiar a JPG / PNG / WebP vía toBlob() — sin subida, sin servidor.

  • Redimensiona por píxeles exactos o escala por porcentaje
  • Bloqueo de proporción para preservar las proporciones del sujeto
  • Presets rápidos de porcentaje (25% / 50% / 75%) para flujos de reducción comunes
  • Remuestreo clase Lanczos vía Canvas imageSmoothingQuality = 'high' (por defecto 'low' = bilinear)
  • Pipeline de remuestreo: WHATWG Canvas drawImage (html.spec.whatwg.org/#dom-context-2d-drawimage) → toBlob
  • Salida JPG / PNG / WebP — formato de entrada preservado por defecto, conmutable al descargar
  • Opera en sRGB (IEC 61966-2-1:1999) a precisión de 8 bits; orígenes HDR mapeados tonalmente durante el resize
  • Archivos procesados localmente vía el canvas del navegador — sin subida, sin servidor

Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).

Fuentes (6)
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: drawImage() + imageSmoothingQuality. html.spec.whatwg.org/#dom-context-2d-drawimage — browser resampling mechanism: drawImage(source, dx, dy, dw, dh) scales the source bitmap to the destination rectangle; imageSmoothingQuality property accepts 'low' (default) / 'medium' / 'high' and requires imageSmoothingEnabled = true.
  • Mozilla Developer Network (MDN) (live). CanvasRenderingContext2D.imageSmoothingQuality. developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality — Chrome / Edge / Safari / Firefox map 'high' to a Lanczos-class filter, 'medium' to bicubic, 'low' to bilinear; the actual algorithm is implementation-defined per the WHATWG spec.
  • Duchon, C. E. (1979). Lanczos Filtering in One and Two Dimensions. Journal of Applied Meteorology, 18(8):1016-1022 (August 1979) — original Lanczos resampling derivation; kernel L(x) = sinc(x)·sinc(x/a) for −a ≤ x ≤ a, named after Cornelius Lanczos's sigma approximation; Turkowski & Gabriel later showed Lanczos a=2 is the optimal compromise of aliasing reduction, sharpness, and ringing for 2D image decimation.
  • Python Imaging Library (PIL Fork) — Pillow contributors (2023). Pillow 10.0.0 — Image.Resampling enum (NEAREST / BILINEAR / BICUBIC / LANCZOS). pillow.readthedocs.io/en/stable/releasenotes/10.0.0.html (released 1 July 2023) — industry reference for resampling algorithm naming; ANTIALIAS removed in 10.0 after deprecation, was always an alias for LANCZOS since Pillow 2.7.0 (31 December 2014).
  • ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables apply when the resized result is re-encoded as JPG.
  • International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; resampling occurs in the canvas pixel buffer's sRGB encoding regardless of the source image's colour profile.

Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.

Guías relacionadas

Patrocinado

Por ·