Cómo optimizar imágenes para WordPress

El tamaño del archivo importa más que la resolución en pantalla

Una foto sacada directamente de un móvil moderno pesa 3-5 MB, aunque en la web se muestre en un espacio de 800×600 píxeles. El navegador descarga el archivo completo antes de ajustarlo al tamaño visible, así que ese peso extra se paga en tiempo de carga aunque nadie lo note visualmente.

Antes de subir cualquier imagen a WordPress, redimensiónala al tamaño real que va a ocupar en la página. No hace falta subir una imagen de 4000px de ancho para un espacio que mide 1200px.

JPEG, PNG o WebP: cuál usar según el tipo de imagen

JPEG es la opción por defecto para fotografías: buena calidad con un peso razonable. PNG solo tiene sentido cuando necesitas transparencia (logos, iconos), porque para fotos su peso es mucho mayor sin aportar calidad visible.

WebP pesa entre un 25% y un 35% menos que JPEG con la misma calidad, y ya lo soportan todos los navegadores modernos. Herramientas como Squoosh (de Google) permiten comparar formatos y ver el peso resultante antes de subir nada.

Automatizar la compresión sin tener que pensarlo en cada subida

Hacerlo a mano imagen por imagen no escala. Plugins como Smush o ShortPixel comprimen automáticamente cada imagen que subes a la biblioteca de medios, y algunos convierten a WebP sin que tengas que hacer nada extra.

Si usas LiteSpeed Cache, ya trae su propia herramienta de optimización de imágenes integrada, incluyendo conversión a WebP automática.

El lazy loading evita cargar lo que el usuario no ve todavía

Una página con 20 imágenes no necesita cargar las 20 de golpe. El lazy loading retrasa la carga de las imágenes hasta que el usuario hace scroll y están a punto de entrar en pantalla. WordPress lo activa por defecto desde la versión 5.5, pero merece la pena comprobar que está funcionando.

Esto es especialmente útil en páginas largas: portfolios, páginas de servicios con muchas fotos, o el propio blog. La primera pantalla carga rápido, y el resto se va cargando mientras el usuario navega.

Cómo comprobar si de verdad ha mejorado algo

Después de optimizar las imágenes, vuelve a medir con PageSpeed Insights y fíjate específicamente en el LCP: si tu elemento principal es una imagen, este es el número que debería bajar.

Si quieres un diagnóstico más completo de dónde está frenando tu web, aquí explico cómo saber qué la está ralentizando además de las imágenes.

Las miniaturas que WordPress genera solas, y por qué a veces sobran

Cada vez que subes una imagen, WordPress genera automáticamente varias versiones en distintos tamaños (miniatura, mediano, grande) para usarlas según el contexto. Esto está bien pensado, pero algunos temas y constructores de página (Divi incluido) generan tamaños adicionales muy específicos que rara vez se usan, ocupando espacio en el servidor sin ningún beneficio real de velocidad.

Plugins como «Media Cleaner» identifican qué tamaños de imagen generados nunca se usan en ninguna página, y permiten borrarlos sin afectar a las imágenes que sí están en uso. No es una prioridad urgente, pero en webs con muchas imágenes acumuladas durante años, libera espacio de forma notable.

El atributo alt no afecta a la velocidad, pero sí al SEO de imágenes

Aunque no tiene relación con el peso ni la carga, aprovechar la subida de cada imagen para escribir un texto alternativo descriptivo (no genérico tipo «imagen1.jpg») ayuda a que Google entienda de qué trata la imagen y pueda posicionarla en búsquedas de imágenes, una fuente de tráfico que muchas webs desaprovechan.

Cuándo una imagen de fondo pesa más de lo que debería

Las imágenes de fondo en secciones grandes (cabeceras, banners a pantalla completa) suelen ser de las más pesadas de toda la web, porque necesitan cubrir todo el ancho de pantalla en alta calidad. Aquí el equilibrio es más delicado: comprimir de más genera pixelado visible en pantallas grandes.

Una técnica útil es servir distintas versiones según el dispositivo: una imagen más ligera para móvil (donde la pantalla es más pequeña y no hace falta tanta resolución) y una más pesada solo para escritorio. Esto se conoce como «responsive images», y WordPress lo soporta de forma nativa a través del atributo srcset, aunque no todos los temas lo aprovechan correctamente.