Las imágenes suelen ser, con diferencia, lo más pesado de una página web, lo que las convierte en lo más rápido de arreglar. Preconfigurado abajo a WebP a 1920px — la combinación que sirve para la mayoría de sitios.
Preconfigurado en WebP, ajustado a 1920px — valores por defecto sensatos para la mayoría de webs.
En un sitio de contenido típico, las imágenes suponen la mayor parte del peso total de la página — habitualmente más que scripts, hojas de estilo, fuentes y marcado juntos.
Eso las hace especialmente rentables de optimizar. Reducir tu JavaScript a la mitad es un proyecto de ingeniería serio. Reducir el peso de tus imágenes un 70 % es cosa de una tarde, no cambia ni una línea de código y no arriesga a romper nada.
Largest Contentful Paint es la métrica que las imágenes afectan más directamente, y en la mayoría de páginas el elemento principal más grande es una imagen. LCP es una señal de posicionamiento y se mide sobre visitantes reales, no en laboratorio — así que una cabecera que tarda cuatro segundos en un móvil de gama media te perjudica, sin importar lo rápida que se sienta en tu portátil.
Cumulative Layout Shift no tiene que ver con el peso, pero merece la pena arreglarlo a la vez: pon siempre atributos width y height en tus etiquetas <img> para que el navegador reserve el espacio antes de que llegue la imagen.
loading="lazy" en cada imagen excepto la cabecera.La compresión solo ayuda si el navegador recibe realmente el archivo pequeño. Dos cosas que comprobar una vez optimizado.
Primero, asegúrate de que tu CMS no esté regenerando sus propias versiones desde el original y sirviéndolas en su lugar — muchos lo hacen, en silencio. Sube el archivo comprimido como origen, no el original de cámara.
Segundo, fija una vida de caché larga en las URLs de las imágenes para que los visitantes recurrentes no las vuelvan a descargar. Una imagen perfectamente comprimida que se solicita en cada visita sigue siendo ancho de banda desperdiciado.
WebP para casi todo — es un 25–35 % más pequeño que JPEG con la misma calidad y lo admiten todos los navegadores actuales. Conserva PNG solo donde necesites gráficos sin pérdida o transparencia y no puedas usar WebP.
Una calidad en torno a 75 combinada con redimensionar a las dimensiones mostradas da el mejor equilibrio. Redimensionar importa más que el número de calidad — la mayoría de imágenes se sirven mucho más grandes de lo que se muestran nunca.
De forma indirecta pero notable. Largest Contentful Paint es una señal de posicionamiento y suele determinarla una imagen, así que imágenes más ligeras mejoran una métrica que Google mide sobre visitantes reales.
1920px de ancho para cabeceras a todo el ancho, 1200px para imágenes dentro de una columna de artículo, y 800px o menos para miniaturas. Servir algo más grande envía datos que nunca se muestran.