Redimensionar imágenes _

Cómo funciona el redimensionado de imágenes en el navegador

Cada redimensionado es un proceso corto que se ejecuta completamente en JavaScript. No se descarga ninguna librería de códecs y no interviene ningún servidor. La propia Canvas API del navegador decodifica el archivo, lo redibuja al tamaño objetivo y lo recodifica en memoria, luego te entrega un Blob que la página puede previsualizar o comprimir en ZIP. Como cada paso vive dentro del sandbox de la pestaña, los archivos originales nunca llegan a la red.

1. Lee cada archivo subido como Blob y crea una URL de objeto para que el navegador pueda decodificarlo localmente, sin copiar bytes a un servidor ni escribirlos en disco.
2. Calcula las dimensiones objetivo según el modo elegido: un límite del lado más largo, un ancho y alto exactos, o una escala porcentual. El bloqueo de proporción mantiene las proporciones correctas cuando editas un solo campo.
3. Crea un Canvas fuera de pantalla al tamaño objetivo y llama a ctx.drawImage(source, 0, 0, width, height) para redibujar los píxeles decodificados. El navegador gestiona la interpolación que suaviza el resultado escalado.
4. Llama a canvas.toBlob para recodificar en el formato de origen. PNG se mantiene sin pérdidas, JPEG y WebP se recodifican con alta calidad. Luego la página muestra una tarjeta antes/después y ofrece una descarga por imagen o un ZIP único construido en memoria con fflate.

¿Por qué redimensionar imágenes?

• Las imágenes sobredimensionadas son la causa más común de páginas lentas. Una foto de teléfono de 4000×3000 colocada directamente en un diseño de 600 píxeles de ancho envía aproximadamente 40 veces más píxeles de los que la pantalla puede mostrar. Limitar el lado más largo a 1600 px antes de subir reduce drásticamente el peso de la página y mejora el LCP de Core Web Vitals.
• Los formularios de subida imponen dimensiones estrictas. Los avatares, los portales de fotos de identidad, los listados de marketplaces y las tarjetas OG para redes sociales exigen tamaños exactos en píxeles: 1200×630 para una vista previa Open Graph, 512×512 para un icono de app, 150×150 para una miniatura. Acertar con el número exacto evita el ciclo de rechazos.
• Los clientes de correo y de chat recomprimen silenciosamente cualquier imagen grande, lo que puede arruinar una captura de pantalla limpia. Redimensionar a un ancho razonable tú mismo mantiene el resultado predecible en lugar de dejarlo a la merced del pipeline con pérdidas de otra persona.
• La consistencia en lotes importa para galerías y catálogos. Pasar una carpeta de fotos de tamaños variados por un único objetivo de 800×800 hace que cada tarjeta se alinee en la cuadrícula, sin imágenes gigantes que rompan el diseño.

Aplicaciones comunes

El redimensionado aparece siempre que las dimensiones de origen y las expectativas del destino no coinciden. Tres patrones se repiten una y otra vez.

• Preparar fotos de productos para una tienda Shopify o WooCommerce. Una carpeta de originales de cámara de 4000 píxeles se limita a un lado más largo de 1600 px para que la tienda cargue rápido, mientras la proporción se mantiene intacta para que nada parezca estirado.
• Generar activos para redes sociales y apps a partir de un archivo maestro. Establece un 1200×630 exacto para la tarjeta Open Graph, luego 512×512 para un icono de app, exportando cada uno en un par de clics sin abrir un editor pesado.
• Reducir un lote de capturas de pantalla de QA o soporte antes de adjuntarlas a un ticket. Escalar una carpeta de 50 fotos al 50% suele reducir el tamaño del archivo en aproximadamente tres cuartas partes antes de enviarlo al rastreador de errores.

Un ejemplo práctico: foto de 4000 px a imagen web de 1600 px

Una foto de 4000×3000 directamente del teléfono es una carga habitual que es mucho mayor de lo que cualquier diseño web necesita. Es un buen banco de pruebas para lo que el redimensionado ahorra.

Suelta la foto en la zona de carga, deja el modo en Limitar lado más largo y establece el valor en 1600. El pipeline Canvas redibuja la imagen a 1600×1200 con la proporción conservada, luego la recodifica en el formato original. La tarjeta de salida muestra las nuevas dimensiones y el tamaño del archivo, que para un JPEG típico baja de varios megabytes a unos pocos cientos de kilobytes. Haz clic en Descargar en la tarjeta para obtener el archivo individual, o en Descargar .zip si redimensionaste varias imágenes en un solo pase. El ciclo completo, desde soltar hasta descargar, se ejecuta en una fracción de segundo y usa cero ancho de banda después de que la propia página cargue.

¿Qué modos de redimensionado están disponibles?

Tres. Limitar lado más largo limita el mayor entre ancho o alto a un valor en píxeles y escala el otro lado para que coincida, que es el predeterminado seguro porque nunca distorsiona. Ancho × alto exacto te permite escribir ambos números, con un bloqueo de proporción que recalcula el segundo campo desde la proporción de origen al editar el primero — desactiva el bloqueo cuando un formulario exija un tamaño exacto no proporcional. Escalar por porcentaje multiplica ambas dimensiones por un único factor, útil para reducir a la mitad o duplicar un lote entero de una vez. Seis ajustes predefinidos con un clic (de 1920×1080 hasta una miniatura de 150×150) cubren los objetivos más comunes.

¿Esto ocurre en mi dispositivo?

Sí, completamente. La página usa la Canvas API nativa del navegador y la Web File API para decodificar, redibujar y recodificar cada imagen en memoria. No se envían datos de imagen a un servidor, no hay subida temporal y no hay vuelta a la nube. Puedes verificarlo: abre las DevTools, ve al panel Network y ejecuta un redimensionado. Las únicas solicitudes salientes que verás son la carga inicial de la página y las llamadas de anuncios. Nada con forma de imagen sale de la pestaña, lo que hace que esto sea seguro para documentos de identidad escaneados, imágenes médicas y otro material que nunca querrías subir.

¿El redimensionado reducirá la calidad?

Reducir una imagen (reducción de escala) tiene un aspecto excelente: el navegador promedia los píxeles de origen en menos píxeles, por lo que el detalle se mantiene nítido y el archivo se hace mucho más pequeño. Ampliar más allá de la resolución de origen (aumento de escala) no puede inventar detalles que nunca se capturaron, por lo que una imagen pequeña escalada hacia arriba se verá borrosa; ese es un límite de cualquier redimensionador, no solo de este. La salida conserva el formato de origen: PNG se mantiene sin pérdidas, mientras que JPEG y WebP se recodifican con un ajuste de alta calidad para que la diferencia visual del original sea difícil de notar.

¿Qué formatos de archivo admite?

En la entrada, se acepta cualquier formato que el navegador pueda decodificar: PNG, JPEG, WebP, GIF y BMP cubren casi todos los archivos que produce un teléfono, cámara o herramienta de captura. La salida preserva el formato de origen donde el codificador Canvas lo admite: PNG, JPEG y WebP funcionan directamente. GIF y BMP, que la Canvas API puede decodificar pero no recodificar, se guardan como PNG sin pérdidas. El nombre del archivo redimensionado incluye las nuevas dimensiones (por ejemplo foto-1600x1200.jpg) para que un lote sea fácil de ordenar.

Suelta tus imágenes, elige un tamaño, redimensiona. Todo funciona en tu pestaña. Sin subidas, sin cuenta, sin esperar en la cola de un servidor.