Cómo redimensionar imágenes sin pérdida de calidad

“Sin pérdida de calidad” es asimétrico. Reducir el tamaño — hacer una imagen más pequeña — pierde información por definición (tienes menos píxeles que la fuente), pero la pérdida suele ser invisible si usas un buen algoritmo. Ampliar — hacerla más grande — inventa detalles que no estaban, y el resultado siempre parece más suave que una fuente de resolución nativa. Esta guía explica qué flujos de trabajo preservan la calidad visible y cuáles no.

Reducir el tamaño: mayormente seguro

Si tu fuente es de 3000×2000 píxeles y necesitas 600×400 para la web, estás descartando el 96% de los píxeles. Siempre que el algoritmo de reducción de tamaño promedia los píxeles descartados en los conservados (en lugar de simplemente muestrear cada N-ésimo píxel), el resultado se ve correcto.

Los navegadores modernos, Photoshop y las herramientas dedicadas usan interpolación bilineal o bicúbicapor defecto. Para reducciones agresivas (> 4× reducción), encadenan múltiples pasadas para evitar el aliasing.

Cuándo falla la reducción: muestreo por vecino más cercano (que conserva el pixel art pero produce fotografías dentadas) o reducción de pasada única en proporciones extremas (que causa patrones de moiré). Casi ninguna herramienta de consumo usa el vecino más cercano por defecto; tendrías que pedirlo explícitamente.

Ampliar: siempre pierde

Una imagen de 100×100 píxeles tiene 10.000 piezas de información. Ampliarla a 400×400 produce 160.000 píxeles — 150.000 de los cuales el algoritmo inventó interpolando entre vecinos. El resultado es matemáticamente una suposición.

Tres variantes de ampliación:

• Bilineal / bicúbico. Interpolación estándar. Resultados suaves, ligeramente borrosos. El predeterminado cuando cambias el tamaño de <img> en CSS.
• Lanczos. Más nítido que bicúbico, preserva mejor los bordes. Algunas herramientas lo usan por defecto para ampliaciones 2×.
• Ampliación con IA. Topaz Gigapixel, Super Resolution de Adobe, herramientas basadas en ESRGAN. Entrenadas en millones de ejemplos de alta resolución; alucinan detalles plausibles. Los resultados se ven mejor que la interpolación pero no son realmente precisos.

Regla práctica: nunca amplíes un activo final. Encuentra una fuente de mayor resolución. Si la fuente genuinamente no existe (una fotografía antigua, un logo pequeño), la ampliación con IA es la mejor de las malas opciones.

El formato afecta la calidad visible

Incluso con un redimensionado perfecto, el formato en el que guardas determina qué sobrevive. Consulta nuestra guía PNG vs JPG vs WebP para el análisis completo; la versión corta:

• PNG — sin pérdida. Redimensionar y guardar como PNG preserva exactamente la imagen redimensionada. Úsalo para logos, ilustraciones, capturas de pantalla con texto nítido.
• JPEG @ 90% — visualmente indistinguible de PNG para fotografías a tamaños de visualización típicos. Las caídas de calidad no son por el redimensionado, sino por la codificación JPEG.
• WebP @ 80% — 25-35% más pequeño que JPEG a calidad equivalente. El predeterminado para fotografías en la web desde 2020.
• GIF — limitado a 256 colores; los GIF redimensionados de fotografías parecen posterizados. Convierte a PNG o WebP en su lugar.

El flujo de trabajo de proteger el original

Una vez que redimensionas y guardas, no puedes recuperar el detalle original. Por eso:

1. Archiva el original. PNG o RAW de resolución original. Etiquétalo/carpetítalo para que el tú del futuro pueda encontrarlo.
2. Genera derivados. Tamaños web desde el original, no desde una copia redimensionada anteriormente. Cada ronda de redimensionado-y-guardado acumula artefactos de compresión; comenzar de nuevo desde el original lo evita.
3. Genera los tamaños que realmente necesitas. Comunes: @1× para pantallas tradicionales, @2× para Retina, @3× para teléfonos de alta gama. Sirve mediante <img srcset> o <picture>.
4. No reedites un JPEG. Cada guardado elimina más información. Si necesitas corregir el color después, hazlo en el original, luego reexporta.

Redimensionado en el navegador vs en el escritorio

Los navegadores modernos hacen redimensionado de alta calidad en Canvas2D — lo que usa nuestra herramienta de redimensionado de imágenes. Los resultados son visualmente idénticos al bilineal/bicúbico de Photoshop para la mayoría de los casos. Para reducciones agresivas (> 8× reducción), el “Tamaño de imagen” de Photoshop con bicúbico-más-nítido aún tiene una ligera ventaja en la preservación de detalles finos.

Errores comunes

• Redimensionar en CSS en lugar de en código. Una imagen de 4000×3000 servida a width=400 en CSS sigue siendo de 4000×3000 bytes por la red. El navegador puede redimensionar, pero la red ya pagó. Redimensiona en el momento de exportar, no en el momento de mostrar.
• Olvidarse de Retina. Una imagen de 200×200 en una pantalla @2× se ve borrosa. Exporta a 400×400, muestra como 200×200 píxeles CSS.
• Recortar ampliando. Si recortas el 25% de una imagen, tienes una imagen de un cuarto de resolución. Ampliarla a las dimensiones originales solo agranda los artefactos. Recorta primero, luego acepta la resolución más baja como el nuevo techo.

Para la herramienta en vivo, consulta nuestro redimensionador de imágenes en el navegador y el compañero compresor de imágenes. Ambos se ejecutan completamente en tu navegador — los archivos no salen de la página.

Ejemplo trabajado: una imagen hero para una laptop Retina

Ranura objetivo en el diseño: 1200 × 600 píxeles CSS. Fuente: una toma DSLR de 24 megapíxeles, 6000 × 4000 píxeles, JPEG sRGB.

• Elige las dimensiones de salida. Para @2× Retina, exporta 2400 × 1200 píxeles de dispositivo. Para teléfonos con @3× DPR, exporta 3600 × 1800.
• Recorta, luego remuestrea. Recorta el 6000 × 4000 a una región 2:1 (p.ej. 6000 × 3000), luego remuestrea a 2400 × 1200 usando Lanczos3 en ImageMagick: magick input.jpg -filter Lanczos -resize 2400x1200^ -gravity center -extent 2400x1200 [email protected].
• Codifica WebP a calidad 80. cwebp -q 80 [email protected] -o [email protected]. Tamaño de archivo esperado: ~85-130 KB a esta resolución.
• Añade una variante AVIF para navegadores que la admitan. avifenc --speed 6 -q 60 [email protected] [email protected] → otro 25-40% más pequeño que WebP.
• Carga útil total: ~95 KB AVIF para navegadores modernos, ~110 KB WebP de respaldo, ~200 KB JPEG de respaldo heredado. Comparado con servir el original DSLR de 6 MB sin redimensionar: 60× más pequeño.

Casos especiales

• SVG. Los gráficos vectoriales no necesitan remuestreo — se renderizan a cualquier tamaño sin pérdida.
• GIF/WebP animado. El remuestreo por fotograma sin coherencia temporal introduce parpadeo entre fotogramas. Usa ffmpeg con un filtro temporal, o convierte a un formato animado moderno (WebP, AVIF, AV1).
• Imágenes HDR. El contenido codificado en PQ/HLG de 10 y 12 bits necesita remuestreadores conscientes de HDR; un remuestreador estándar de 8 bits aplasta las luces y las sombras.
• Impresión a >300 PPI en papel sin recubrimiento. La ganancia de puntos de tinta en papel sin recubrimiento se satura alrededor de 250 PPI; remuestrear la fuente a 600 PPI es bytes desperdiciados.