Imágenes optimizadas para WordPress: compresión, carga retardada

Las imágenes son una parte importante del contenido de un sitio web, pero también son el "asesino número uno" que ralentiza la velocidad: una imagen de alta resolución no optimizada (por ejemplo, de 5 MB) puede hacer que el tiempo de carga de la página aumente entre 3 y 5 segundos, lo que directamente hará que el usuario pierda la paciencia. Lo bueno es que la optimización de imágenes es sencilla, a través de los dos medios básicos de "tamaño comprimido" y "carga retardada", se puede reducir el tiempo de carga de las imágenes por encima de 50%. En esta sección, utilizaremos el plugin para lograr una optimización totalmente automática, que puede ser manejada por novatos sin ningún conocimiento técnico.

¿Por qué hay que optimizar las imágenes? 3 datos sólidos

• Las imágenes suelen representar el 60%-80% del volumen total de carga de un sitio web (mucho más que otros contenidos como el texto y el código).
• Por cada segundo que aumenta el tiempo de carga, la tasa de rotación de usuarios se incrementa en 20% (especialmente los usuarios móviles son más sensibles a la velocidad).
• Las imágenes no optimizadas pueden reducir directamente la puntuación de Google PageSpeed (lo que afecta a la clasificación SEO).

objetivo central: Comprime el tamaño de la imagen 50%-80% sin pérdida apreciable de calidad de imagen, y permite que las imágenes que no son de primera pantalla "se carguen bajo demanda".

II. Método 1: Compresión de imágenes (reducción automática del volumen con plug-ins)

El principio de la compresión de imágenes es eliminar los datos redundantes (por ejemplo, información sobre el dispositivo de disparo, detalles de píxeles no mostrados) manteniendo la calidad de la imagen básicamente inalterada a simple vista. Recomendamos el complemento "Smush" para la compresión totalmente automática, que admite el procesamiento por lotes de las imágenes existentes y la compresión automática de las imágenes recién cargadas.

Paso 1: Instalar y activar el plugin Smush

1. Inicie sesión en el backend de WordPress y vaya a "Plugins → Instalar plugin".
2. Busque "Smush", encuentre el complemento etiquetado como "Desarrollado por WPMU DEV" y haga clic en "Instalar" → "Activar".

Paso 2: Configurar la compresión automática (no es necesario el tratamiento manual de las nuevas imágenes)

Después de la activación, el plugin saltará automáticamente a la página de configuración, configúrelo de la siguiente manera:

1. Activar la compresión automáticaEn la pestaña "Ajustes", asegúrate de que la opción "Comprimir automáticamente las nuevas imágenes cargadas" está marcada (está marcada por defecto), para que las futuras cargas se compriman automáticamente sin necesidad de hacerlo manualmente.
2. Selecciona el modo de compresión：
   • La "compresión sin pérdidas" (opción por defecto) se recomienda a los principiantes: sólo se eliminan los datos redundantes, sin pérdida de calidad de imagen, con una tasa de compresión de aproximadamente 30%-50%.
   • Si buscas una mayor tasa de compresión (por ejemplo, si el tamaño de la imagen sigue siendo demasiado grande), puedes elegir "Compresión con pérdidas": una ligera pérdida de calidad de imagen (apenas perceptible a simple vista), con una tasa de compresión de hasta 60%-80% (es necesario activarla haciendo clic en "Configuración avanzada").
3. Guardar ajustesHaga clic en "Guardar configuración" en la parte inferior de la página.

Paso 3: Compresión por lotes de las imágenes existentes (una operación, optimización en toda la red)

Si el sitio web ya tiene un gran número de imágenes sin comprimir (por ejemplo, imágenes de artículos cargados anteriormente), utilice la función "Compresión por lotes" para optimizarlas en un solo clic:

1. En la página del plugin Smush, haga clic en la pestaña "Batch Smush" de la izquierda.
2. Haz clic en "Empezar ahora" y el plugin escaneará automáticamente todas las imágenes de tu biblioteca multimedia.
3. Después de escanear, haga clic en "Aplicar Smush a XX imágenes", el sistema comprimirá por lotes (el proceso puede tardar unos minutos, no es necesario esperar, puede ejecutarse en segundo plano).
4. Ver resultados de compresiónUna vez finalizada la compresión, se mostrará "Espacio total ahorrado" (por ejemplo, "12MB guardados") y se mostrará la comparación de volumen de cada imagen antes y después de la compresión.

Método 2: Carga diferida (dejar que las imágenes "se carguen a petición")

El principio de Lazy Load es:La imagen sólo empezará a cargarse cuando el usuario se desplace hasta la posición de la imagenDe esta forma, la primera pantalla (la primera zona que se ve al abrir la página) se cargará primero. De este modo, las imágenes de la primera pantalla (la primera zona que se ve al abrir la página) se cargarán en primer lugar, y las imágenes que no sean de la primera pantalla (como las imágenes del artículo siguiente y las imágenes de pie de página) no se cargarán por el momento, lo que reduce significativamente el tiempo de carga inicial.

Habilite la carga diferida en un solo clic con el plugin Smush (no se necesitan plugins adicionales)

Smush ha incorporado la carga retardada, sin necesidad de instalar un plugin separado con pasos de configuración:

1. En la página del plugin Smush, haga clic en la pestaña "Carga diferida" de la izquierda.
2. Marque "Activar carga retardada" y configúrelo como se recomienda a continuación:
   • "Tipo de imagen de carga retardada": Seleccione todas (imagen, avatar, miniatura, etc.).
   • "Excluir imágenes de primera pantalla": se recomienda marcar (las imágenes de primera pantalla no se retrasan para garantizar que los usuarios puedan ver rápidamente el contenido principal cuando abren la página).
   • "Animación de carga": Déjelo por defecto (muestra una ligera animación para avisar a los usuarios de que la imagen se está cargando).
3. Haz clic en "Guardar configuración" y la carga retardada surtirá efecto inmediatamente.

Compruebe que la carga diferida está activada

1. Abra la página de cualquier artículo del sitio web (que contenga varias imágenes) y pulse F12 para abrir el navegador "Herramientas para desarrolladores".
2. Haz clic en la pestaña "Web" para actualizar la página y ver cómo se carga la imagen:
   • Cuando se carga inicialmente, sólo se muestra la primera imagen de la pantalla en la lista "Red".
   • Desplácese por la página, los registros de carga de estas imágenes aparecerán en la lista "Red" sólo cuando aparezcan las imágenes que no están en primera pantalla, lo que indica que la carga diferida está en vigor.

cuatro. consejos adicionales sobre optimización de imágenes que los novatos deben conocer

1. Elegir el formato de imagen adecuado (más básico que la compresión)

Elegir el formato adecuado antes de subir una imagen puede reducir el tamaño en origen:

• Fotografías / Imágenes complejasCon el formato WebP (30%-50% más pequeño que JPG y con mejor calidad de imagen), el plugin Smush puede convertir automáticamente JPG/PNG a WebP (active la opción "Convertir automáticamente a WebP" en "Configuración avanzada").
• Gráficos / iconos sencillos: Utilice el formato PNG (admite fondo transparente, tamaño pequeño), evite JPG.
• Nunca utilice el formato BMP, TIFFEstos formatos son enormes y no son adecuados para su uso en Internet.

2. Controla el tamaño de las imágenes (no utilices "visualización de imágenes grandes encogidas")

Muchos novatos suben directamente una imagen de alta resolución (por ejemplo, 3000×2000 píxeles) tomada con su cámara y la configuran para que se muestre como 300×200 píxeles a través de WordPress, ¡pero esto es un error! Porque el navegador seguirá cargando la imagen original de gran tamaño, desperdiciando ancho de banda y tiempo.

enfoque correcto：

• Antes de cargarla, utilice herramientas de imagen (por ejemplo, "Paint" o "Canva") para recortar el tamaño de la imagen al tamaño real de visualización (por ejemplo, 1200 píxeles de ancho para el banner de la primera pantalla).
• Si no sabes utilizar herramientas de imagen, puedes instalar el plugin "Imsanity" para comprimir automáticamente las imágenes subidas de gran tamaño a un tamaño especificado (por ejemplo, anchura máxima de 1200 píxeles).

3. Evite el uso indebido de imágenes (más no es mejor)

• No utilice imágenes para lo que pueda explicar con palabras (por ejemplo, instrucciones sencillas paso a paso).
• Se pueden fusionar varias imágenes consecutivas en una imagen giratoria (por ejemplo, la visualización de un producto) para reducir el número de imágenes cargadas al mismo tiempo.

V. Resolución de problemas comunes

1. ¿La calidad de la imagen empeora significativamente tras la compresión?

• Si utiliza "Lossy Compression", puede reducir la intensidad de compresión en los ajustes de Smush ("Ajustes avanzados" → "Intensidad de compresión" a 50%).
• Se recomienda utilizar "Compresión sin pérdidas" + "Formato WebP" para equilibrar el tamaño y la calidad.

2. ¿El retraso en la carga provoca una visualización anormal de las imágenes (por ejemplo, en blanco, desalineadas)?

• Compruebe que se ha excluido la primera imagen de la pantalla (si no se excluye puede producirse un retraso en la carga de la primera imagen de la pantalla y un breve espacio en blanco).
• Si algunas imágenes deben cargarse inmediatamente, puede introducir el nombre de la clase CSS de la imagen en la casilla "Excluir" de la configuración "Carga diferida" de Smush (se requieren simples conocimientos de código, los novatos pueden desactivar temporalmente la carga diferida en la página donde se encuentra la imagen).

3. ¿No se ha producido un aumento significativo de la velocidad tras la optimización?

• Vuelva a realizar la prueba con GTmetrix (consulte Herramientas para comprobar la velocidad del sitio web), compruebe el "Gráfico de cascada" para confirmar si se reduce el tiempo de carga de la imagen.
• Si sigue siendo lento, puede deberse a otros factores (por ejemplo, una respuesta lenta del servidor, demasiados plug-ins), y debe combinarse con métodos de optimización posteriores (por ejemplo, activando el almacenamiento en caché).

corto

La optimización de imágenes es la operación con mayor ROI en la optimización de la velocidad del sitio - con el plugin Smush, se tarda 10 minutos en configurarlo, y puedes reducir el tiempo de carga de imágenes en más de 50%. Los pasos básicos son: instalar Smush → activar la autocompresión y la compresión por lotes → activar la carga retardada (excluir las imágenes de la primera pantalla).

Recuerde que el principio de la optimización de imágenes es "lo justo": no tiene que perseguir la máxima tasa de compresión ni cargar imágenes de ultra alta definición, lo mejor es encontrar un equilibrio entre calidad de imagen y velocidad, para que los usuarios puedan ver el contenido y cargarlo rápidamente al mismo tiempo.