Cómo redimensionar y recortar imágenes para la web

Redimensionar y recortar suenan a lo mismo, pero resuelven problemas distintos — y usarlos bien suele ser una mayor mejora de velocidad que la compresión sola. Esta guía explica la diferencia, por qué las imágenes sobredimensionadas perjudican y cómo dimensionar imágenes correctamente para la web.

Redimensionar vs. recortar

• Redimensionar (Resizing) cambia las dimensiones de toda la imagen, conservándola entera — la escalas hacia arriba o hacia abajo.
• Recortar (Cropping) corta parte de la imagen para conservar solo una región — cambias qué hay en el encuadre, no solo su tamaño.

Una foto de perfil es un buen ejemplo: recortas a un cuadrado alrededor de la cara y luego redimensionas ese cuadrado hasta el tamaño de visualización.

Por qué las imágenes sobredimensionadas ralentizan las páginas

Una foto recién salida de un teléfono puede tener 4.000 píxeles de ancho. Si se muestra en una columna de 800 píxeles, el navegador descarga cinco veces más píxeles de los que jamás podrá mostrar y luego los encoge sobre la marcha. Es ancho de banda desperdiciado y una página más lenta a cambio de cero beneficio visual. Redimensionar la imagen aproximadamente al tamaño en que se muestra suele ser el mayor ahorro de tamaño de archivo disponible — a menudo más que la compresión.

Conserva la relación de aspecto

La relación de aspecto (aspect ratio) es la proporción de ancho a alto. Redimensiona ambas dimensiones por el mismo factor y la imagen queda sin distorsión; cambia solo una y se estira o se aplasta. La mayoría de las herramientas «bloquean» la relación por defecto — déjala bloqueada salvo que quieras distorsionar a propósito. Si necesitas una forma distinta (digamos, un banner ancho a partir de una foto alta), recorta a la nueva relación en lugar de estirar.

¿Qué tamaño deben tener las imágenes?

• Ajusta el ancho de la imagen al espacio que llena — mide el contenedor.
• Para una visualización nítida en pantallas de alta densidad (Retina), exporta a aproximadamente 2× el tamaño de visualización y luego comprime.
• No amplíes — agrandar una imagen pequeña solo añade desenfoque; no puede inventar detalle.

Juntándolo todo

Un buen orden de operaciones es recortar → redimensionar → comprimir. El redimensionador de imágenes hace el recorte y el redimensionado de una pasada con la relación de aspecto bloqueada, y luego pasa al compresor de imágenes para bajar el tamaño del archivo. Lee la guía de compresión para saber hasta dónde forzar la calidad, y los formatos de imagen explicados para elegir primero el formato correcto.