El punto de partida
Las ilustraciones de este blog salieron de un generador de imágenes como PNG de 1536 por 1024 píxeles. Esto es lo que pesaban.
| Imagen | PNG original | WebP en el artículo | WebP en las tarjetas |
|---|---|---|---|
| Ilustración 1 | 1,33 MB | 39 KB | 13 KB |
| Ilustración 2 | 1,44 MB | 54 KB | 18 KB |
| Ilustración 3 | 1,46 MB | 54 KB | 18 KB |
Las tres juntas sumaban unos 4,2 MB. Ahora suman unos 150 KB en los artículos, y menos todavía en las tarjetas. Más de un 96 % de ahorro, sin que se note a simple vista.
Los pasos que seguimos
- Medir lo que se ve. En el artículo la imagen se muestra a unos 740 píxeles de ancho. Con pantallas de alta densidad, 1200 píxeles son más que suficientes. Los 1536 originales sobraban.
- Redimensionar. Pasamos cada imagen a 1200 por 800 para el artículo.
- Convertir a WebP. Con calidad 82, cada imagen quedó entre 39 y 54 KB.
- Hacer una versión chica para las tarjetas. En el listado del blog y en la portada las imágenes se ven pequeñas. Una versión de 600 por 400 pesa la mitad.
- Dejar una versión JPG para las redes. Al compartir un enlace, algunas redes aún no muestran bien el WebP. Esa copia solo la descargan los programas de WhatsApp, LinkedIn o X, no tus visitas.
- Cargar de forma diferida. Las imágenes que están más abajo llevan loading="lazy", así el navegador las descarga recién cuando la persona se acerca.
Lo mismo con una foto de fondo
El encabezado de verdimetro.com tiene una foto de bosque. Pesaba 254 KB y la pasamos a 111 KB, reduciendo su ancho y la calidad. Como lleva encima una capa verde, la diferencia no se nota. Esa mejora, junto con cargar Google Analytics solo cuando la persona interactúa, ayudó a que el sitio saque nota A+.
Cómo hacerlo en tu sitio
- Revisa cuánto pesan tus imágenes más grandes. Suelen ser las que más pesan en toda la página.
- Exporta cada una al tamaño real en que se muestra, y a 2x si quieres nitidez en pantallas de alta densidad.
- Conviértelas a WebP, con herramientas de edición, convertidores en línea o los ajustes de tu gestor de contenidos.
- Agrega loading="lazy" a las que no se ven al abrir la página.
- Mide antes y después en Verdímetro para ver cuántos gramos de CO2 ahorraste por visita.
Hay más ideas en siete formas de reducir el peso de tu sitio web, y el efecto de cada kilobyte en las emisiones está explicado en cómo calcular la huella de carbono de una web.
Preguntas frecuentes
¿Por qué tanta diferencia de peso?
Hubo dos causas. Las imágenes originales eran más grandes de lo necesario, y el PNG guarda cada píxel sin perder nada. Redimensionar y pasar a WebP elimina los dos excesos.
¿Se nota la pérdida de calidad?
En ilustraciones planas, como estas, casi no. Con una calidad de 80 a 85 de 100 el ojo no ve diferencia, y el archivo baja muchísimo. Conviene probar con cada tipo de imagen.
¿Qué formato conviene, WebP o AVIF?
WebP funciona en todos los navegadores actuales y es un buen punto de partida. AVIF suele comprimir algo más, pero hay que probar si tus visitas y tu plataforma lo soportan.
Fuentes
Artículo de Verdímetro. Los cálculos usan el modelo Sustainable Web Design y los mismos valores que la página de método.