Optimizar imágenes en WordPress

Las imágenes de una web son uno de los factores de más importancia a la hora de optimizar y a la que se le suele prestar menos atención. 
Si no se tiene cuidado las imágenes pueden representar más del 80% del peso de una web, así que voy a enseñarte todo lo que necesitas para optimizar imágenes en WordPress y poder usarlas sin perjudicar tu velocidad ni rendimiento.

​Según HTTP Archive, en septiembre de 2022, las imágenes de una web ocupan un total de 1013,3 KB (1,01 MB), siendo 1 MB lo máximo recomendado que debería pesar una web.

Pues eso acaba hoy. 

Porque te voy enseñar a optimizar las imágenes de tu WordPress, para conseguir el equilibrio perfecto entre resolución y calidad. 

---

Usar resolución correcta

Uno de los errores más comunes es subir una imagen con resolución FULL HD para al final usarla en una miniatura de la página.

Es importante subir la imagen que se vaya a usar en su resolución adecuada.

De esta forma podemos llegar a ahorrar incluso el 70% de peso en comparación con la original.

¿Cómo medir la imagen?

Primero visita la página donde está la imagen que quieres optimizar y poner la nueva imagen optimizada.

Cambiar la resolución de la imagen en WordPress

Lo mejor es usar Photoshop para cambiar la resolución de la imagen al tamaño que hemos medido previamente.
Te explico cómo hacerlo:

¡Y ya está!

Guarda los cambios y comprueba que la imagen se vea correctamente.
Ahora tienes la misma imagen con una reducción de peso más que considerable y lista para subir a WordPress.

---

Reducir el peso de las imágenes en WordPress

Al cambiar las imágenes de WordPress a su resolución correcta habremos reducido su peso.
Pero si la imagen pesa más de 100 KB quiere decir que necesita un paso extra para optimizarla y reducir su peso.

Podemos usar varias herramientas online gratuitas:

• Para JPG: TinyJPG – Compress JPEG
• Para PNG: TinyPNG – Compress PNG

Pero lo recomendable es usar Imagify.

Usar Imagify para optimizar imágenes en WordPress

​Un plugin de manos del mismo equipo de WP Rocket y que, además de optimizar las imágenes de forma automática, ofrece un plus que otros plugins no ofrecen: crear la versión WebP de forma automática.

Tienes disponible la lección de Imagify en el curso de optimización WordPress, donde te explico como configurarlo al 100%

---

Cambiar PNG por JPG

Siempre debemos usar el formato JPG para las imágenes de nuestra web y usar el formato PNG estrictamente para casos en que la transparencia es necesaria y justificada.

Para que veas porqué recomiendo siempre usar el formato JPG voy a ponerte un ejemplo comparando el peso de la misma imagen en JPG y PNG.

Como dicen: una imagen vale más que mil palabras, pero la misma imagen en la misma resolución en PNG es 526KB más pesada que en JPG.

Tienes muchas herramientas online gratuitas para pasar imágenes de PNG a JPG, aunque lo más recomendado es usar Photoshop.
Con una rápida búsqueda por Google podemos encontrar algunas herramientas online que funcionan bien:

• https://imagen.online-convert.com/es/convertir/png-a-jpg
• https://png2jpg.com/

---

Optimizar el favicon WordPress

El favicon, esa pequeña imagen que da estilo a nuestra web en las pestañas del navegador y que tan olvidado y poco optimizado es.

Un favicon mal optimizado puede añadir una carga extra en nuestra web, así que vamos a aprender cómo usarlo correctamente.

Es un error muy común subir el propio logo de la web como favicon.
¡No lo hagas! Crea un archivo propio para el favicon.

Para explicarte cómo se hace usaré esta imagen que no es mía, pertenece al usuario https://www.freepik.com/terdpongvector

Para ser exactos pesa 8,59 KB y tiene unas dimensiones de 280 x 277 px.

Ahora tan solo pesa 1 KB y podemos proceder a subirlo a nuestra web.

Para ello vamos a Apariencia > Personalizar > Cabecera > Identidad del sitio.