Sabemos que para Google y sobre todo para la experiencia de usuario (UX) el tiempo de carga de la web es un factor MUY importante (¡un sólo segundo de carga más lenta puede repercutir en un % de caída de ventas!) y un factor determinante en este aspecto es el peso de las imágenes.
No tenemos que renunciar a imágenes de calidad en nuestra web, sobretodo en ecommerce en el que la imagen tiene una importancia crucial, por ejemplo, en el sector de la moda, fotografía, etc… pero hoy vamos a ver algunos tips sencillos para que las imágenes no lastren la carga de nuestra web.
¿Por qué es importante optimizar las imágenes?
Antes de sumergirnos en el cómo, entendamos el porqué:
- Velocidad de carga: Las imágenes pesadas aumentan el tiempo de carga de tu página, lo que puede frustrar a los visitantes y aumentar la tasa de rebote, e incluso repercutir en la indexación de la web.
- Posicionamiento SEO: Los motores de búsqueda como Google buscan que la experiencia de usuario sea 100% satistactoria, además para sus crawlers esperar a que tu contenido cargue significa perder tiempo y dinero… por lo que un sitio más rápido tiene mejores posibilidades de posicionarse.
- Experiencia del usuario: Nadie disfruta esperando a que se cargue una página. Una experiencia fluida mantiene a los visitantes interesados.
- Consumo de datos: Por último y no menos imporante, el ahorro de ancho de banda, tanto para el servidor como para el usuario. Las imágenes optimizadas consumen menos datos, algo especialmente importante para usuarios en dispositivos móviles.
Técnicas para optimizar imágenes en WordPress
1. Elegir el formato
No todos los formatos de imagen son iguales. Cada uno tiene sus propias ventajas:
- JPEG: Ideal para fotografías y imágenes con muchos colores. Ofrece buena compresión manteniendo la calidad visual.
- PNG: Perfecto para imágenes que requieren transparencia o tienen pocos colores.
- ✅WebP: Un formato moderno que ofrece mejor compresión que JPEG y PNG, manteniendo la calidad.
- SVG: Excelente para logos, iconos y gráficos simples, ya que son escalables sin perder calidad.
2. Redimensiona tus imágenes antes de subirlas
Una de las formas más sencillas de reducir el peso es ajustar las dimensiones:
- No subas imágenes de 4000×3000 píxeles si solo necesitas mostrarlas a 800×600.
- Utiliza herramientas como Photoshop, GIMP o incluso servicios online gratuitos como Canva para redimensionar (¡yo a veces incluso lo hago con Paint!)
- Piensa en el tamaño máximo que necesitarás para tu diseño responsive.
3. Comprime las imágenes
La compresión reduce el tamaño del archivo sin cambiar significativamente las dimensiones:
- Compresión sin pérdida: Reduce el tamaño sin afectar la calidad, pero el ahorro es menor.
- Compresión con pérdida: Logra mayores reducciones eliminando algunos datos, pero si se hace correctamente, la diferencia es imperceptible para el ojo humano.
4. Utiliza plugins de optimización
WordPress cuenta con numerosos plugins que automatizan el proceso:
- Smush: Comprime automáticamente las imágenes al subirlas y puede optimizar imágenes existentes.
- EWWW Image Optimizer: Muy completo, con opciones de optimización local y en la nube.
- Imagify: Creado por el equipo de WP Rocket, permite diferentes niveles de compresión.
5. Implementa Lazy Loading
Esta técnica carga las imágenes solo cuando son visibles en la pantalla:
- WordPress incluye lazy loading de forma nativa desde la versión 5.5.
- Para sitios con versiones anteriores, plugins como Lazy Load by WP Rocket son excelentes alternativas.
Con estos pasos ya tienes las imágenes más optimizadas que el 99% de tus competidores, por lo que ya hemos comentado que pese a que la carga no es un factor de posicionamiento (¡sino las webs serían .txt para pesas bytes!) si es algo que Google tiene en cuenta con las Core Web Vitals, así que no lo dejes de lado.
