Optimizar imágenes en wordpress

Después del anuncio de Google sobre el update que se viene para mayo de 2021, denominado Core Web Vitals, cobra mas importancia aún el hecho de optimizar o mejorar el rendimiento de nuestras paginas web, y uno de los pasos mas importantes es optimizar correctamente las imágenes en WordPress o en la plataforma que usemos.

Os voy a mostrar como optimizar imágenes en WordPress, al menos como lo hago yo, de varias formas posible. Este sistema sirve para optimizar imágenes para web y mejorar el SEO, para cualquier plataforma web o cms que usemos, como WordPress, Htm, etc.

El hecho de optimizar una imagen, nos vendrá bien de cara al SEO para cualquier plataforma que usemos, ya sea WordPress, Joomla, Prestashop, Shopify, Html, etc. La imagen optimizada la podremos usar en cualquier que sea el sistema que utiliza nuestra web.

¿Qué es optimizar una imagen para web?

• Optimizar una imagen para una web significa, ajustar el tamaño y el peso de una imagen para adecuarla en tamaño y que pese lo necesario para que cargue lo mas rápidamente posible, con ello conseguimos que nuestra web se muestre mas rápidamente por lo que será mejor de cara al SEO, y como no! de cara al Core Web Vitals que se aproxima.
• Teniendo en cuenta que actualmente predomina la versión movil, yo estoy optando por optimizar las imágenes con un ancho máximo entre los 600px y los 800px, medidas suficientes para ver las imágenes correctamente en pc y sobradamente en movil.

Como optimizar una imagen para web con Photoshop

• Para mí, si sabemos usar medianamente Photoshop, creo que es la mejor forma de optimizar imágenes para webs. Si no saben, no se preocupen, les mostraré a continuación los aspectos básico para optimizar imágenes con Photoshop.

Una vez que tenemos la imagen abierta en Photoshop, vamos a ajustar las medidas o tamaño, para ello vamos al menú Imagen y ahí dentro en Tamaño de imagen, nos saldrá un menú como el de la imagen inferior, donde tan solo tendrán que poner el ancho que quieran.

Una vez con el tamaño de imagen ajustado, vamos a guardar la imagen optimizándola para que ocupe el menor peso posible, para ello tan solo tenemos que ir al menú Archivo y dentro de este, Guardar para Web, se nos abrirá una ventana como la de la imagen inferior.

¿Qué debemos tener en cuenta?. Que estamos previsualizando la imagen al tamaño 100%, que estamos viendo la pestaña Optimizado (Ahí se muestra como se guardará la imagen realmente), el tipo de formato de imagen (Jpeg, Png, etc.), y finalmente el peso que tendrá nuestra imagen final optimizada. Con todo ajustado, tan solo tendremos que pulsar sobre Guardar.

Podemos ir jugando con la optimización de la imagen, cuando se trate de imágenes de personas, normalmente el formato que mas comprime la imagen sin perdida de calidad es el JPEG, por el contrario para imágenes tipo tutoriales como las de este artículo, el formato que mas comprime sin perdida de calidad es el PNG.

Lo bueno es que los ajustes que hacen se ven en tiempo real en la pestaña Optimizado, valoren ustedes mismos la calidad que quieren darle a las imágenes de su sitio web.

Si optimizan bien las imágenes de su sitio web, el plugin WebP no comprimirá las imágenes, por lo que pueden ahorrarse si quieren el siguiente paso.

Como optimizar imágenes en WordPress

Si no son capaces, o no tienen Photoshop para optimizar las imágenes de sus paginas web como les muestro en el apartado anterior, entonces SI les recomiendo seguir este apartado.

Yo siempre para optimizar las imágenes de mi web, cualquier imagen (de las que tenga los derecho de autor) que quiera subir a mi blog, la optimizo con Photoshop o cualquier otro editor de imágenes, una vez optimizada de tamaño y peso, la publico. Además utilizo el plugin WordPress para optimizar imágenes, WebP Converter for Media, que lo que hace este plugin es optimizar aun mas las imágenes, como veremos con un ejemplo.

En esta imagen inferior, podemos ver la imagen optimizada con Photoshop (la que yo subí al blog), que ocupa 37kb, frente a la imagen que me descargo del blog (una vez que ha sido optimizada por el plugin WebP Converter) que ocupa 6kb, como podéis ver ocupa casi 6 veces menos, y esto multiplicado por X, es rapidez de carga que estamos dando a nuestro sitio web.

¿Cómo subir imágenes webp a wordpress?

Como ya habrán podido observar, WordPress por seguridad, NO permite subir imágenes en formato WebP a nuestro servidor, pero no hay ningún problema, como mencioné en párrafos anteriores, solo tienen que optimizar la imagen con cualquier editor y subirla a su web en formato .jpg, y entonces es cuando el plugin WebP Converter for Media, realiza su función y comprime mas aun las imágenes .jpg convirtiéndolas en formato .WepP.

Una vez que un usuario visite nuestra página web, se le mostrará la imagen en formato .WebP si su navegador lo soporta y en caso contrario, se les mostrará en formato .jpg, de ahí la importancia de optimizar los archivos .jpg.

Herramientas para convertir y optimizar imágenes

En vez de usar Photoshop, hay herramientas online gratuitas que nos pueden servir, en este caso, hice la comparación con la herramienta gratuita que se llama kraken.

La misma imagen que salió de photoshop, la pase por la web gratuita de compresión de imágenes kraken, como podéis ver la compresión que le aplica el plugin WebP, es superior al que le aplica la web Kraken, como pueden ver en la imagen inferior, pero vamos, que después de pasar por kraken, el plugin también puede hacer su trabajo, solo tenemos que mirar que la imagen se vea bien a simple vista.

En definitiva, hay herramientas y servicios gratuitos que sirven para ir recortando estos KB de mas, lo que siempre tienen que tener claro es que, contra mas rápido cargue su web, MEJOR, o mejor dicho, que Google lo verá con mejores ojos.

Dudas, quejas o sugerencias, aquí abajo.