Redimensionar Imagen

Por qué reducir de una vez queda mal

Cuando un navegador dibuja una imagen grande en un espacio mucho más pequeño en una sola operación, muestrea un número limitado de píxeles de origen e ignora el resto. El detalle que queda entre las muestras no se promedia, se descarta, y el resultado es aliasing: diagonales dentadas, texturas finas que parpadean y texto convertido en ruido. Por eso una imagen reducida con un simple atributo width suele verse peor que la misma imagen reducida en un editor de imágenes.

La solución que se usa aquí es reducir la imagen a la mitad repetidamente y dar solo al final el último paso pequeño. Cada reducción a la mitad promedia grupos de cuatro píxeles, así que cuando se alcanza el tamaño final cada píxel de salida procede de toda el área que representa y no de una muestra arbitraria dentro de ella. Es el mismo principio que el mipmapping en gráficos, y en una reducción grande la diferencia no es sutil.

Las herramientas especializadas van más allá con filtros Lanczos o similares, que ponderan un vecindario más amplio y conservan algo más de nitidez aparente. Las reducciones sucesivas a la mitad se acercan lo suficiente como para que la diferencia cueste verla en fotografías, y son lo bastante rápidas como para previsualizar al instante en un móvil.

Cómo elegir el tamaño final

Dimensiona según dónde se va a mostrar la imagen y después ten en cuenta la densidad de píxeles. Una foto que se muestra a 800 píxeles CSS de ancho en una página necesita unos 1600 píxeles para verse nítida en un móvil o portátil moderno, que tienen dos píxeles de dispositivo por píxel CSS. Por encima de 2x la mejora visible es mínima y el coste en tamaño de archivo, considerable.

Para una página que sirve a muchos dispositivos, lo mejor es ofrecer varios tamaños con un atributo srcset y dejar que el navegador elija. Anchos habituales de 640, 960, 1280 y 1920 cubren la mayoría de diseños. Para un correo, quédate en torno a 600 píxeles. Para un documento o una diapositiva, usa el doble del tamaño al que se colocará.

Nunca amplíes para llegar a un tamaño. Ampliar se inventa píxeles que no se fotografiaron; hace más grande y más blanda una imagen blanda, y agranda el archivo sin ninguna ganancia. Si algo tiene que ser más grande que el original, lo que tiene que cambiar es el original.

El límite, y por qué existe

Se aceptan archivos de hasta 30 MB e imágenes de hasta unos 16,7 millones de píxeles, unos 4000 por 4000 o cualquier otra proporción con la misma superficie total.

Ese límite es del canvas del navegador, no una norma arbitraria. Safari en iOS, en particular, limita la superficie que puede ocupar un canvas, y por encima de ella falla de la peor manera: sin error ni excepción, simplemente devuelve una imagen en blanco como si todo hubiera ido bien. Para evitarlo, todo lo que supera el límite se rechaza con una explicación. Si tienes una exportación RAW de 50 megapíxeles que reducir, la herramienta adecuada es un editor de imágenes de escritorio.

El mismo límite explica por qué los lotes se procesan de imagen en imagen y no en paralelo. Una imagen decodificada ocupa en memoria ancho por alto por cuatro bytes, por pequeño que sea el archivo comprimido, así que varias imágenes grandes a la vez es justo lo que hace que el navegador del móvil cierre la pestaña.

Redimensionar, recortar o comprimir

Resuelven problemas distintos y a menudo se confunden cuando el objetivo real es un archivo más ligero.

Redimensionar cambia cuántos píxeles hay y es, con diferencia, la palanca más eficaz sobre el tamaño del archivo, porque su efecto es cuadrático: reducir a la mitad el ancho y el alto deja un cuarto de los píxeles. Cambia lo que se ve a tamaño completo, pero conserva todo el encuadre.

Recortar cambia lo que hay en el encuadre. También reduce píxeles, pero es una decisión de composición y no técnica, y no se puede deshacer.

Comprimir cambia la precisión con la que se guardan los píxeles existentes, que es el ajuste de calidad del conversor. No toca las dimensiones y cambia fidelidad por tamaño.

Para una foto demasiado pesada para una página web, el orden que funciona es redimensionar primero al tamaño de visualización y después codificar en WebP o JPG con una calidad razonable. Hacer solo lo segundo suele dejar sin aprovechar la mayor parte del ahorro.

Por qué reducir exige un filtro

Reducir una imagen significa responder una pregunta por cada pixel de salida: qué color representa esta región del original. Tomar el pixel de origen más cercano e ignorar a sus vecinos es la respuesta más barata y la peor, porque el detalle que quedó entre los puntos muestreados se descarta en lugar de promediarse, y ese detalle descartado reaparece como un patrón que nunca estuvo en la fotografía.

Eso es el aliasing, y es el mismo fenómeno de la rueda de carreta que parece girar al revés en una película. Muestrear a una tasa menor de la que el detalle exige no hace que el detalle se pierda en silencio; lo pliega de vuelta dentro de la imagen como un patrón falso de frecuencia más baja. Las texturas finas titilan, las líneas diagonales se escalonan y el texto pequeño se convierte en ruido.

La solución es promediar toda el área que representa cada pixel de salida, y cada filtro pondera ese promedio de otra manera. El promedio de caja es simple y deja la imagen ligeramente suave; Lanczos pondera un vecindario más amplio con una curva basada en sinc y conserva más nitidez aparente, a cambio de un leve ringing cerca de los bordes duros. El reducido sucesivo a la mitad, que es lo que se usa aquí, llega casi al mismo punto por una fracción del costo.

Dimensiones, proporción y recorte

Redimensionar conserva el encuadre completo y cambia cuántos pixeles lo describen. Recortar cambia el encuadre. Confundir ambas cosas produce esas imágenes deformadas que se ven en sitios mal hechos, donde una foto panorámica quedó aplastada dentro de un contenedor cuadrado porque se fijaron ambas dimensiones por separado.

Cuando el diseño exige una forma fija, recorta a propósito en lugar de estirar. El object-fit de CSS con cover hace esto en el navegador y está bien para imágenes decorativas; para todo aquello en que el sujeto importa, recortar de antemano da control sobre lo que queda dentro del cuadro. El recorte automático centrado decapita gente en las fotos de grupo con una fiabilidad notable.

La dirección de arte es el caso en que un solo recorte no alcanza: una imagen principal panorámica que funciona en escritorio suele necesitar un recorte vertical más cerrado en el teléfono, y no simplemente una versión más pequeña del mismo encuadre. Para eso está el elemento picture con condiciones de medio, a diferencia de srcset, que sirve el mismo recorte en distintos tamaños.

El peso de las imágenes y lo que le cuesta a una página

Las imágenes suelen ser lo más pesado que descarga una página, y el largest contentful paint - una de las métricas que Google reporta en los Core Web Vitals - muy a menudo es una imagen. Cada kilobyte innecesario en ese único archivo retrasa el momento en que la página parece cargada.

Un presupuesto realista es mantener la imagen principal por debajo de unos 200 KB y todo lo que queda bajo el primer pantallazo bastante más ligero, algo alcanzable con ajustes de calidad normales una vez que las dimensiones son las correctas. Servir una foto de 3 MB y dejar que CSS la reduzca es el problema de rendimiento más común en los sitios de contenido, y le cuesta al visitante sus datos además de su tiempo.

La estabilidad del diseño es la otra mitad. Una imagen sin width y height declarados no reserva espacio, así que el texto de abajo salta cuando la imagen llega. Definir ambos atributos, o un aspect-ratio en CSS, es un cambio de una línea que elimina toda una categoría de defecto visible.

Redimensionar muchas imágenes a la vez

Para un puñado de archivos, una herramienta en el navegador es la vía más rápida. Pasando de unas decenas, o dentro de un proceso de compilación, conviene una herramienta scriptable: el mogrify -resize 1600x -quality 82 *.jpg de ImageMagick resuelve un directorio entero en un solo comando, y sharp, libvips o Pillow hacen lo mismo dentro de una tubería de Node o Python, con un consumo de memoria mucho menor de lo que su fama sugiere.

Dos hábitos evitan los accidentes de siempre. Trabaja sobre copias, ya que mogrify sobrescribe en el lugar por defecto y no hay deshacer. Y usa una restricción solo de ancho, como 1600x, en lugar de dimensiones fijas, para que las imágenes verticales y horizontales se procesen sin deformarse.

En un sitio que recibe subidas de usuarios, el redimensionado debe ocurrir una vez al ingresar el archivo y no en cada petición, conservando el original por si más adelante hacen falta otros tamaños. Derivar tamaños bajo demanda mediante una CDN de imágenes es la otra arquitectura razonable; hacerlo en la página con CSS no lo es, porque el archivo completo se descarga igual.

Ampliar, y lo que cambian las herramientas de IA

Agrandar una imagen no puede recuperar detalle que nunca se capturó. La interpolación clásica - bilineal, bicúbica, Lanczos - produce una imagen más grande y suave a partir de la misma información, y se ve blanda porque efectivamente lo es. Eso no es una deficiencia del algoritmo; la información sencillamente no está.

Los ampliadores basados en aprendizaje automático entregan algo más nítido inventando detalle plausible a partir de lo que han visto antes. Para un fondo de pantalla o para imprimir una foto de vacaciones, eso suele ser justo lo que uno quiere. Para cualquier cosa con valor probatorio - el escaneo de un documento, la foto de un producto en la que un cliente va a confiar, una imagen en una nota periodística - es un problema serio, porque el detalle añadido es una conjetura presentada con la misma seguridad que los pixeles reales.

La regla confiable sigue siendo la misma: arregla el origen. Vuelve a exportar desde el archivo original, vuelve a escanear a mayor resolución, o pide el material en el tamaño que necesitas. Todo lo demás es una reparación hecha con material inventado.