Resize vs. Crop: dimensiones de imagen correctas para web y redes sociales

Subes una foto de 6000×4000 a un listado de comercio electrónico que la muestra a 400×300, y la tubería de la tienda la redimensiona y re-comprime como efecto secundario al publicar. La foto sobrevive, pero la captura de pantalla PNG que también enviaste ahora parece emborronada: el script la escaló a una dimensión impar, la pasó por una segunda compresión JPEG y convirtió tu texto de interfaz nítido en bordes suaves. Tu archivo original no era el problema; el daño llega cuando un archivo ya codificado pasa por redimensionado y re-guardado sin que se sepa qué tamaño final se esperaba. Esta guía trata de controlar ese proceso: qué hacen de verdad redimensionar y recortar, por qué el DPI casi no tiene relación con los píxeles web, qué dimensiones esperan realmente las plataformas sociales y cómo las herramientas de navegador de Convrs hacen el mismo trabajo sin que un solo archivo salga de tu dispositivo.

Redimensionar y recortar: dos operaciones, una imagen

Los dos comandos parecen similares porque ambos cambian las dimensiones de la imagen, pero trabajan de forma distinta, y casi siempre conviene elegir uno deliberadamente.

• Redimensionar escala toda la imagen: cada píxel se encoge o se estira hacia un nuevo ancho y alto, y la proporción se conserva salvo que fuerces un tamaño que no corresponde. Se usa para ajustar a la dimensión máxima de una ubicación o para reducir el archivo antes de subirlo.
• Recortar conserva solo una región rectangular y descarta todo lo demás. La imagen se hace más pequeña porque quitó contenido y, casi siempre, la proporción cambia. Se usa para reencuadrar, cortar un borde saturado o cumplir la proporción de una plataforma (16:9, 1:1, 4:5, 9:16).

La secuencia práctica suele ser primero recortar y luego redimensionar: recorta a la proporción que pide la ubicación y luego escala el resultado a la medida en píxeles. Hacerlo al revés significa redimensionar un marco que aún lleva contenido no deseado, o recortar un archivo que ya fue interpolado: una pérdida pequeña pero real.

El daño irreversible: la recompresión

JPEG y WebP son formatos con pérdida. Cada guardado re-cuantiza los píxeles y descarta lo que el codificador considera detalle invisible. La recompresión lo acumula: un JPEG reducido y guardado otra vez es una segunda generación, y los bordes finos —texto, logos, capturas de interfaz— ganan halos, ruido de mosquito y suavidad. Para la tercera o cuarta generación, el deterioro se nota incluso en tamaño miniatura. El PNG es sin pérdida por guardado, pero una captura PNG escalada a una dimensión no entera y re-codificada igual se interpola: las diagonales se ven en escalera y el texto se desenfoca.

La regla que evita todo esto es conserva el original. Guarda la toma, redimensiona exactamente una vez y exporta desde ella. Si ya no tienes el original —o sí lo tienes, pero es el monstruo re-comprimido del tercer paso—, trata a tu mejor copia como el nuevo original y no la vuelvas a editar.

Píxeles, no DPI: qué significa de verdad «300 DPI»

Una imagen digital es una cuadrícula de píxeles con exactamente dos propiedades: ancho y alto. Eso es todo lo que lee la web. DPI (puntos por pulgada) y PPI (píxeles por pulgada) describen con qué densidad una impresora coloca esos píxeles en el papel: conceptos solo de impresión, guardados como metadatos. Una imagen de 1200×1200 mide 1200 píxeles en todas las pantallas, portátil o móvil, diga lo que diga su etiqueta DPI.

Cuando un cliente pide una «imagen a 300 DPI», casi siempre pide calidad de impresión. A 300 PPI, una impresión de 5×7 pulgadas necesita alrededor de 1500×2100 píxeles; un banner web de ese tamaño es excesivo. Subir el número de DPI en un editor no añade píxeles: reescribe metadatos y, en algunas herramientas, re-codifica el archivo en vano. Para web y redes sociales, lo único que importa son las dimensiones en píxeles.

Proporciones y tamaños previos para redes sociales

Las plataformas recortan y escalan tus subidas para encajarlas en sus propias ubicaciones, y lo que manda es tu proporción de aspecto (ancho:alto). Con la proporción correcta mantienes el control del encuadre; con una incorrecta, el recorte de la plataforma decide lo que ve tu audiencia. Las proporciones que te vas a encontrar:

• 16:9 para vídeo apaisado y la mayoría de tarjetas de enlaces compartidos (Facebook/LinkedIn).
• 1:1 para cuadrados del feed de Instagram y rejillas de perfil.
• 4:5 para publicaciones verticales: la proporción más alta que el feed de Instagram muestra sin recortar.
• 9:16 para Stories, Reels, Shorts y TikTok.

Las ubicaciones que merece la pena memorizar:

Regla para predimensionar: crea la ubicación más grande que necesites de verdad y recorta hacia abajo desde ahí. Si importan tanto la publicación de feed (1:1) como la historia (9:16), produce el cuadrado a 1080×1080 y prepara la vertical desde el mismo original; no recortes un 9:16 de un cuadrado ya pequeño. Las plataformas re-comprimen lo que subes; si les das la proporción exacta y un archivo cómodamente grande, comprimen una vez en lugar de dos.

Redimensionar en el navegador con canvas

Al redimensionar en código —aquí o en un widget de subida—, el navegador te da canvas, y dos ajustes controlan la calidad. El escalado descendente nítido de una foto necesita el suavizado activado, y imageSmoothingQuality: 'high' pone al navegador en un filtro más caro pero visiblemente mejor. La rotación EXIF también merece atención: los móviles graban las fotos en vertical pero las marcan con una etiqueta de rotación, y las llamadas ingenuas a drawImage la ignoran — tu foto sale de lado.

async function resizeToMax(file, maxDim, quality = 0.82) {
  // Decodifica la imagen y respeta la etiqueta de rotación EXIF de la cámara
  const bitmap = await createImageBitmap(file, {
    imageOrientation: "from-image",
  });

  const scale = Math.min(1, maxDim / Math.max(bitmap.width, bitmap.height));
  const w = Math.max(1, Math.round(bitmap.width * scale));
  const h = Math.max(1, Math.round(bitmap.height * scale));

  const canvas = document.createElement("canvas");
  canvas.width = w;
  canvas.height = h;
  const ctx = canvas.getContext("2d");
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = "high";
  ctx.drawImage(bitmap, 0, 0, w, h);

  // Para recortar, dibuja solo la región de origen que quieras conservar:
  // ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, w, h);

  const blob = await new Promise((resolve) =>
    canvas.toBlob(resolve, "image/webp", quality) // o "image/jpeg"
  );
  bitmap.close(); // libera la memoria del bitmap decodificado
  return blob;
}

La escala está limitada a 1 a propósito: la pinza Math.min(1, ...) garantiza que esta función nunca amplía. La salida solo puede ser igual o más pequeña — exactamente la regla para las imágenes web.

¿Redimensionar en una herramienta o dejar que lo haga el CSS?

CSS redefine la representación, no los bytes. max-width: 100%, object-fit: cover (un recorte CSS) y el srcset responsivo con sizes adaptan la imagen mostrada a cualquier viewport: es correcto y barato. Pero el navegador descarga igualmente el archivo original. Enviar un JPEG de 6000×4000 para que CSS lo reduzca a 400px desperdicia megabytes en cada vista de página y mantiene la imagen en la red más tiempo del que cualquiera nota.

La secuencia apta para web: redimensiona el archivo en sí al tamaño más grande que necesite cualquier ubicación —lo habitual en retina es el factor 2×, así que 1920 o 2400 de ancho si puede verse a pantalla completa—, luego deja que CSS lo reduzca en los puntos de quiebre pequeños y señala en srcset un par de medidas explícitas para dispositivos lentos. Los archivos de imagen son estáticos: hazlos bien una vez en lugar de cobrarles un impuesto de recompresión a cada visitante.

Números redondos, potencias de dos y la regla de no ampliar

Tres hábitos mantienen predecibles las exportaciones. Primero, exporta a dimensiones redondas: 1200 de ancho, no 1193. Los números impares salen de la aritmética de escalados encadenados e invitan a artefactos de interpolación visibles. Segundo, si reduces con un factor fijo, prefiere pasos limpios: 0.5×, 0.25× — porque algunas tuberías (teselado, mipmaps, atlas de texturas, ciertos servicios de miniaturas) remuestrean mejor en potencias de dos: una fuente de 2048 píxeles bajada a 1024 promedia bloques de 2×2 limpiamente, mientras que 1000 introduce muestreo fraccionario.

Tercero, la regla que arregla más imágenes borrosas que cualquier filtro: nunca amplíes una imagen web más allá de su resolución nativa. Ampliar inventa píxeles. Una imagen de 400px estirada a 1200px sigue teniendo 400px de detalle real; la interpolación adivina el resto, y ningún filtro de enfoque añade información que nunca se capturó. Si la ubicación pide 1200px y tu fuente tiene 400, vuelve a fotografiar o a renderizar; no intentes «mejorarla» en el editor.

Filtros y marcas de agua: pasos finales, en el orden correcto

Los filtros y las marcas de agua van al final, después de que redimensionar y recortar hayan fijado el encuadre definitivo. Primero la marca y luego el recorte, y cortas tu propio logo; marca antes de redimensionar y el texto puede encogerse hasta quedar ilegible, o la marca escala respecto a un marco que no es el que se entrega.

Un orden sensato: (1) aplica el aspecto a la fuente —grises, sepia, brillo/contraste, saturación, desenfoque—; (2) recorta a la proporción objetivo; (3) redimensiona a los píxeles objetivo; (4) añade la marca con tamaño y opacidad relativos a la imagen final; (5) exporta una vez. Las marcas de texto suelen sobrevivir mejor a los tamaños pequeños que las de imagen; un 4–6 % del lado corto con 30–50 % de opacidad en una esquina es el valor común y discreto. Exportar una sola vez, después de todos los ajustes, es lo que mantiene el impuesto de calidad en una única pérdida de generación.

Las herramientas de imagen en Convrs

Convrs ofrece toda la cadena en el navegador, y los archivos nunca salen de tu dispositivo: el Redimensionador de imágenes escala por píxeles o porcentaje con control de calidad, el Recortador de imágenes corta a proporciones predefinidas (16:9, 1:1, 4:5, 9:16) o a una caja personalizada, los Filtros de imagen aplican grises, sepia, brillo/contraste/saturación y desenfoque, el Añadir marca de agua superpone una marca de texto o imagen con posición, tamaño y opacidad, y el Compresor de imágenes reduce el tamaño de archivo para las subidas. Recorta con la proporción bloqueada, redimensiona a los píxeles de la plataforma, afina el aspecto, marca una vez y comprime para el camino: el original y cada derivado quedan en tu máquina, y solo la exportación final se mueve.