Cómo optimizar imágenes en WordPress, para reducir peso y carga

Optimizar imágenes WordPress

En esta guía te explico todo lo que debes saber para optimizar imágenes en WordPress, para reducir su peso y tiempo de carga.

Es de las tareas más importantes a la hora de optimizar WordPress.

¡Vamos a ello!

P.D. Puedes aprender a optimizar WordPress gratis como WPOptimizer y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones.

¿Por qué es necesario optimizar imágenes en WordPress?

Hay varios motivos por los que necesitas optimizar imágenes en WordPress.

Tu WordPress será más rápido

Sí, cuanto más ligeras sean las imágenes que cargas, más rápida cargará tu web WordPress.

Y cuanto más rápida sea tu web, más visitas y más conversiones tendrá.

Ahorrarás recursos en el hosting

Cuando hablo de recursos me refiero a espacio del hosting, puesto que al pesar menos, ocupan menos espacio.

Pero también ahorrar ancho de banda, en el caso de que tengas un límite y hasta ahorrar CPU y RAM, porque requerirán menos recursos para su carga.

Como, ves todo son ventajas.

Los mejores plugins para optimizar imágenes en WordPress

Hay muchos plugins para optimizar imágenes en WordPress, pero te dejo los más conocidos, con un resumen de sus ventajas y desventajas:

  • Imagify: El plugin que uso, puesto que es el más completo y sencillo de usar. Se encarga de todas las tareas necesarias, hasta la de hacer una copia de seguridad de las imágenes. Tiene versión gratuita con límite de imágenes y la versión premium que es la que tengo.
  • WP Smush: Uno de los más conocidos y también muy completo, pero la versión gratuita es limitada respecto a compresión de imágenes y la de pago la veo excesiva.
  • ShortPixel Image Optimizer: Otro de los grandes, pero no me gustan sus limitaciones.

Elijas el que elijas, será una buena opción, porque tienen unas funciones similares.

Cómo optimizar imágenes en WordPress

Te explico todo los pasos para optimizar imágenes en WordPress.

Importante: Recomiendo hacer una copia de seguridad de las imágenes, puesto que según qué plugin uses y las tareas que realices, estos cambios serán irreversibles.

1. Elige el formato adecuado de imágenes

Los formatos más conocidos de imágenes son PNG y JPEG, aunque ya hay formatos más nuevos como WebP:

  • PNG: Recomiendo el uso para imágenes que requieran poca calidad o usen fondos transparentes.
  • JPEG: Ideal para fotografías o imágenes de gran calidad.
  • WebP: Mucho más ligero, pero todavía no es compatible con todos los navegadores, así que hay que saber configurarlo correctamente.

2. Nombra las imágenes de manera eficaz

Nombrar las imágenes de manera eficaz, mejora un poco los tiempos de carga, al hacer "pensar menos" a los navegadores.

Pero sobre todo, te ahorra problemas a la hora de compartir esas imágenes o analizarlas con ciertas herramientas.

Lo ideal es usar nombres de imágenes que no tengan espacios, mayúsculas, acentos o caracteres raros.

Por ejemplo, miweb.com/receta-de-lasana.jpeg es mejor que miweb.com/Receta-de-Lasaña.jpeg.

Después podrás usar el texto alternativo, para poner el nombre adecuado, para mejorar el SEO.

3. Indica un tamaño máximo de imágenes

Es muy importante indicar un tamaño máximo de imágenes, para que las que subamos a la web no sean demasiado grandes, sobre todo si la web es para alguien que tiene pocos conocimientos.

Recomiendo un tamaño máximo de imágenes de 1200 px, aunque esto obviamente dependerá de cada web.

Imagify permite reducir el tamaño máximo de imágenes, pero usa el tamaño máximo del tema, que en ocasiones es demasiado grande para las imágenes que se usan.

Redimensiona imágenes más grandes Imagify

En este caso lo ideal es usar el plugin Imsanity, que se encargará de coger todas las imágenes de tu web y reducirlas el tamaño que tú quieras.

Panel de control Imsanity

4. Reduce el peso de las imágenes

La tarea más importante es la de reducir el peso de las imágenes, puesto que será lo que las acelere y yo recomiendo hacerlo con Imagify, puesto que te deja elegir diferentes calidades de optimización.

Una vez que has puesto la API, ya sea la gratuita que te da o si has pagado por una, te vas a Ajustes - Imagify - Nivel de optimización (yo tengo un nivel medio).

De paso activa la casilla de backup de las imágenes originales, por si necesitas volver a cómo estaban.

Ajustes generales Imagify

Una vez configurado, te vas a Medios - Optimización masiva y le das al botón de Imagifícalo todo, para que optimice todas las imágenes.

El proceso terminará cuando llegue al 100%.

Imagify

5. Sube imágenes con el tamaño adecuado

Aunque ahora hay un límite de subida y las imágenes se comprimen, deberás de subir las imágenes con el tamaño adecuado.

Con esto quiero decir es que, si en una página vas a insertar una imagen que ocupa un espacio de 500 px x 500 px, sube una de ese tamaño y no una que tenga un tamaño de 1000 px x 1000 px.

Con el gestor de medios de WordPress las podrás redimensionar, pero te creará una URL de imagen más compleja de usar.

6. Especifica el width y el height de las imágenes

Un error muy común al añadir imágenes manualmente y en algunos temas y plugins, es que no añaden el width (ancho) y el height (alto) de las imágenes.

O incluso, lo añaden, pero en vez de indicar el tamaño exacto, lo ponen en auto.

Cuando un navegador carga una imagen, espera saber qué tamaño tiene, para poder reservarle el espacio adecuado.

Si no se indica el tamaño de la imagen, este tarda más en cargarla, hasta que averigua su tamaño, lo que ralentiza la carga, además de que en PageSpeed verás el aviso de "Los elementos de imagen no tienen width y height explícitos".

Los elementos de imagen no tienen width y height explícitos PageSpeed

Esto es tan sencillo, como que si tenemos una imagen de 800px x 600px, que en su código indique lo siguiente:

<img width="800" height="600" src="url-de-imagen-de-ejemplo">

7. Usa miniaturas todo lo que puedas

Las miniaturas de WordPress son unas pequeñas imágenes que se crean cada vez que subes una nueva imagen a tu WordPress.

Lo bueno de ésto es que se usan imágenes a un tamaño exacto y la web cargará más rápido.

Lo malo es que de una misma imagen se crean unas pocas, con el consecuente uso de espacio en el hosting.

Si te vas a Ajustes - Medios, verás que se pueden elegir unos tamaños predefinidos de miniaturas.

Yo te recomiendo que uses unos tamaños estándar para tus artículos y así hacerlos todos iguales.

Configuras, subes la imagen y ya está lista para insertarla en los tamaños que necesites.

8. Sirve las imágenes con un CDN

Si tu web carga muchas, lo ideal es que uses un CDN para las imágenes.

Un CDN es un servicio que se encargará de servir las imágenes, desde la localización más cercana a tu público objetivo.

Esto hará que carguen más rápido y además te ahorra recursos del hosting.

Te recomiendo leer mi guía en la que te cuento todo sobre CDN en WordPress.

9. Usa imágenes WebP

Las imágenes WebP son mucho más ligeras que otras, pero no son compatibles con todos los navegadores.

Imagify sirve para crear y sustituir este tipo de imágenes, pero te recomiendo echar un vistazo a mí guía sobre imágenes WebP en WordPress.

10. Optimiza las imágenes de Gravatar

Además de las imágenes normales, también están las imágenes de Gravatar, que se cargan desde un servidor externo.

Estas imágenes no las pueden optimizar los plugins de optimizar imágenes, pero hay formas de optimizar las imágenes de Gravatar.

11. Aplica Lazy Load a las imágenes

El último paso es aplicar Lazy Load o carga diferida a las imágenes, porque las imágenes que no se cargan, no ralentizan.

Echa un vistazo a mi guía de activar Lazy Load en WordPress.

¡Optimiza las imágenes de WordPress!

Espero que esta guía te sea de utilidad para optimizar las imágenes de WordPress.

Si tienes alguna duda, te espero en los comentarios.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

  • Acceso exclusivo a la comunidad de Discord.
  • Consejos semanales probados, para tener una web WordPress rápida.

Únete gratis a WPOptimizers y aprende a optimizar WordPress

Acceso exclusivo a la comunidad de Discord.
Consejos semanales probados, para tener una web WordPress rápida.

Información básica sobre Protección de Datos. Responsable: Raúl González Sedeño (yo mismo). Finalidad: Tratar la información que me pases para poder prestarte el servicio solicitado y ayudarte a tener una web rápida con mis consejos. Legitimación: Que me das permiso, vaya. Destinatarios: Tus datos se guardan en Active Campaign que es mi servicio de email marketing y que está acogido al acuerdo de seguridad EU-US Privacy. Resumiendo, que están protegidos. Derechos: Y obviamente puedes acceder, rectificar y suprimir tus datos, así como otros derechos cuando quieras. Información adicional: Puedes consultar la información adicional y detallada sobre protección de datos personales en mi página web.