Cómo optimizar las imágenes en WordPress: la guía completa

Un artículo de blog o una página de producto típicos incluyen un puñado de imágenes, y cada una puede pesar más que todo el texto, el código y los estilos de la página juntos. Las imágenes pesadas afectan a tu web de cuatro maneras.

• Velocidad y experiencia: los archivos grandes retrasan el momento en que la página parece lista, sobre todo con conexión móvil. Las páginas lentas pierden visitantes antes de que lean una sola palabra.
• Visibilidad en buscadores: Google usa señales de experiencia de página como el Largest Contentful Paint, y una imagen de cabecera grande suele ser el elemento que decide esa puntuación.
• Costes y límites del alojamiento: cada visitante descarga los archivos, así que las imágenes pesadas consumen ancho de banda y pueden llevar al límite a los planes de hosting baratos.
• Mantenimiento: una biblioteca de medios llena de originales enormes hace que las copias de seguridad, las migraciones y los entornos de pruebas sean más lentos y más grandes.

La buena noticia es que las imágenes también son la parte más fácil de mejorar de una web. Unos cuantos hábitos al subirlas suelen quitar la mitad del peso de una página.

Las versiones recientes de WordPress se encargan de varias cosas de forma automática:

• Crea copias más pequeñas de cada imagen, normalmente de unos 150, 300, 768, 1024 y 1536 píxeles de ancho, y añade un atributo srcset para que los navegadores elijan la mejor para cada pantalla.
• Reduce los originales muy grandes, con un umbral de 2560 píxeles.
• Añade loading="lazy" a las imágenes, de modo que las que quedan por debajo de la primera pantalla se descargan más tarde.
• Acepta subidas en WebP, y las versiones recientes también aceptan AVIF.

Estas funciones son útiles, pero tienen un límite: WordPress trabaja a partir del archivo que subes. Si ese archivo está sin comprimir y es enorme, todas las copias generadas pesan más de lo debido. Un tema que muestra la imagen a tamaño completo en un hueco pequeño también desperdicia ancho de banda, y un plugin que aplica carga diferida a todo puede ralentizar tu imagen más importante.

No hay una única mejor opción. La mayoría de las webs funcionan mejor con una combinación. Así se comparan.

Optimización manual

• Ventajas: decides el tamaño y la calidad exactos, no se ejecuta nada en tu servidor y puedes ver el resultado antes de publicarlo.
• Inconvenientes: solo ayuda con las imágenes que tratas tú, así que no arregla una biblioteca existente, y depende de que todos los que publican sigan los mismos pasos.

Plugins

• Ventajas: pueden procesar cientos de imágenes antiguas y siguen funcionando sin que nadie tenga que acordarse de nada.
• Inconvenientes: cada plugin añade código, ajustes y actualizaciones que mantener. Comprueba si conserva tus originales, si puedes deshacer los cambios y si las imágenes se envían a un servicio de terceros, algo importante para la privacidad y para el trabajo con clientes.

CDN y servicios de imágenes

• Ventajas: convierten formatos y redimensionan al vuelo, de modo que cada visitante recibe un archivo apropiado, y aceleran la entrega.
• Inconvenientes: cuestan dinero, añaden una dependencia y necesitan una configuración correcta para no romper la caché ni las URL de las imágenes.

Una pauta sensata: optimiza a mano las imágenes nuevas antes de subirlas, y usa un plugin o una CDN solo para tratar la biblioteca que ya tienes.

No hace falta arreglar todas las imágenes antiguas. Empieza por las que más importan.

• Localiza a las más pesadas. Pasa tu página de inicio y tus cinco entradas principales por PageSpeed Insights y anota los archivos que señala como demasiado grandes o en un formato antiguo.
• Sustituye primero esos archivos. Descarga el original, redimensiónalo y comprímelo, vuelve a subirlo y cámbialo en la página. Reemplazar un puñado de imágenes pesadas suele rendir más que convertir toda la biblioteca de golpe.
• Usa con cuidado una herramienta masiva. Si usas un plugin, pruébalo en una copia de tu web, confirma que se conservan los originales y revisa algunas páginas después por si hay imágenes rotas o borrosas.
• Regenera los tamaños tras cambiar de tema. Un tema nuevo puede usar tamaños de imagen distintos, así que puede que haya que regenerar las miniaturas.

• Subir los originales de la cámara. Una foto de 6000 píxeles mostrada en una columna de 800 desperdicia la mayor parte de sus datos.
• Comprimir el mismo archivo una y otra vez. Cada guardado con pérdida resta un poco más. Trabaja siempre a partir del original. Consulta compresión con y sin pérdida.
• Aplicar carga diferida a la imagen de cabecera. La primera imagen grande debe cargarse de inmediato. La guía de carga diferida explica por qué.
• Usar PNG para fotos. El PNG es para gráficos. Una foto guardada como PNG puede ser diez veces mayor que en JPG.
• Saltarse el texto alternativo y los nombres de archivo con sentido. Son tareas pequeñas con un beneficio real para la accesibilidad y las búsquedas.

Mide antes y después para saber lo que has ganado. Pasa las mismas páginas por PageSpeed Insights o Lighthouse y compara el peso total de las imágenes y el tiempo del Largest Contentful Paint. El informe de Core Web Vitals de Google Search Console muestra lo que viven los visitantes reales a lo largo de semanas, así que dale tiempo para actualizarse. Para una lista más amplia, consulta la lista de comprobación para optimizar imágenes web y la guía sobre cómo afectan las imágenes a los Core Web Vitals.