Las imágenes son elementos esenciales en cualquier sitio web de WordPress, ya que pueden atraer a los visitantes y mejorar la experiencia del usuario. Sin embargo, las imágenes no optimizadas pueden ralentizar tu sitio web y afectar negativamente tu clasificación en los motores de búsqueda.
Recuerda que:
- Un tiempo aceptable de carga de una página web es de 2 – 3 segundos.
- El peso de una imagen normal no debería ser mayor a 100 kilobytes.
Teniendo en cuenta estas pautas en este artículo te mostrare 4 formas de como optimizar imágenes en WordPress, las cuales son:
Puedes utilizarlos todos o los que mas te convenzan.
Elige el formato adecuado para tus imágenes
El primer paso para optimizar imágenes es seleccionar el formato adecuado. Los formatos más comunes para las imágenes en la web son JPEG, PNG y GIF. A continuación, te indicamos cuándo utilizar cada uno:
- JPEG: Utiliza JPEG para fotografías rectangulares. JPEG a comparación de PNG tiene mejor compresión, por lo que si tu imagen no tiene transparencia (es rectangular) utilízalo sin lugar a dudas.
- PNG: Los PNG son ideales para imágenes con transparencia. Los archivos PNG a comparación que los JPEG, ofrecen una calidad superior sin embargo tienen un peso mayor.
- GIF: Utiliza GIF para imágenes animadas o gráficos simples con áreas de color sólido. Los GIF tienen un tamaño de archivo pequeño, pero su paleta de colores es limitada.
- WEBP: El formato ofrecido por Google y que es ideal tanto para imágenes con transparencia e incluso animadas pudiendo sustituir a las 3 anteriores ya que generalmente tiene menor peso.
Utiliza el tamaño adecuado en tus imágenes
Antes de subir las imágenes a WordPress, asegúrate de redimensionarlas al tamaño adecuado. No subas imágenes más grandes de lo necesario, ya que esto solo ralentizará tu sitio web.
¿Cómo saber que tamaño de imagen necesito?
Para esto necesitamos conocer el propósito de la imagen. Por ejemplo si la imagen es un fondo de pantalla, necesitaremos una imagen de gran tamaño y buena calidad, de lo contrario se vera pixelada, igualmente si es una imagen ampliable deberemos usar una imagen de gran tamaño. Ejemplo:
En caso tu imagen sea solo informativa y no ocupe toda la pantalla debes calcular que tamaño ocupara tu imagen en pantalla.
Para esto usaremos la consola del navegador, presionaremos F12 para abrirla.
Se recomienda tener la consola en el formato ventana emergente. Para esto haremos click en la parte derecha y haremos click en el botón forma de ventana emergente.
Una vez hecho esto haremos click en la herramienta seleccionadora de la consola, luego posaremos el mouse sobre la sección en la que ira tu imagen.
Observaremos el recuadro de información de la sección. Ahí veremos el ancho y alto.
Se recomienda que las imágenes tengan como máximo un ancho ligeramente mayor al ancho de su contenedor, en mi caso 750 pixeles. Ejemplo:
Esta imagen tiene un ancho de 750 pixeles y pesa 35.3 Kilobytes a comparación de la versión ampliable de mas arriba que pesa 3110 Kilobytes.
Si por ejemplo, tu imagen ocupa solo la mitad de su contenedor el ancho de tu imagen debería ser la mitad del ancho total, en mi caso 375 pixeles.
Muchas veces, utilizamos imágenes de mas de 1600 pixeles de ancho, cuando solo se necesita una imagen mucho mas pequeña.
Por ejemplo:
Aquí vemos dos imágenes, a la izquierda con un tamaño de 1316 x 1335 pixeles, a la derecha con un tamaño de 373 x 379 pixeles.
Se pueden notar diferencias entra las dos imágenes por que una esta al costado de otra, pero para un usuario común que visita tu sitio y solo vea imágenes optimizadas no lo notaria.
Quienes si notan la diferencia son Google y el navegador debido a la diferencia de pesos ya que la imagen mas grande pesa 1340 kilobytes a comparación de la mas pequeña que solo pesa 123 kilobytes, una diferencia de 10 a 1.
Ahora imagina que tu página tiene 10 imágenes como la primera. El peso solamente en imágenes seria de 13400 Kilobytes (13.4 Megabytes), al contrario de si fueran 10 imágenes como la segunda, lo cual seria como cargar una sola vez la primera imagen.
Esta diferencia repercute en la velocidad de carga por lo tanto también en el posicionamiento SEO.
Puedes descargar las dos imágenes para comprobar su tamaño en tu computadora o examinarlas con la consola del navegador.
¿Cómo redimensiono mis imágenes?
Puedes utilizar una herramienta online llamada IloveIMG, simplemente subes tu imagen e indicas la cantidad de pixeles para redimensionar.
Recomiendo utilizar esta herramienta para reducir el tamaño de las imágenes, mas no para agrandarlas.
O también puedes usar herramientas de edición de imágenes como Figma, Adobe Photoshop, etc.
Optimizar el peso de las imágenes antes de subirlas a WordPress
Si a pesar de haber redimensionado tus imágenes no llegas al peso recomendado de 100 kilobytes como máximo puedes utilizar tinyJPG, una herramienta online gratuita para optimizar imágenes sin reducir tamaño ni calidad.
Para usarla simplemente arrastra tus imágenes a ella, esta las optimizara y podrás descargar la versión ligera de tu imagen.
Aquí un ejemplo de dos imágenes del mismo tamaño, pero la segunda optimizada por tinyJPG.
La primera tiene un peso de 548 Kilobytes, la segunda un peso de 100 kilobytes, ¿notas alguna diferencia?
Convierte tus imágenes a formato Webp
El formato .webp es un formato de imágenes introducido por Google con el objetivo de poder usar imágenes de gran calidad con un tamaño de archivo muy inferior comparado con otros formatos como el jpg o el png. Es compatible con varios navegadores como Chrome, Edge, Firefox entre otras, a excepción del Internet Explorer y Safari de Apple por el momento.
Es un formato recomendado por Google, lo cual utilizarlo te ayudara en tu posicionamiento SEO.
¿Cómo utilizar el formato webp en WordPress?
Por el hecho que no todos los navegadores son compatibles con el formato webp lo mejor es utilizar un plugin que convierta tus imágenes y las muestre solo en los navegadores compatibles de forma automática.
Existen diferentes plugins para este propósito. Pero en este caso utilizare EWWW Image Optimizer el cual a diferencia de otros a día de hoy nos permite optimizar y convertir las imágenes de forma gratuita e ilimitada.
Una vez instalado y activo el plugin, iremos a la configuración de este. Nos aparecerá un tutorial de bienvenida. Daremos clic en la opción «Se lo que estoy haciendo»
Configuraremos el plugin de la siguiente forma.
- Activar la conversión en webp.
- Insertar las reglas de escritura.
- Reescribir picture Webp.
Y guardamos los cambios.
Vamos al apartado de Medios > Optimización en lotes en el menú de WordPress.
Marcamos la opción de solo convertir a webp y damos clic al botón buscar imágenes sin optimizar.
Una vez encuentre todas las imágenes sin optimizar damos clic en optimizar imágenes.
Puedes descargar una imagen de tu sitio y verificar que se descargue en formato .webp para comprobar el cambio.
Recuerda que esto se ve en navegadores compatibles como Chrome, Firefox, Brave, Edge y demás.
Utiliza la carga diferida de imágenes.
En caso de haber realizado todo esto y ves que el tiempo de carga sobrepasa los 4 segundos un posible motivo es que tengas muchas imágenes en tu página. Para solucionar esto podemos utilizar la carga diferida, la cual consiste en cargar solo las imágenes que el usuario necesita al cargar la página, luego el resto de imágenes se van cargando mientras el usuario hace scroll por la página.
Si descargaste Ewww Image Optimizer puedes activar la opción de carga diferida en las configuraciones del plugin, pero si buscas un plugin que haga esto de manera exclusiva puedes utiliza Smush. primero la instalaremos desde el repositorio de WordPress y la activaremos.
Una vez listo el plugin iremos a «Smush > Escritorio»
Si es la primera vez que lo instalas, te aparecerá un tutorial de bienvenida, damos click en «Empezar configuración»
En caso no hayas comprimido tus imágenes previamente con tinyJPG o algún otro plugin recomiendo desactivar esta opción.
Igualmente desactiva esta opción en caso no hayas optimizado tus imágenes previamente.
Recomiendo dejar activada esta opción para eliminar datos como ubicación, fecha, etc en fotos.
Este es la función que necesitamos, dejamos activa la opción de Carga diferida.
Y listo, puedes probar la velocidad de carga de tu sitio la cual te aseguro ha mejorado. Puedes utilizar gtmetrix o pageSpeedInsights para hacerlo:
Conclusión
La optimización de imágenes es esencial para cualquier sitio web de WordPress. No solo mejora la velocidad de carga, sino que también beneficia tu SEO y la experiencia del usuario. Siguiendo estos consejos y utilizando las herramientas adecuadas, puedes asegurarte de que las imágenes en tu sitio web sean un activo en lugar de un obstáculo. ¡Optimiza tus imágenes y mejora tu presencia en línea!
