Tamaño y peso ideal de las imágenes para web

La pregunta «¿cuánto debe pesar una imagen?» no tiene una única respuesta, pero sí valores de referencia muy útiles. La mayoría de webs carga imágenes entre 3 y 10 veces más grandes de lo que muestran en pantalla: suben una foto de 4000 px de la cámara para un carrusel que se ve a 800 px. Aquí van dimensiones y pesos concretos para cada uso.

Dimensiones recomendadas por tipo de imagen

• Hero / banner de portada: 1920 × 1080 px como máximo. Si tu contenedor es más estrecho, 1440 px es suficiente.
• Imagen dentro de un artículo: 1200 px de ancho (el ancho útil de un contenedor de lectura en pantallas grandes).
• Ficha de producto: 1000-1200 px; los principales marketplaces recomiendan al menos 1000 px para el zoom.
• Miniaturas y listados: 400-800 px de ancho.
• Avatares e iconos: 64-256 px, con dos tamaños si se usan en retina (1x y 2x).
• Compartir en redes (Open Graph): 1200 × 630 px.

Si sirves la imagen en pantallas de alta densidad (casi todas las móviles y portátiles actuales), la regla práctica es: ancho en pantalla × 2 = ancho del archivo. Un contenedor de 800 px admite un máster de 1600 px cómodamente; más allá no se aprecia diferencia.

Pesos objetivo en formato WebP

• Hero de portada: por debajo de 150 KB; idealmente 80-120 KB al 80% de calidad.
• Imagen de artículo: 40-80 KB. Varias imágenes así suman menos que un JPG enorme.
• Ficha de producto: 60-100 KB por imagen; usa varias vistas ligeras en lugar de una gigante.
• Miniatura: 10-25 KB.
• Icono: 2-10 KB sin pérdida.

Si una imagen supera con mucho estos valores, casi siempre es por dos motivos: dimensiones excesivas o formato equivocado. Redimensiona primero y vuelve a comprimir; el orden importa.

Paso a paso para dejar una imagen lista para web

1. Recorta y redimensiona al ancho final de la que se va a mostrar (no antes, no después).

2. Convierte a WebP con calidad 80% para fotografías o sin pérdida para texto e iconos. Puedes hacerlo con el conversor de este sitio.

3. Declara las dimensiones en el HTML con width y height para que el navegador reserve el espacio (esto protege tu CLS).

<img src="producto.webp" alt="Descripción de la imagen"
     width="1200" height="800" loading="lazy">

Cómo comprobar el resultado

Mide la página con PageSpeed Insights y revisa la métrica LCP: si el elemento principal es una imagen, cada kilobyte que recortes se traduce directamente en velocidad. También conviene desactivar loading="lazy" en la imagen hero (debe ser la primera en cargarse, no la última).

Para un plan completo de mejora, consulta la guía de cómo mejorar el LCP y para elegir el formato correcto, la comparativa PNG vs JPG.