Optimizar Imágenes en WordPress

Home   /   Optimizar Imágenes en WordPress

Optimizar las imágenes de WordPress es muy importante

Si tus imágenes no están optimizadas y pesan más de por ejemplo 150Kb, te avanzo que tus usuarios no visitan tu página web si no que la sufren, sobretodo si la visitan desde un móvil. Piensa en la velocidad de internet en un móvil, y ahora piensa en descargar una imagen de 1Mb.

Cuando hablamos de optimizar imágenes aquí simplemente me refiero al peso en Kb o Mb de las imágenes, nada de ALTs, captions o titles. Eso es para otro artículo y no afecta en absoluto a la velocidad. Optimizar imágenes puede resultar en un aumento significativo de la velocidad, sobretodo si usas cantidad de imágenes en tu página web.

Por supuesto, el tamaño de imágenes también afecta mucho al rendimiento de WooCommerce, cada producto está relacionado con unas cuantas imágenes, y mejor que tengas unos cuantos productos. Ya que woocommerce es un plugin de WordPress, la optimización de imágenes también vale para sitios web con Woocommerce.

En este artículo diferenciaremos entre peso y tamaño. El peso se mide en Kb o Mb, el tamaño en píxeles de ancho x píxeles de alto.

Qué tener en cuenta para optimizar imágenes en WordPress

  • Dónde se usa cada imagen
  • Peso en Kb o Mb de la imagen

El primer punto es de sentido común, no uses una imagen de 2000x2000px para un elemento que se mostrará en 150×150 por ejemplo.
El segundo punto realmente es el importante, porque si estás usando una imagen de 2000×2000 pero pesa 50Kb, está todo bien, no es lo ideal, ya que al final resulta en una imagen de 150×150 pero cómo pesa poco, la velocidad de carga será buena.

Cómo optimizar el peso de la imagen en Wp

Hay que reducir su peso. Deberías tratar de usar imágenes que siempre estén por debajo de los 200Kb o 150Kb o cuanto menos mejor. No importa si tu imagen es 2000×2000 pero pesa 50Kb. Todo ok con los 50Kb. Si estás usando imágenes de 1Mb corre a solucionarlo!

Hay varios servicios para comprimir imágenes wordpress, prueba kraken.io pero la verdad que si puedes usar una aplicación cómo Photoshop, mejor que mejor.

La mayoria de servicios o plugins lo único que hacen es comprimir las imágenes pero no cambian su tamaño.

Entonces para optimizar las imágenes:

  1. Descarga las imágenes más pesadas de tu WordPress
  2. Ábrelas desde photoshop y ajusta el tamaño, si puede ser que sea exactamente igual que el del elemento html que mostrará la imagen
  3. Guarda la imagen en PNG si necesitas fondo transparente o JPEG
  4. Si usas JPEG, puedes bajar la calidad para que pese menos. Añade filtro de desenfocado para que no se vean los píxels.

Por ahora no he encontrado forma automática de realizar estos cambios de tamaño. Lo ideal sería cambiar tamaño y luego comprimir las imágenes con servicios o aplicaciones que puedas bajarte.

Otra opción que puede servirte para comprimir imágenes y reducir peso es Kraken.io pero como te decía, nada reduce más el peso que ajustar el tamaño (ancho y alto en píxeles) de la imagen original.

Plugins para optimizar imágenes en WordPress

  • Instala el plugin Smush: lo malo es que hay que hacerlo por lotes si no tienes la versión Premium. No es que me encante este plugin pero es el único que va archivo por archivo optimizando y comprimiendo.

Estoy desarrollando un plugin para hacer esto mucho más fácil. Pronto más información.

Formato webp

El formato de última generación webp lo desconozco un poco, a Google parece gustarle, pero no he podido comprobar su mejora usando PNG/JPG frente a Webp. Además no todos los navegadores lo soportan así que prefiero las soluciones que valen para todos los dispositivos, navegadores y páginas. Por ahora no le daría más importancia. Si has usado este formato, por favor deja un comentario con tu opinión.

Pospón la carga de imágenes que no aparecen en pantalla

Una vez todos los archivos de imágenes han sido optimizados, podrías instalar el plugin a3 Lazy load para que no se carguen las imágenes hasta que el visitante no haya hecho scroll hasta su posición.

Optimizar Videos

Cuantos menos videos mejor : ) Cualquier recomendación para optimizar vídeos en los comentarios será más que bienvenida.

Resumen para optimizar imágenes:

  1. Empieza por las imágenes más pesadas de tu página web, continua con las siguientes.
  2. Reduce su tamaño (alto y ancho) manualmente (por ahora)
  3. Comprime las imágenes con servicios externos, aplicaciones para windows, mac o linux, o simplemente usando el plugin smush.

Si estábas usando imágenes de más de 200Kb, con este cambio ya verás una mejora brutal, sobretodo visitando tu página desde un móvil.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Optimizando WP

Optimizando WP es una guía para optimizar y acelerar la velocidad de carga de tu página web WordPress en constante construcción.

Autor: @betoayesa
Última actualización: 13/04/2020

Si necesitas ayuda contacta con PhpNinja

Cualquier duda, escribe en los comentarios, trataremos de responder rapidamente.