5 pasos para optimizar imagenes para WordPress

Si al calcular la velocidad de tu sitio web en pageinsights te encuentras con un rendimiento bajo, probablemente no sea precisamente una buena noticia. Una web lenta afecta a la experiencia del usuario y puede hacer que alguien abandone tu página antes incluso de llegar a ver tu contenido. Y aunque existen muchas razones por las que una web puede cargar lentamente, hay una especialmente habitual: las imágenes. Subir imágenes demasiado grandes, pesadas o sin optimizar puede aumentar considerablemente el tiempo de carga de una página. Por eso, antes de subir una imagen a WordPress, conviene prepararla correctamente.

Mejorar rendimiento web

¿Por qué las imágenes pueden ralentizar WordPress?

Imagina que tienes una imagen perfecta para tu web: bonita, con buena calidad y exactamente lo que necesitas. El problema es que pesa 4 MB y tiene unas dimensiones de 5.000 × 3.000 píxeles. Probablemente tu web no necesite una imagen de ese tamaño. Cada vez que alguien visite la página, su navegador tendrá que descargar ese archivo. Si además tienes varias imágenes similares, el peso total de la página puede aumentar rápidamente. Por eso hay tres cosas que deberíamos revisar antes de subir una imagen a WordPress:

Redimensionar → Comprimir → Convertir a WebP

Vamos a verlo paso a paso, pero antes te preguntaras que es esto de WebP…

¿Qué es WebP?

Antes de empezar, seguramente hayas escuchado hablar de WebP. WebP es un formato de imagen moderno desarrollado por Google que permite reducir el tamaño de los archivos manteniendo una buena calidad visual. Esto significa que podemos conseguir imágenes considerablemente más ligeras que utilizando formatos tradicionales como JPG o PNG. Pero convertir una imagen a WebP no significa que automáticamente esté optimizada. Todavía tendremos que revisar su tamaño y compresión.

Ahora si, al paso a paso!

Paso 1: descarga o prepara tu imagen

Lo primero es tener la imagen que quieres utilizar en tu ordenador. Puede ser una fotografía propia, una imagen de un banco de imágenes o cualquier recurso gráfico que hayas preparado para tu web. Antes de subirla directamente a WordPress, vamos a optimizarla.

Paso 2: redimensiona la imagen

El siguiente paso es ajustar las dimensiones. Puedes hacerlo con herramientas como iLoveIMG. Dentro de la herramienta, entra en la opción Redimensionar imagen y carga el archivo. Aquí hay algo importante: no necesitamos utilizar una imagen mucho más grande que el espacio en el que se va a mostrar. Por ejemplo, si una imagen se va a mostrar aproximadamente a 1.200 píxeles de ancho, normalmente no tiene demasiado sentido subir una imagen de 5.000 píxeles. Eso sí, tampoco debemos pasarnos reduciendo el tamaño. Queremos una imagen ligera, pero también queremos que se vea correctamente en pantallas grandes. Deja activada la opción “Mantener relación de aspecto” para evitar que la imagen se deforme. Y por ultimo pulsa en el boton de “Redimensionar imagen” y descarga el archivo resultante.

Como mejorar la velocidad de mi web

Paso 3: comprime la imagen

Ahora vamos a reducir todavía más su peso. En iLoveIMG encontrarás también la herramienta Comprimir imagen. Carga la imagen que has redimensionado en el paso anterior y pulsa “Comprimir imagen”. Cuando termine el proceso, descarga nuevamente el archivo. Pero no te quedes únicamente con el número de kilobytes. Abre la imagen y comprueba que sigue viéndose correctamente. La idea es encontrar un equilibrio entre peso y calidad. Queremos reducir el archivo todo lo posible sin que aparezcan artefactos, pérdida excesiva de detalle o esos maravillosos píxeles gigantes que nadie quiere encontrarse en una web.

Comprimir imagen para sitio web

 

Paso 4: convierte la imagen a WebP

Si la imagen todavía está en JPG o PNG, hay que convertirla a WebP. Existen muchas herramientas gratuitas para hacerlo. Algunas de las que utilizamos habitualmente en Rompiente Studio son:

El funcionamiento es prácticamente el mismo en todas. Subes la imagen, seleccionas WebP como formato de salida y realizas la conversión. Después descargas el nuevo archivo.

Ahora deberías tener una imagen con unas dimensiones razonables, comprimida y en un formato mucho más eficiente para utilizar en la web.

Mejorar velocidad de web

Paso 5: comprueba el peso final

Antes de subirla a WordPress, revisa cuánto pesa. No existe un peso perfecto para todas las imágenes.

Una pequeña imagen de una card no debería pesar lo mismo que una fotografía grande utilizada como imagen principal de una página. Como referencia, cuanto menor sea el archivo sin perder calidad perceptible, mejor.

Si hemos hecho correctamente los pasos anteriores, normalmente veremos una reducción importante respecto a la imagen original.

Y ahora sí podemos subirla a WordPress.

¿Es esta la única forma de optimizar imágenes en WordPress?

No. Este proceso es simplemente una forma manual de entender qué ocurre con las imágenes antes de subirlas a una web. También existen otras herramientas que permiten automatizar gran parte del proceso. Por ejemplo, podemos utilizar plugins de WordPress como CompressX, que permiten comprimir imágenes y generar versiones WebP directamente desde WordPress. También existen herramientas basadas en inteligencia artificial que pueden ayudarnos a redimensionar, convertir o preparar imágenes antes de utilizarlas. Veremos estas alternativas con más detalle en otros artículos que iremos escribiendo más adelante.

Lo importante es comprender algo muy sencillo:

No deberíamos subir a WordPress cualquier imagen directamente desde nuestro ordenador sin revisar primero su tamaño y peso. Si quieres quedarte con una sola idea de este artículo, que sea esta:

Redimensionar → Comprimir → Convertir a WebP

Tres pasos muy sencillos que pueden reducir considerablemente el peso de las imágenes y ayudarnos a mejorar la velocidad de carga de nuestra web.

 

¿Necesitas apoyo en tu sitio web?

Desarrollamos web en WordPress profesionales totalmente optimizada para tu negocio o tu profesión.