Código: WP-204 | Nivel: Principiante | Duración estimada: 10 minutos
Introducción
Las imágenes pueden representar una parte importante del peso total de una página web. Utilizar archivos innecesariamente grandes puede aumentar los tiempos de carga, consumir más transferencia de datos y perjudicar la experiencia del visitante.
En este tutorial aprenderás a redimensionar, comprimir y seleccionar correctamente los formatos de imagen, además de aprovechar las funciones de WordPress para entregar versiones adecuadas según el dispositivo.
El objetivo no es simplemente conseguir archivos pequeños, sino encontrar un equilibrio entre calidad visual, dimensiones, formato y peso.
Requisitos previos
- Acceso al panel de administración de WordPress.
- Imágenes originales disponibles para su optimización.
- Permisos suficientes si necesitas instalar o configurar plugins.
- Una copia de seguridad reciente antes de realizar optimizaciones masivas sobre archivos existentes.
Si vas a optimizar masivamente una biblioteca existente, realiza primero una copia de seguridad. Algunas operaciones de compresión, conversión o eliminación de originales pueden ser difíciles de revertir.
Paso 1 — Elegir el formato adecuado
No existe un único formato ideal para todas las imágenes. La elección depende principalmente del tipo de contenido, la necesidad de transparencia, la calidad requerida y la compatibilidad deseada.
| Formato | Uso habitual | Características |
|---|---|---|
| JPEG | Fotografías e imágenes con muchos colores y gradaciones. | Muy compatible y permite ajustar la compresión para equilibrar calidad y peso. |
| PNG | Gráficos rasterizados que requieren transparencia o determinadas imágenes donde interesa compresión sin pérdida. | Admite transparencia y compresión sin pérdida, pero puede producir archivos considerablemente mayores que otros formatos. |
| WebP | Fotografías, gráficos y numerosas imágenes destinadas a la web. | Formato moderno con buena relación entre calidad y tamaño y amplio soporte en navegadores actuales. |
| AVIF | Imágenes web cuando la infraestructura y el flujo de trabajo permiten utilizarlo. | Formato moderno capaz de ofrecer una compresión muy eficiente, aunque conviene comprobar compatibilidad con el flujo de edición, servidor y herramientas utilizadas. |
| GIF | Animaciones sencillas o contenido heredado. | No suele ser la opción más eficiente para fotografías ni para animaciones complejas modernas. |
Para la mayoría de las fotografías y portadas destinadas a sitios modernos, WebP representa un buen punto de partida. No conviertas automáticamente todos los archivos al mismo formato: analiza primero el tipo de imagen y su uso.
Paso 2 — Redimensionar antes de subir
Una de las optimizaciones más efectivas consiste en evitar imágenes con dimensiones muy superiores a las que realmente necesita el sitio.
Por ejemplo, si una imagen nunca se mostrará a más de 1200 píxeles de ancho, normalmente no tiene sentido entregar al visitante un original de 4000 píxeles únicamente para reducirlo visualmente mediante CSS o HTML.
- Determina aproximadamente el ancho máximo al que se mostrará la imagen en tu diseño.
- Redimensiona el original manteniendo correctamente su proporción.
- Evita ampliar imágenes pequeñas por encima de su resolución original, ya que esto no crea detalle real y puede reducir la calidad visual.
- Exporta la imagen utilizando un nivel de calidad adecuado para su destino.
- Comprueba visualmente el resultado antes de subirlo a WordPress.
Reducir visualmente una imagen mediante CSS no reduce automáticamente los bytes que el navegador debe descargar. Las dimensiones del archivo y la entrega responsive deben estar correctamente optimizadas.
Paso 3 — Comprimir las imágenes
La compresión busca reducir el tamaño del archivo manteniendo una calidad visual adecuada para el uso previsto.
Optimización antes de subir
Puedes preparar las imágenes antes de incorporarlas a WordPress mediante herramientas especializadas como:
- Squoosh.
- TinyPNG / TinyJPG.
- Compressor.io.
- Software de edición que permita controlar formato, dimensiones y nivel de compresión.
El procedimiento general es sencillo:
- Abre la imagen en la herramienta elegida.
- Selecciona el formato apropiado.
- Ajusta dimensiones y compresión.
- Compara visualmente el original con el archivo optimizado.
- Guarda la versión final y súbela a WordPress.
Optimización dentro de WordPress
Si administras muchas imágenes o varios autores suben archivos al sitio, puede resultar útil automatizar parte del proceso mediante un plugin especializado.
Entre las soluciones conocidas se encuentran Smush, ShortPixel y EWWW Image Optimizer. Sus funciones y límites pueden variar según la versión y el plan utilizado.
Al configurar una herramienta de este tipo, revisa especialmente las opciones relacionadas con:
- Compresión automática de nuevas imágenes.
- Redimensionamiento de archivos excesivamente grandes.
- Generación o entrega de formatos modernos como WebP o AVIF, cuando esté disponible.
- Optimización de imágenes existentes.
- Conservación o eliminación de los archivos originales.
Antes de ejecutar una optimización masiva, realiza una copia de seguridad y comprueba qué hará exactamente el plugin con los originales. No ejecutes operaciones irreversibles sobre toda la biblioteca sin haber probado primero una muestra pequeña.
Paso 4 — Aprovechar las imágenes responsive de WordPress
Cuando subes una imagen, WordPress puede generar automáticamente diferentes tamaños derivados según la configuración del sitio, el tema y los tamaños registrados.
Además, WordPress utiliza atributos como srcset y sizes para ayudar al navegador a seleccionar una versión apropiada de la imagen según el espacio disponible y las características del dispositivo.
Por este motivo:
- Inserta las imágenes mediante las funciones normales de WordPress siempre que sea posible.
- Evita reemplazar innecesariamente el marcado responsive generado por WordPress.
- Comprueba que el tema no esté solicitando imágenes mucho mayores de lo necesario.
- Evita crear manualmente decenas de copias de una misma imagen si WordPress ya genera los tamaños que necesita el diseño.
Optimizar el archivo original y permitir que WordPress gestione correctamente sus tamaños derivados suele ser más mantenible que crear manualmente múltiples archivos para cada dispositivo.
Paso 5 — Utilizar correctamente Lazy Loading
La carga diferida o lazy loading permite retrasar determinadas imágenes que inicialmente se encuentran fuera del área visible de la página hasta que el navegador considere necesario cargarlas.
Las versiones modernas de WordPress incorporan soporte nativo para el atributo loading="lazy" en imágenes apropiadas, por lo que normalmente no necesitas activar manualmente una opción general desde Ajustes → Medios.
Sin embargo, no todas las imágenes deben cargarse de forma diferida.
- Las imágenes situadas inicialmente fuera de pantalla son buenas candidatas para lazy loading.
- Las imágenes importantes visibles inmediatamente al cargar la página deben tratarse con mayor cuidado.
- La imagen principal que determina el Largest Contentful Paint (LCP) no debería retrasarse innecesariamente mediante lazy loading.
Aplicar lazy loading indiscriminadamente a todas las imágenes puede ser contraproducente. La prioridad debe ser cargar rápidamente el contenido visual que el visitante necesita ver primero y diferir lo que inicialmente está fuera de pantalla.
Paso 6 — Optimizar nombres y texto alternativo
El nombre del archivo y el texto alternativo no sustituyen la optimización del peso, pero contribuyen a una biblioteca más ordenada y, especialmente en el caso del atributo alt, a la accesibilidad del contenido.
Nombres de archivo
Utiliza nombres descriptivos cuando resulte práctico:
optimizar-imagenes-wordpress.webp
En lugar de nombres poco informativos como:
IMG_8901.webp
Texto alternativo
El texto alternativo debe describir de manera útil la imagen cuando esta transmite información relevante.
- Describe brevemente el contenido o propósito de la imagen.
- No rellenes el atributo con palabras clave únicamente por motivos SEO.
- Evita repetir información innecesariamente.
- Si una imagen es puramente decorativa, su tratamiento de accesibilidad puede ser diferente al de una imagen informativa.
El texto alternativo existe principalmente para comunicar el propósito o contenido relevante de una imagen cuando esta no puede percibirse visualmente. Escríbelo pensando primero en la persona que necesita esa información.
Paso 7 — Verificar el resultado
No des por terminada una optimización únicamente porque los archivos ahora pesan menos. Comprueba el resultado en el sitio publicado.
- Abre una página representativa de tu sitio.
- Analízala con una herramienta de rendimiento como PageSpeed Insights o GTmetrix.
- Revisa las recomendaciones relacionadas con imágenes, dimensiones y formatos.
- Comprueba visualmente el sitio tanto en computadora como en dispositivos móviles.
- Verifica que las imágenes mantengan suficiente calidad.
- Comprueba que no existan imágenes rotas después de conversiones u optimizaciones masivas.
- Compara las métricas obtenidas antes y después de los cambios cuando dispongas de una medición inicial.
La mejora obtenida dependerá del estado inicial del sitio. Una página con imágenes originales muy pesadas puede experimentar una reducción considerable, mientras que un sitio previamente optimizado puede mostrar cambios mucho menores.
No persigas únicamente una puntuación. El objetivo real es reducir transferencias innecesarias, mantener una buena calidad visual y mejorar la experiencia de carga para los visitantes.
Resumen de buenas prácticas
- Selecciona el formato adecuado para cada tipo de imagen.
- Utiliza WebP o formatos modernos cuando aporten una ventaja real y sean compatibles con tu flujo de trabajo.
- Evita subir imágenes con dimensiones muy superiores a las necesarias.
- Comprime las imágenes manteniendo una calidad visual apropiada.
- Realiza una copia de seguridad antes de optimizar masivamente una biblioteca existente.
- Aprovecha los tamaños responsive generados por WordPress.
- Utiliza lazy loading para imágenes apropiadas, pero evita retrasar recursos visuales críticos.
- Escribe textos alternativos útiles y orientados a la accesibilidad.
- Comprueba el resultado real después de cada cambio importante.
Fuentes y documentación de referencia
- Hosting Barato Online — Alojamiento web y rendimiento.
- WPBeginner — Optimización de imágenes en WordPress.
- Google Developers — Optimización de imágenes.
- Kinsta — Optimización de imágenes para la web.
- GTmetrix — Optimización y rendimiento de imágenes.