Por qué redimensionar respetando el ratio
El ratio es la huella visual de la imagen. Cualquier objeto, persona o composición fue capturado o creado con cierta proporción. Si la cambiás (por ejemplo, achicás el ancho pero mantenés el alto), el resultado se estira o aplasta y se ve mal. Mantener el ratio garantiza que la imagen escala sin distorsionarse.
La fórmula
Si fijás un nuevo ancho:
nuevoAlto = nuevoAncho * (altoOriginal / anchoOriginal)Si fijás un nuevo alto:
nuevoAncho = nuevoAlto * (anchoOriginal / altoOriginal)Es la misma operación que hace cualquier editor de imágenes cuando tenés activado "constrain proportions" o el candado de bloqueo.
Tamaños recomendados para web
- Hero / banner: 1920×1080 (16:9) o 2560×1080 (ultrawide).
- Open Graph: 1200×630 fijo.
- Card thumbnail: 600-800 de ancho, alto según ratio (típicamente 16:9 o 4:3).
- Avatar: 200×200 mínimo, mejor 400×400 para retina.
- Logo: SVG si es vector, sino PNG transparente del tamaño máximo de uso.
Densidad de pantalla y retina
Los displays modernos tienen densidad 2x o 3x. Si tu imagen va a renderizarse en un container de 400px en una retina, el archivo tiene que ser de al menos 800px de ancho (o 1200 para 3x) para verse nítido. La regla práctica: exportá al doble del tamaño de display final.
srcset para responsive
En vez de servir una sola imagen gigante, lo correcto es generar varios tamaños y dejar que el browser elija. La sintaxis es así:
<img src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px">El browser elige el tamaño según viewport y densidad. Reduce ancho de banda y mejora performance.
Compresión
Redimensionar reduce los píxeles, pero la compresión reduce el peso del archivo. Idealmente hacés ambas cosas: redimensionar al tamaño correcto, después comprimir. Para JPG, calidad 75-85 es el sweet spot. Para PNG, herramientas como TinyPNG bajan el peso 50% sin pérdida visible. WebP y AVIF son los formatos modernos: mismo calidad con archivos 30-50% más livianos que JPG.
Errores comunes
- Subir la imagen original: una foto de 4000×3000 mostrada en un thumbnail de 300px gasta ancho de banda inútil.
- Estirar para llenar: si el ratio del container y el de la imagen no coinciden, mejor usar object-fit: cover o contain.
- No cuidar la versión retina: imágenes que se ven nítidas en monitor común se ven borrosas en retina si no son al doble.