Las imágenes suelen ser responsables de más de la mitad del tamaño de una página web. Las imágenes sin optimizar ralentizan tu sitio web, aumentan tu porcentaje de rebote y perjudican tu SEO. En este artículo aprenderás a optimizar correctamente las imágenes para conseguir la máxima velocidad sin pérdida de calidad.

Elegir el formato de imagen adecuado

WebP: el estándar moderno

WebP es el formato recomendado para imágenes web en 2024. Ofrece archivos un 25-35% más pequeños que JPEG con la misma calidad. WebP admite compresión con y sin pérdida, además de transparencia. Todos los navegadores modernos admiten WebP, así que ya no hay motivo para no usarlo.

JPEG: para fotos sin transparencia

JPEG sigue siendo adecuado para fotos que no necesitan transparencia y cuando tienes que dar soporte a navegadores antiguos. Usa un ajuste de calidad del 70-85% para lograr el mejor equilibrio entre tamaño y calidad. Los porcentajes más altos apenas aportan una mejora visible, pero sí archivos más grandes.

PNG: solo para transparencia

Los archivos PNG suelen ser mucho más grandes que los JPEG o WebP. Usa PNG solo cuando necesites transparencia y WebP no sea una opción. Para logotipos con pocos colores, PNG8 puede ser una opción compacta.

SVG: para iconos e ilustraciones

Las imágenes vectoriales se adaptan perfectamente a cualquier tamaño sin pérdida de calidad. Usa SVG para logotipos, iconos e ilustraciones sencillas. Los archivos SVG suelen ser más pequeños que las alternativas de mapa de bits y se les puede dar estilo con CSS.

Comprimir imágenes

Herramientas online

TinyPNG y Squoosh son excelentes herramientas gratuitas para comprimir imágenes. TinyPNG funciona bien con JPEG y PNG, mientras que Squoosh también ofrece conversión a WebP con vista previa de la calidad en tiempo real. Sube tus imágenes, elige los ajustes y descarga el resultado optimizado.

Plugins de WordPress

Smush es un plugin popular que comprime automáticamente las imágenes al subirlas. El plugin también puede optimizar en bloque las imágenes existentes y admite la conversión a WebP. Tras la instalación, Smush funciona automáticamente en segundo plano.

ShortPixel ofrece una compresión más agresiva y una excelente compatibilidad con WebP. El plugin funciona con un sistema de créditos con el que puedes optimizar gratis cierto número de imágenes al mes. Para sitios web más grandes hay disponible un plan de pago.

Imagify, de los creadores de WP Rocket, se integra a la perfección con ese plugin de caché. Ofrece tres niveles de compresión y conversión automática a WebP con alternativa para navegadores antiguos.

Definir correctamente las dimensiones

Nunca cargues una imagen de 4000 píxeles de ancho si solo se muestra a 800 píxeles. Esto desperdicia ancho de banda y ralentiza tu página innecesariamente. Reduce las imágenes al tamaño máximo de visualización antes de subirlas.

En los sitios web adaptables, usa el atributo srcset para ofrecer distintos tamaños. El navegador elige entonces automáticamente el tamaño adecuado para la pantalla del visitante. WordPress genera automáticamente varios tamaños al subir una imagen.

Implementar lazy loading

El lazy loading hace que las imágenes no se carguen hasta que entran en pantalla. Esto acelera considerablemente la carga inicial de la página, sobre todo en páginas con muchas imágenes.

Lazy loading nativo

Los navegadores modernos admiten lazy loading mediante el atributo loading. Añade loading equals lazy a tus elementos img. WordPress lo hace automáticamente desde la versión 5.5. El lazy loading nativo funciona sin JavaScript y es la solución más sencilla.

Con plugins de caché

LiteSpeed Cache ofrece amplias opciones de lazy loading. Puedes definir qué imágenes deben cargarse con lazy loading y cuáles no, configurar exclusiones para imágenes importantes por encima de la línea de flotación y mostrar imágenes de marcador durante la carga.

Imágenes por encima de la línea de flotación

Las imágenes visibles de inmediato, sin desplazarse, precisamente no deben usar lazy loading. Estas imágenes, como tu imagen principal o tu logotipo, deben cargarse lo antes posible. Usa preload para las imágenes críticas y asegúrate de que estén optimizadas para obtener buenas puntuaciones de LCP.

Servir imágenes adaptables

Con el elemento picture puedes servir distintos formatos y tamaños de imagen según el tamaño de la pantalla y la compatibilidad del navegador. Sirve WebP a los navegadores que lo admiten, con JPEG como alternativa para el resto. Los temas de WordPress y plugins como Elementor pueden encargarse de esto automáticamente.

CDN para imágenes

Una red de distribución de contenidos (Content Delivery Network) sirve las imágenes desde servidores cercanos a tus visitantes, lo que reduce los tiempos de carga. Cloudflare ofrece funciones de CDN gratuitas y puede optimizar imágenes y convertirlas a WebP automáticamente. Configura una CDN para obtener el mejor rendimiento.

Lista de comprobación práctica

Usa WebP como formato principal, con JPEG como alternativa. Comprime todas las imágenes antes de subirlas o usa un plugin automático. Reduce las imágenes al tamaño máximo de visualización. Implementa lazy loading para las imágenes por debajo de la línea de flotación. Precarga las imágenes críticas por encima de la línea de flotación. Plantéate una CDN si tienes público internacional.

Con imágenes optimizadas y el rápido hosting LiteSpeed de Theory7, tu sitio web carga a toda velocidad. Ponte en contacto con nuestro soporte si necesitas ayuda para optimizar tu sitio web.