El mejor tamaño y calidad de imagen para la web (según el uso)

«¿Qué tamaño deben tener mis imágenes?» es una de las preguntas más frecuentes del diseño web — y la respuesta siempre es «depende de dónde se muestren». Un tamaño equivocado ralentiza la página o degrada la calidad; con pautas por caso de uso evitas ambos problemas. Esta guía da puntos de partida prácticos de dimensiones, peso y calidad para que dejes de adivinar.

Dos números que importan

Toda imagen web tiene dos tamaños: sus dimensiones en píxeles (como 1600×900) y su peso en kilobytes. Las dimensiones deben aproximarse al espacio que ocupa la imagen en pantalla, y el peso debe ser lo menor posible sin dejar de verse limpio. Optimizar ambos es la meta.

Pautas por caso de uso

Cabeceras a ancho completo

Apunta a 1600–2000 px de ancho para pantallas grandes y mantén el archivo por debajo de unos 200 KB con WebP o AVIF. Como la cabecera suele ser el elemento LCP, su peso influye muchísimo en la velocidad percibida.

Fotos de blog y contenido

La mayoría de columnas de artículo miden 700–900 px, así que una imagen de 1200–1600 px cubre las pantallas retina. Apunta a bastante menos de 150 KB. Calidad 75 en WebP casi siempre basta.

Miniaturas y tarjetas

Las miniaturas se ven pequeñas en pantalla, así que 400–600 px sobran. A menudo pueden bajar de 30–50 KB, lo que importa mucho cuando una página muestra docenas.

Un punto de partida para la calidad

En formatos con pérdida, calidad 70–80 es el rango seguro para fotos. AVIF logra el mismo aspecto con valores algo menores. Compara siempre antes y después: el valor correcto es el más bajo en el que no notes diferencia.

Llévalo a la práctica

Elige un ancho objetivo para cada caso, redimensiona a ese ancho y convierte a WebP o AVIF con calidad 75. Con Scrunch puedes convertir un lote completo de imágenes y revisar cada resultado contra el original antes de descargar — manteniendo cada imagen tan ligera como debe ser.

Preguntas frecuentes

¿Puedo subir imágenes mayores que el tamaño de visualización?

Hasta unas 2x el tamaño de visualización es útil para pantallas retina. Más allá solo desperdicias ancho de banda y ralentizas la página — trata el 2x como límite.

¿Cuanto más pequeño el archivo, mejor?

Si aprietas demasiado, la calidad sufre visiblemente. La meta es el archivo más pequeño que aún se vea limpio. Compara antes y después para hallar el equilibrio.

¿Debo usar la misma calidad para todas las imágenes?

Calidad 75 es un valor por defecto sólido, pero puedes ser más cuidadoso con cabeceras grandes y más agresivo con miniaturas pequeñas. Ajustar por caso de uso da los mejores resultados.

¿Los nombres de archivo afectan al SEO?

Sí. Nombres descriptivos y texto alt ayudan a la búsqueda de imágenes y la accesibilidad. Mejor red-running-shoes.webp que img12345.jpg. Combinado con la optimización de tamaño y peso, refuerza tu SEO de imágenes.