Como optimizar imagenes para WordPress

Las imagenes son casi siempre la parte mas pesada de cualquier pagina de WordPress. En un sitio tipico, las imagenes representan entre el 50 y el 80% del peso total de la pagina, y no es raro ver una unica imagen hero sin optimizar que pesa mas que todo el HTML, el CSS y el JavaScript juntos. Si tu sitio se siente lento, las imagenes son lo primero que debes revisar. La buena noticia es que la optimizacion de imagenes ofrece algunas de las mayores y mas sencillas mejoras de rendimiento que puedes conseguir.

Por que las imagenes son el mayor factor de peso de la pagina

La camara de un movil moderno produce fotos de entre 3 y 8 MB cada una. Si las subes directamente a WordPress sin ningun procesamiento, eso es lo que tienen que descargar tus visitantes. Multiplica eso por 5-10 imagenes en una pagina y estaras hablando de 30-80 MB de datos de imagen, suficiente para que incluso conexiones rapidas se sientan lentas.

El peso de la pagina afecta directamente al tiempo de carga, que afecta a la experiencia del usuario y al SEO. Google usa la velocidad de la pagina como factor de ranking, y los Core Web Vitals (en particular Largest Contentful Paint) estan muy influenciados por el tamano de las imagenes. Cada kilobyte que recortes en tus imagenes se traduce en tiempos de carga mas rapidos, menores tasas de rebote y mejores posiciones en buscadores.

Elegir el formato de imagen adecuado

El formato que elijas para cada imagen puede marcar una diferencia drastica en el tamano del archivo. Aqui te indicamos cuando usar cada formato:

• WebP: el mejor formato de uso general para imagenes web hoy en dia. WebP ofrece archivos entre un 25 y un 35% mas pequenos que JPEG con la misma calidad visual, y admite tanto compresion con perdida como sin perdida, ademas de transparencia. Todos los navegadores modernos lo soportan (Chrome, Firefox, Safari 14+, Edge). A menos que necesites soportar navegadores muy antiguos, WebP deberia ser tu opcion por defecto.
• AVIF: el formato mas reciente, que ofrece archivos entre un 20 y un 30% mas pequenos que WebP. AVIF produce excelentes resultados con ajustes de calidad bajos, lo que lo hace ideal para imagenes hero grandes donde cada kilobyte cuenta. La compatibilidad con navegadores esta creciendo (Chrome, Firefox, Safari 16.4+), pero la codificacion es mas lenta que con WebP. Uselo cuando la maxima compresion sea importante y puedas permitirte el tiempo de codificacion.
• JPEG: sigue siendo el formato mas ampliamente compatible y una opcion solida para fotografias. Usa ajustes de calidad entre el 80 y el 85% para un buen equilibrio entre tamano de archivo y calidad visual. Por debajo del 75%, los artefactos de compresion se vuelven perceptibles. Por encima del 90%, la mejora de calidad es apenas visible pero el aumento de tamano es significativo.
• PNG: usa PNG solo cuando necesites transparencia (logos, iconos con fondos transparentes) o reproduccion pixel-perfect (capturas de pantalla, diagramas). Los archivos PNG son tipicamente entre 3 y 5 veces mas grandes que JPEG/WebP para contenido fotografico. Si necesitas transparencia y archivos mas pequenos, considera WebP con canal alfa.
• SVG: perfecto para logos, iconos e ilustraciones simples. Los SVG son vectoriales, por lo que escalan a cualquier tamano sin perdida de calidad y suelen pesar solo unos pocos kilobytes. Ademas se pueden estilar con CSS. No uses SVG para fotografias.

Entender la compresion de imagenes: con perdida vs. sin perdida

Hay dos tipos fundamentales de compresion, y entender la diferencia te ayuda a tomar mejores decisiones de optimizacion:

La compresion con perdida elimina datos de la imagen menos perceptibles para el ojo humano. Esto consigue ratios de compresion mucho mayores (a menudo entre un 70 y un 90% de reduccion de tamano), pero el proceso es irreversible. No puedes recuperar la calidad original. Para imagenes web, la compresion con perdida al nivel de calidad correcto es casi siempre la opcion correcta, porque el ahorro de tamano es enorme y la diferencia de calidad es invisible a las distancias tipicas de visualizacion en pantalla.

La compresion sin perdida reduce el tamano del archivo sin descartar ningun dato. La imagen original puede reconstruirse perfectamente. La contrapartida es que la compresion sin perdida normalmente solo logra entre un 10 y un 30% de reduccion. Usa compresion sin perdida para imagenes en las que cada pixel importa, como fotografia de producto para vistas con zoom en e-commerce, imagenes medicas o capturas de pantalla con texto.

Para la mayoria de sitios WordPress, un ajuste de compresion con perdida del 80-85% de calidad ofrece un equilibrio excelente. A ese nivel, la diferencia visual con respecto al original es practicamente indetectable, pero el tamano del archivo suele ser entre un 60 y un 75% menor.

Dimensiones de imagen recomendadas para WordPress

Subir imagenes mas grandes de lo necesario desperdicia ancho de banda y ralentiza tu sitio. Aqui tienes pautas practicas para los tamanos de imagen comunes en WordPress:

• Imagenes hero a ancho completo: 1920px de ancho es suficiente para la mayoria de pantallas. Llegar a 2560px es razonable si quieres cubrir pantallas de alta densidad (Retina) a ancho completo.
• Imagenes destacadas de entradas: 1200px de ancho cubre la mayoria de layouts de tema y se ve nitido en pantallas Retina.
• Imagenes de contenido dentro de las entradas: ajusta al ancho de la columna de contenido de tu tema. Si tu area de contenido tiene 800px de ancho, sube las imagenes a 1600px (2x para Retina).
• Miniaturas e imagenes de archivo: 600x400px es un tamano comun, pero comprueba lo que realmente usa tu tema.
• Imagenes de producto WooCommerce: 800-1200px en el lado mas largo, dependiendo de si tu tema admite zoom.

No tiene sentido subir una imagen de 6000px cuando el maximo en que se mostrara es 1920px. Cambia el tamano antes de subir, o usa un plugin que lo haga al subir.

Tamanos de imagen y regeneracion en WordPress

Cuando subes una imagen, WordPress genera automaticamente varios tamanos: thumbnail (150x150), medium (300x300), medium_large (768px de ancho) y large (1024x1024). Tu tema y tus plugins pueden registrar tamanos adicionales.

Puedes ver y ajustar los tamanos por defecto en Ajustes, luego Medios. Si cambias estas dimensiones despues de subir las imagenes, las miniaturas existentes no se actualizaran automaticamente. Tienes que regenerarlas con un plugin como Regenerate Thumbnails o mediante WP-CLI:

# Regenerar todas las miniaturas
wp media regenerate --yes

# Regenerar miniaturas para una imagen concreta
wp media regenerate 42

Si tu tema registra tamanos de imagen personalizados que rara vez usas, esos tamanos innecesarios desperdician espacio en disco y tiempo de procesamiento en cada subida. Puedes usar el plugin Stop Generating Unnecessary Thumbnails para deshabilitar los tamanos que no necesitas.

Plugins de optimizacion de imagenes

La forma mas sencilla de optimizar imagenes en WordPress es con un plugin dedicado que comprima las imagenes automaticamente al subirlas. Aqui tienes las opciones mas populares:

• ShortPixel Image Optimizer: ofrece modos de compresion con perdida, glossy y sin perdida. Incluye conversion a WebP y AVIF. Funciona mediante una API en la nube, por lo que no carga tu servidor. El plan gratuito incluye 100 creditos al mes (un credito por tamano de imagen generado). El modo glossy es especialmente bueno, ya que ofrece calidad visual casi sin perdida con tamanos de archivo de compresion con perdida.
• Imagify: desarrollado por el mismo equipo de WP Rocket. Ofrece modos Normal (sin perdida), Aggressive (con perdida) y Ultra (compresion maxima). Incluye conversion a WebP y una herramienta de optimizacion masiva. La interfaz es limpia y facil de entender. El plan gratuito incluye 20 MB al mes.
• Smush: opcion gratuita popular que ofrece compresion sin perdida sin limite mensual. La version gratuita comprime imagenes de hasta 5 MB y maneja la optimizacion masiva de hasta 50 imagenes a la vez. La version Pro anade compresion con perdida, conversion a WebP y entrega por CDN.
• EWWW Image Optimizer: unico en que puede ejecutar la compresion localmente en tu servidor sin una API externa. Buena eleccion para sitios con preocupaciones de privacidad o necesidades de alto volumen. Soporta conversion a WebP, lazy loading y redimensionamiento automatico. El modo basado en API ofrece mejores ratios de compresion.

Todos estos plugins tambien pueden optimizar imagenes que se subieron antes de instalar el plugin. Busca la funcion "optimizacion masiva" para procesar tu biblioteca de medios existente.

Convertir imagenes a WebP

Si todavia sirves archivos JPEG y PNG, convertirlos a WebP es una de las victorias mas faciles. La mayoria de plugins de optimizacion incluyen la conversion a WebP como funcion integrada. Generan una version WebP junto al original y la sirven a navegadores que la soportan.

Para conversion manual a WebP puedes usar herramientas de linea de comandos:

# Convertir una sola imagen a WebP
cwebp -q 80 input.jpg -o output.webp

# Convertir en bloque todos los JPEG de un directorio
for file in *.jpg; do cwebp -q 80 "$file" -o "${file%.jpg}.webp"; done

Para servir imagenes WebP a navegadores compatibles y volver a JPEG/PNG en navegadores antiguos, puedes anadir lo siguiente a tu archivo .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.+).(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule (.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

Lazy Loading de imagenes en WordPress

El lazy loading retrasa la carga de imagenes que no estan visibles actualmente en el viewport del navegador. En lugar de descargar todas las imagenes cuando la pagina se carga por primera vez, el navegador solo obtiene las imagenes a medida que el usuario hace scroll hasta ellas. Esto puede reducir drasticamente el tiempo de carga inicial, especialmente en paginas con muchas imagenes.

Desde WordPress 5.5, la plataforma anade loading="lazy" a las imagenes automaticamente. Este lazy loading nativo a nivel de navegador es compatible con todos los navegadores modernos y no requiere JavaScript.

Hay algunas cosas importantes a tener en cuenta:

• No apliques lazy loading a imagenes above-the-fold: tu imagen hero, logo y cualquier imagen visible sin hacer scroll deberian cargarse inmediatamente. Aplicarles lazy loading en realidad perjudica el rendimiento porque el navegador retrasa la carga de contenido que el usuario ya puede ver. Desde WordPress 5.9, la plataforma omite automaticamente el lazy loading para la primera imagen de la pagina.
• Usa fetchpriority="high" para imagenes hero: anadir fetchpriority="high" a tu imagen above-the-fold mas importante le indica al navegador que priorice su descarga. Esto puede mejorar significativamente la puntuacion de Largest Contentful Paint.
• Comprueba que tu tema no elimina el lazy loading: algunos temas o page builders antiguos eliminan el atributo loading. Comprueba el codigo fuente de tu pagina para confirmar que esta presente.

Imagenes responsive con srcset

WordPress genera automaticamente los atributos srcset y sizes para las imagenes anadidas a traves del editor de contenido. Estos atributos le indican al navegador que tamano de imagen descargar segun el ancho del viewport, de modo que un usuario movil descarga una imagen mas pequena que un usuario de ordenador.

Asegurate de que tu tema no anula este comportamiento. Una etiqueta de imagen responsive correctamente configurada se ve asi:

<img src="photo-1024.jpg"
     srcset="photo-300.jpg 300w, photo-768.jpg 768w, photo-1024.jpg 1024w, photo-1536.jpg 1536w"
     sizes="(max-width: 768px) 100vw, 800px"
     width="1024" height="768"
     loading="lazy"
     alt="A descriptive alt text" />

Si anades imagenes mediante codigo personalizado o un page builder, asegurate de usar wp_get_attachment_image() en lugar de escribir manualmente etiquetas <img>. Esta funcion incluye automaticamente los atributos srcset y sizes.

Usar un CDN para la entrega de imagenes

Una Content Delivery Network (CDN) almacena copias de tus imagenes en servidores de todo el mundo y las sirve desde la ubicacion mas cercana a cada visitante. Esto reduce la latencia y acelera la entrega de imagenes, especialmente para visitantes lejanos a tu servidor de hosting.

Opciones populares de CDN para imagenes WordPress:

• Cloudflare: el plan gratuito incluye un CDN con cobertura global. El plan Pro anade funciones de optimizacion de imagenes como Polish (compresion automatica) y conversion a WebP.
• BunnyCDN: precios asequibles de pago por uso con un excelente rendimiento. Incluye una funcion de optimizacion de imagenes llamada Bunny Optimizer que gestiona el redimensionamiento, la compresion y la conversion a WebP al vuelo.
• KeyCDN: CDN amigable para desarrolladores con plugins de integracion para WordPress disponibles.

La mayoria de plugins de cache (WP Rocket, LiteSpeed Cache, W3 Total Cache) incluyen ajustes de integracion con CDN que facilitan la configuracion.

SEO de imagenes: texto alt y nombres de archivo

La optimizacion de imagenes no es solo cuestion de tamano de archivo. Las practicas SEO adecuadas ayudan a que tus imagenes aparezcan en Google Imagenes, lo que puede atraer trafico relevante:

• Texto alt: escribe un texto alt descriptivo para cada imagen. Esto ayuda a los buscadores a entender el contenido de la imagen y es esencial para la accesibilidad (lectores de pantalla). Mantenlo conciso pero descriptivo: "Zapatillas de running rojas sobre fondo blanco" es mejor que "zapatillas" o "IMG_4532."
• Nombres de archivo: renombra los archivos de imagen antes de subirlos. Usa nombres descriptivos con guiones como red-running-shoes.jpg en lugar de DSC_0042.jpg. Los buscadores usan los nombres de archivo como senal de ranking para la busqueda de imagenes.
• Atributos title: menos importantes para SEO que el texto alt, pero utiles para proporcionar contexto adicional al pasar el cursor en algunos navegadores.
• Pies de foto: los pies de foto son leidos con mas frecuencia que el texto del cuerpo por muchos visitantes. Usalos cuando aporten valor al contenido.

Verifica tu optimizacion de imagenes con InspectWP

Despues de optimizar tus imagenes, ejecuta un analisis de InspectWP para comprobar los resultados. InspectWP informa del numero total de imagenes en tu pagina y te ayuda a identificar como se relacionan el numero de imagenes y el peso de la pagina con tus metricas globales de rendimiento. Usa la funcion de informes automaticos de InspectWP para monitorizar tu optimizacion de imagenes a lo largo del tiempo y detectar regresiones tras actualizaciones de contenido o cambios de plugins.