Redimensiona una imagen sin subirla a ningún servidor

Redimensionar vs recortar: no son lo mismo

Mucha gente usa ambos términos como sinónimos y termina obteniendo un resultado que no era lo que quería. La diferencia concreta: redimensionar cambia las dimensiones de toda la imagen manteniendo (o no) la proporción; recortar corta un rectángulo específico de la imagen y descarta el resto.

Un ejemplo: si tienes una foto horizontal de una playa y la quieres subir como post cuadrado a Instagram, redimensionar a 1080×1080 va a deformar toda la escena — el horizonte se ve chato, las personas estiradas. El camino correcto es recortar un cuadrado de la foto original (la herramienta /imagen/recortar hace eso) o usar el preset cuadrado de /imagen/recortar-redes.

Redimensionar es la elección correcta cuando quieres toda la imagen, solo que más chica (o más grande, con las salvedades que vienen abajo). Recortar es la elección correcta cuando solo una parte de la imagen es relevante y el resto sobra.

Resoluciones estándar y cuál usar para qué

Estas son las resoluciones más comunes en 2026 y los casos donde cada una tiene sentido:

• 256 px — íconos, avatars de sistema, favicons grandes. A este tamaño los detalles ya casi no se ven, así que conviene diseñarlas pensando en formas claras y contrastes altos.
• 400–512 px — fotos de perfil en redes sociales, avatars en sistemas de usuario, logos secundarios. Instagram y LinkedIn muestran tu foto de perfil a este tamaño como máximo incluso en retina.
• 640–800 px — thumbnails de blog, previews de galería, cards de producto en vistas de grilla. Soportan retina correctamente y pesan lo suficientemente poco como para cargar rápido en conexiones móviles.
• 1200 px — imagen dentro de contenido editorial. Suele caber holgada en todos los layouts de blog y en la vista detalle de productos. Un buen default para imágenes “dentro del post”.
• 1280 px (HD) — imagen adaptativa para pantallas laptop. Sirve bien para hero en móvil y tablet, insuficiente para monitor 4K.
• 1920 px (Full HD) — hero de landing en desktop 1080p, imagen full-width en sitios con ancho máximo de 1440 px. Es el default sensato para imágenes grandes.
• 2560 px (QHD) — pantallas 1440p, cobertura para retina de laptop estándar. Es menos usado: o vas a 1920 o saltas directo a 4K.
• 3840 px (4K) — monitores 4K, presentaciones grandes, fotos con zoom. El costo en peso es considerable; úsalo solo cuando sabes que la pantalla destino realmente lo necesita.

Regla útil: si la imagen se va a mostrar en un contenedor CSS de X píxeles en pantalla retina, la imagen entregada debería ser de 2X píxeles para que se vea nítida. Más que eso es ancho de banda desperdiciado; menos es una imagen que se ve borrosa al zoom.

Por qué el upscaling casi nunca funciona bien

Agrandar una imagen (pasar de 800×600 a 1920×1440) obliga al algoritmo a inventar píxeles que no existen. El resultado puede ser aceptable si la imagen original ya era nítida y el factor de escalado es bajo (menos de 1.5x), pero empeora rápido a partir de ahí.

Los síntomas típicos del upscaling son: bordes borrosos en textos pequeños, zonas planas que se ven emborronadas, patrones sutiles (tramas de imprenta, texturas finas) que desaparecen. En fotografía, el pelo y la textura de piel se convierten en zonas uniformes.

Las herramientas de upscaling con IA (Topaz, Upscayl, Waifu2x, Real-ESRGAN) producen resultados significativamente mejores que el interpolado bicúbico estándar, pero son procesos distintos. Si realmente necesitas agrandar con máxima calidad, esos son los caminos — no una herramienta de redimensión clásica. Si no los tienes a mano, la solución honesta es volver al archivo maestro de mayor resolución cuando sea posible.

Aspect ratio y el candado de proporción

Toda imagen tiene una proporción entre ancho y alto. Las comunes:

• 1:1 — cuadrado. Redes sociales (Instagram post), avatars, miniaturas de video.
• 4:3 — proporción clásica de TV y cámaras compactas. Todavía común en fotografía casual.
• 3:2 — proporción de cámaras DSLR y muchas mirrorless. Proporción de fotografía “profesional”.
• 16:9 — widescreen. TV, YouTube, presentaciones, monitores modernos.
• 9:16 — vertical full-screen. Stories, Reels, TikTok, pantallas de celular.

Con el candado activo, cualquier cambio en un lado propaga al otro manteniendo la proporción original. Sin el candado puedes deformar a propósito (por ejemplo, estirar un logo para llenar un banner), pero el resultado casi siempre se ve mal. Mantén el candado activo salvo que sepas específicamente por qué quieres deformarlo.

DPI: cuándo importa, cuándo no

Puntos por pulgada (DPI o PPI) es una métrica para impresión. En pantalla no significa nada — una imagen se ve igual a 72 DPI que a 300 DPI si tiene las mismas dimensiones en píxeles. Lo que hace el DPI es decirle a la impresora o al software de diseño cuántos píxeles meter en cada pulgada del papel.

Reglas prácticas para impresión:

• 300 DPI — fotografías impresas, tarjetas, flyers, folletos, revistas. Es el estándar “calidad imprenta”.
• 150 DPI — posters que se miran de más de 1 metro de distancia. A esa distancia el ojo no distingue más detalle.
• 72–96 DPI — pantalla. No importa realmente para web.

Para calcular los píxeles necesarios para una impresión a cierto DPI: píxeles = pulgadas × DPI, donde 1 pulgada = 2.54 cm. Ejemplos:

• Foto de 10×15 cm a 300 DPI → 1181×1772 px.
• Foto A4 (21×29.7 cm) a 300 DPI → 2480×3508 px.
• Poster A2 (42×59.4 cm) a 150 DPI → 2480×3508 px.

Si tu imagen tiene menos píxeles que eso, va a imprimirse pixelada. No hay algoritmo de redimensión que rescate una imagen sin detalle suficiente.

Algoritmos de interpolación: lo que pasa por debajo

Cuando cambias el tamaño de una imagen, el algoritmo tiene que decidir qué color poner en cada píxel nuevo. Los más comunes:

• Nearest neighbor — agarra el píxel más cercano. Rápido y fiel para gráficos con líneas nítidas (pixel art, UI), pero pixelado para fotos.
• Bilinear — promedia los 4 píxeles vecinos. Resultado suave pero puede perder detalle fino.
• Bicubic — considera los 16 píxeles vecinos. Mejor balance entre nitidez y suavidad; es lo que hace Canvas API cuando activas imageSmoothingQuality='high'.
• Lanczos — algoritmo más sofisticado usado en editores profesionales. Mejor que bicubic para downscales agresivos, no disponible en Canvas API estándar.

short.cl usa el algoritmo de mayor calidad del navegador (imageSmoothingQuality='high', que en Chrome y Firefox es una variante de bicubic). Para redimensionar fotos es lo correcto; para pixel art deberías usar nearest neighbor en un editor especializado.

Cómo recuperar nitidez después de achicar

Cada vez que bajas el tamaño de una foto, el proceso de interpolación tiende a suavizar detalles finos. Para contrarrestar eso los editores profesionales aplican un paso de sharpening (enfoque) selectivo después del downscale. Si la imagen final se ve algo “blanda”, pásala por un editor como GIMP o Photoshop con un unsharp mask suave (radio 0.5, cantidad 50%, umbral 0). El resultado se ve notablemente más nítido sin que la imagen grite “editada”.

La alternativa práctica si no tienes editor a mano es bajar levemente la calidad JPG (85% en lugar de 95%): paradójicamente, la cuantización inherente a JPG actúa como un sharpening suave en ciertas imágenes porque empuja los valores de color hacia los más representativos. No es un reemplazo real del unsharp mask, pero mitiga el efecto blando.

Responsive images: cuando el navegador hace el trabajo por ti

En sitios web modernos lo correcto no es servir una sola imagen redimensionada para todos los dispositivos, sino varias versiones y dejar que el navegador elija la mejor usando el atributo srcset. Esto significa que para un hero de landing podrías necesitar 4 versiones: 800 px (móvil), 1280 px (tablet), 1920 px (laptop) y 2560 px (retina / 4K).

Redimensionar de uno en uno es tedioso. Si tu flujo es producir activos para web con cierta regularidad, vale la pena automatizar con un script o con el build de Next.js, Astro o el CMS que uses. Short.cl es útil para los casos donde necesitas una versión específica rápido, o para el trabajo puntual de alguien que no corre un build completo cada vez.

Casos típicos en Chile

Foto de carnet digital. Muchos formularios del Estado (ChileAtiende, Registro Civil, becas) piden fotos de documentos en resoluciones específicas. Subir la foto a 4000 px la rechazan por pesada; subirla a 300 px no se lee. Entre 1200 y 2000 px funciona para casi todos.

Portfolio profesional. Si estás armando un portfolio para enviar como PDF o subir a Behance / LinkedIn, redimensionar las imágenes maestras a 1920 px de ancho y exportar a WebP al 85% deja un portfolio nítido que pesa 3–5 veces menos que el original.

Imágenes para CV. Foto de perfil: 400–500 px. Logos de empresas donde trabajaste: 200–300 px. Cualquier cosa más grande es excesivo para un CV y dispara el peso del PDF final.

Imágenes para publicación en Mercado Libre. Recomiendan 1200×1200 como tamaño mínimo para que la imagen se vea bien en el zoom. Más arriba de 2000 px no aporta porque la plataforma recomprime igual.

Emails de newsletter. Las imágenes embebidas en emails suelen mostrarse a 600 px de ancho máximo. Subirlas a más resolución es desperdicio y hace que el email pese más, aumentando el riesgo de entrar en carpeta de spam.