Bhinish Dhiman

Cómo ampliar una imagen sin que se vea borrosa, y lo que el escalado no puede hacer

Traducido del original en inglés. Leer el original

Carga la imagen, elige 1.5×, 2×, 3× o 4× (o un ancho objetivo), arrastra el selector de región hasta un borde para comparar el panel de Lanczos3 con el escalador propio del navegador, y descarga. Lanczos3 mantiene los bordes más limpios que el escalado bilineal rápido, pero ningún remuestreador agrega detalle: a 2×, cada píxel captado cubre cuatro píxeles de salida, así que el 75% del resultado es interpolado; a 4×, cerca del 94%.

Parte del desenfoque se puede evitar y parte no. El evitable viene de un filtro de escalado deficiente, que emborrona bordes que el original tenía limpios. El inevitable ya está en el archivo: una imagen pequeña contiene un número fijo de píxeles medidos, y agrandarla los reparte en más espacio. Una buena ampliación resuelve lo primero y es honesta sobre lo segundo.

Dos términos

El remuestreo de imágenes consiste en calcular píxeles nuevos a partir de los que los rodean cuando una imagen cambia de tamaño. Un remuestreador redistribuye la información que ya existe. No puede agregar nada, y esa es la diferencia entre el remuestreo y la superresolución neuronal que la palabra “upscaler” sugiere hoy a la mayoría de la gente.

Lanczos3 es un filtro de remuestreo que pondera una ventana amplia de píxeles de origen para cada píxel nuevo, usando una función sinc con ventana. Conserva un contraste en los bordes que un filtro más estrecho, como el bilineal, promedia hasta hacerlo desaparecer. Su efecto secundario conocido es un halo tenue que puede aparecer junto a un borde muy marcado.

Cómo ampliar una imagen, paso a paso

  1. Abre el ampliador de imágenes y presiona Choose an image (elegir una imagen), o suelta o pega una en cualquier parte de la página. Se abren PNG, JPEG, WebP, GIF y AVIF; un HEIC de iPhone normalmente necesita convertirse primero.
  2. En Enlarge by (ampliar), elige 1.5×, 2×, 3× o 4×, o abre More options (más opciones) y escribe un ancho en píxeles en Target width (ancho objetivo). Ambos se mantienen sincronizados, y ninguno pasa de 4×. El tamaño bajo los factores muestra el tamaño de salida, el tamaño de origen y la cantidad de megapíxeles.
  3. Lee la línea bajo ese tamaño. Indica cuántos píxeles de salida cubre cada píxel captado y qué parte del resultado es interpolada; Result (resultado) lo repite como porcentaje.
  4. En Pick the region (elige la región), arrastra el rectángulo (o usa las flechas; mantén Shift para pasos más grandes) hasta un borde: letras, un horizonte, un cable. Los dos paneles muestran ese fragmento a un píxel de salida por píxel de pantalla, Lanczos3 a la izquierda y el drawImage propio del navegador a la derecha.
  5. En More options, Save as (guardar como), elige Smallest, PNG, JPEG o WebP. Smallest prueba WebP, luego JPEG y luego PNG, y se queda con el que tu navegador haya escrito más pequeño; WebP solo aparece donde el navegador puede escribirlo. Para una imagen con zonas transparentes, elige PNG o WebP, porque la opción JPEG aplana todo lo transparente sobre blanco.
  6. Presiona Download the enlargement (descargar la ampliación). Guarda la imagen completa, no el fragmento de los paneles, con un nombre como photo@2x.webp, y luego muestra el tamaño y el formato del archivo en Result. La barra al pie de la pantalla también lleva Download.

Cuánto de una ampliación se captó realmente

Toda ampliación es sobre todo interpolación, y la proporción sube rápido. Con un factor f, cada píxel captado cubre f² píxeles de salida, así que la parte interpolada es 1 − 1/f².

Factor Píxeles de salida por píxel captado Parte interpolada Lo ofrece la herramienta
1.5× 2.25 56% Sí
2× 4 75% Sí
3× 9 89% Sí
4× 16 94% Sí
8× 64 98% No
16× 256 99.6% No

Por eso los ajustes predefinidos se detienen en 4×. Más allá, a un solo píxel medido se le pide convertirse en 64 o en 256, y el resultado es una versión grande y borrosa de una imagen pequeña. Como guía práctica, 2× suele ser indistinguible a una distancia de visualización normal, 3× es aceptable para una impresión vista a la distancia del brazo, y 4× empieza a verse suave en las texturas finas. Una imagen de 200 píxeles contiene 200 píxeles de detalle al tamaño que la muestres.

El límite del canvas que convierte 2× en 1.18×

El primer límite con el que te encuentras no es el filtro. Un canvas del navegador tiene un tope cercano a 8 192 píxeles por lado, y en iPhones antiguos de unos 16 megapíxeles en total, y si lo superas devuelve una imagen en blanco en lugar de un error. La herramienta comprueba ambos límites, 8 192 píxeles por lado y 16 777 216 píxeles en total (4 096 × 4 096), antes de dibujar nada, reduce la salida para que quepa y lo indica en un aviso bajo Result.

Toma una foto de 12 megapíxeles, de 4000 × 3000. A 2× pide 8000 × 6000, es decir, 48 megapíxeles, casi tres veces el tope de área. La herramienta produce 4729 × 3547 en su lugar: un 1.18× efectivo. Cualquier otro ajuste predefinido da ese mismo archivo: 1.5×, 3× y 4× también superan el tope con esa foto, y cada uno se reduce al tamaño más grande con esa proporción que cabe.

La aritmética da la regla útil. Una imagen cuadrada se puede duplicar hasta 2 048 píxeles por lado, ya que 4 096 × 4 096 es exactamente el tope, y cuadruplicar hasta 1 024. La herramienta sirve para íconos, capturas de pantalla, escaneos pequeños y miniaturas. Una fotografía recién salida de un teléfono suele ser más grande que cualquier cosa que pueda generar.

El panel derecho es el navegador en su mejor versión

Comparar Lanczos3 con el ajuste de menor calidad del navegador sería hacer trampa, así que el panel derecho usa drawImage con imageSmoothingQuality en 'high'. El código fuente de la herramienta indica que esto da un filtro parecido a Lanczos en Chrome y Firefox y bicúbico en Safari, y que una página no tiene forma de saber cuál le tocó.

Así que en algunas imágenes los dos paneles se ven iguales, y ese es un resultado real. Las zonas planas se ven idénticas con cualquier remuestreador; los bordes son donde aparece cualquier diferencia, y por eso el selector de región te pide apuntar a uno. Donde no veas diferencia, quédate con el archivo más pequeño. La ventaja de un filtro con nombre es que sabes qué se le hizo a tu imagen, en cualquier navegador.

Los paneles se dibujan a un píxel de salida por píxel de pantalla por una razón que aplica a cualquier comparación que hagas tú. Una ampliación a 4× metida en una vista previa pequeña vuelve a ser reducida por el navegador, lo que oculta justo la diferencia que intentas juzgar. Mira el archivo descargado al 100% antes de decidir que se ve suave.

Otras formas de ampliar una imagen

En macOS, Tools → Adjust Size de Preview cambia el tamaño de una imagen. Esta guía no afirma nada sobre qué filtro usa.

En Windows, la app Fotos integrada recorta y rota imágenes, pero esta guía no tiene un método integrado comprobado para ampliarlas. Tampoco tiene un método de línea de comandos comprobado, así que no ofrece ninguno.

Los escaladores neuronales son una operación distinta. Un modelo entrenado genera píxeles nuevos que predice que pertenecen a la imagen, en lugar de redistribuir los que se captaron. Esta guía no afirma nada sobre qué tan bien lo hace ninguno de ellos. Esta herramienta no incluye uno porque no se podía servir: la compilación WebGPU del runtime midió 27 648 KB, por encima del límite de 25 MiB por archivo del hosting de este sitio, y los pesos del modelo solo se comprimen cerca de un 7%. El remuestreador que usa en su lugar ocupa 14 KB.

Ampliador de imágenes macOS Preview, Adjust Size Un escalador neuronal
Método Remuestreo Lanczos3 No se indica aquí Un modelo entrenado genera píxeles
Agrega detalle que no se captó No No Genera detalle nuevo
Muestra el resultado junto a una alternativa Sí, frente al escalador del navegador No No se cubre aquí
Factor máximo 4× No se indica aquí No se cubre aquí
Tu imagen se envía a algún lugar No No Depende del servicio

Cómo comprobar que la imagen no salió de tu equipo

Carga la página y amplía una imagen para que llegue todo lo que necesita. Luego desconéctate de la red y amplía una segunda. Si los paneles se vuelven a dibujar y la descarga se completa sin conexión, no se pudo haber enviado nada. La pestaña Network de las herramientas para desarrolladores cuenta lo mismo con la conexión activa: el propio código de la página, y ninguna solicitud que transporte tu imagen.

El ampliador de imágenes es gratuito. Para recortar o rotar antes de ampliar, usa el editor de imágenes, y para elegir entre PNG y WebP para el resultado, cuánto ahorra pasar de PNG a WebP, medido en once imágenes tiene las cifras.