Reduce el tamaño de las imágenes para acelerar tu sitio web
En la mayoría de los sitios web, las imágenes representan la mayoría de los bytes que descarga un visitante. Eso convierte la optimización de imágenes en lo de mayor impacto que puedes hacer por la velocidad de la página y los Core Web Vitals. Aquí tienes una lista práctica.
1. Comprime cada imagen
Pasa tus imágenes por un compresor antes de publicar. Una imagen bien comprimida puede ser una fracción del tamaño original sin diferencia visible. CompressEasy hace esto en tu navegador, por lotes, así que encaja en cualquier flujo de trabajo.
2. Usa formatos modernos
Cambiar de JPEG y PNG a WebP o AVIF puede reducir sustancialmente el peso de las imágenes. Este es uno de los cambios de mayor impacto y más sencillos para el rendimiento.
3. Redimensiona a las dimensiones mostradas
No envíes una imagen de 4000 píxeles para mostrarla a 800 píxeles. Ajusta las dimensiones de la imagen a cómo se muestra realmente, teniendo en cuenta las pantallas de alta densidad con una fuente de aproximadamente 2x.
4. Carga diferida para imágenes fuera de pantalla
Añade loading="lazy" a las imágenes por debajo del pliegue para que el navegador solo las descargue cuando el usuario se desplaza. Esto acelera drásticamente la carga inicial en páginas largas.
5. Establece el ancho y el alto
Incluye siempre los atributos width y height (o aspect-ratio en CSS) para que el navegador reserve espacio. Esto evita los saltos de diseño y mejora la métrica de Cumulative Layout Shift.
Primero el mayor logro
Si solo haces una cosa, comprime y convierte tus imágenes más grandes a WebP o AVIF. Es rápido, gratuito y normalmente recorta lo máximo del peso de tu página. Empieza soltando tus archivos en el compresor.