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 WPOptimizers y recibir cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

¿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%.

Vas a aprender todo en mi <strong>tutorial de Imagify</strong>, una de las mejores herramientas para optimizar las imágenes para WordPress. Uno de los factores que más hace a WordPress lento son las imágenes, bien porque no se usan en los tamaños correctos, por su peso, etc. En el mercado hay muchos plugins para esto. El problema de esto es que unos plugins tiene una cosa, otros otra, pero no hay uno que sea completo. Y como no nos queda más remedio que hacerlo para conseguir los mejores tiempos de carga y hay que buscar alternativas para ello y esta es de los mejores descubrimientos que he hecho. Así que vamos a ello. <h2>¿Qué es Imagify.io?</h2> Es básicamente un software de compresión de imágenes que incluye todo lo necesario: <ul> <li><strong>Compresión de imágenes:</strong> Ofrece 3 niveles de compresión según la calidad y nivel de optimización que necesites.</li> <li><strong>Servidores externos:</strong> Dado que la compresión de imágenes requiere de ciertos esfuerzo por la parte del servidor, Imagify lo hace mediante sus servidores para que tu no sobre cargues tu alojamiento.</li> <li><strong>Copia de seguridad:</strong> Por si quieres volver al tamaño original o cambiar a otro nivel de compresión.</li> <li><strong>Redimensionado:</strong> Antes de optimizar las imágenes, es muy importante que no sean demasiado grandes e Imagify se encarga de redimensionarlas.</li> <li><strong>Conservación de datos Exif:</strong> Las imágenes almacenan ciertos datos, que hacen que estas pesen más. Por ejemplo la fecha en la que se hicieron, la cámara y hasta la posición GPS. La herramienta te permite elegir si mantenerlas o eliminarlas para ahorrar espacio.</li> <li><strong>Compatibilidad con imágenes webp:</strong> Webp es un formato de imágenes muy ligeras, pero sólo compatibles con algunos navegadores. Imagify te resuelve este problema.</li> </ul> <h3>Los planes de Imagify</h3> La diferencia de Imagify con otras herramientas, es que es de pago, pero no te preocupes, te voy a enseñar a estrujarla al máximo. Imagify dispone de varios planes: <ul> <li><strong>Gratuito:</strong> No pagas nada y puedes optimizar cada mes 25MB de imágenes.</li> <li><strong>Mensuales:</strong> Planes que pagas mensualmente, según las imágenes que necesites optimizar. Desde 1GB, 2, 5, 15, 25 y hasta más Gigas. Puedes contratarlos anualmente y te salen más baratos.</li> <li><strong>Pago único:</strong> Podrás comprar paquetes de optimización de 1GB, 3, 1o y hasta más Gigas.</li> </ul> <img class="aligncenter size-large wp-image-23051" src="https://ragose.com/wp-content/uploads/2020/04/Planes-mensuales-Imagify-780x382.png" alt="Planes mensuales Imagify" width="780" height="382" /> <img class="aligncenter size-large wp-image-23054" src="https://ragose.com/wp-content/uploads/2020/04/Planes-de-pago-único-Imagify-780x382.png" alt="Planes de pago único Imagify" width="780" height="382" /> <h2>Ventajas de Imagify sobre otros plugins</h2> Hay muchos plugins para este cometido y no es sencillo conocer donde flaquean. Lo mejor que puedo hacer es hacerte una comparativa con los más conocidos para que veas las diferencias. <h3>Imagify vs WP Smush</h3> WP Smush es muy conocido en este campo y si no me equivoco fue casi de los primeros en sacar esta función. Aunque es totalmente gratis, tiene 2 limitaciones: <ol> <li><strong>Solo optimiza 50 imágenes cada vez:</strong> O sea que si tienes muchas más, tendrás que estar dándole al botón muchas veces y no interesa.</li> <li><strong>La optimización es limitada:</strong> SÓlo realiza un nivel de optimización, con lo que el peso se reduce algo, pero no lo suficiente.</li> <li><strong>Limite de tamaño de archivos:</strong> todos los que pesen más de 1 Mega no serán optimizados.</li> </ol> Estas limitaciones se eliminan con la versión de pago de wpmudev que son 49 Euros al mes. Obviamente disfrutarás de muchos plugins, temas, formación y demás. Pero no es una opción para todo el mundo. <h3>Imagify VS EWWW Image Optimizer</h3> EWWW Image Optimizer es otro de los más conocidos y que muchos usarán. Personalmente es el que menos me ha gustado, aunque hace ya mucho tiempo que no lo uso. Pero al igual que el anterior, también tiene sus limitaciones: <ul> <li><strong>Tu hosting necesita ciertos scripts:</strong> si tu hosting no dispone de los programas adecuados no funcionará, aunque puedes instalar una versión del plugin con optimización en la nube.</li> <li><strong>La optimización es limitada:</strong> así que no podrás optimizarlas al máximo.</li> <li><strong>No guarda copias de las imágenes:</strong> si un día quieres recuperarlas, no podrás.</li> </ul> Tiene algunas ventajas como optimización de imágenes en CDN, conversión a otros formatos y otras. Pero para cualquier de ellas tendrás que pasar por caja. <h2>Tutorial Imagify</h2> En este <strong>tutorial de Imagify</strong> te voy a enseñar a usarlo paso a paso. <h3>Instalar Imagify</h3> Lo primero que debemos hacer es <strong>instalar Imagify</strong>: <ol> <li>Nos vamos al instalador de WordPress.</li> <li>Buscamos <strong>Imagify</strong>.</li> <li>Le damos a instalar y lo activamos.</li> </ol> <h3>Inserta la API de Imagify</h3> Una vez que está activado seguramente te saldrá el siguiente aviso en el panel de WordPress para insertar la API de Imagify. Dale a la primera opción y te saldrá un cuadro para que pongas tu email. Una vez que lo pongas, le das al botón de inscríbete, te darán de alta y te darán tu clave API key. Después nos vamos al menú <strong>ajustes</strong> y entramos en <strong>Imagify</strong>. <img class="aligncenter size-large wp-image-8091" src="https://ragose.com/wp-content/uploads/2018/06/Aviso-Imagify-780x222.png" alt="Aviso Imagify" width="702" height="200" /> <h3>Ajuste generales</h3> Dentro de los <strong>ajustes generales</strong> podremos configurar varias cosas interesantes: <ul> <li><strong>Nivel de optimización:</strong> Yo te recomiendo que elijas el <strong>nivel agresivo</strong>, que las deja muy ligeras y no pierde calidad.</li> <li><strong>Optimización automática de imágenes al subirlas:</strong> Activa la optimización automática y así se optimizará cada imagen cuando la subas.</li> <li><strong>Backups de las imágenes originales:</strong> Muy recomendable para si en algún momento queremos otro nivel de optimización o volver a su tamaño o peso original. La carpeta de backups la verás dentro de la <strong>raíz de WordPress</strong> con el nombre <strong>imagify-backup</strong> y te recomiendo no borrarla o perderás las copias de las imágenes.</li> <li><strong>Datos Exif:</strong> Los datos Exif guardan información en las imágenes como la cámara con la que se hicieron, la localización y otros. Pero esa información aumenta el peso y a no ser que la necesites, te recomiendo que se elimine en la optimización.</li> <li><strong>Clave API:</strong> A la derecha también podremos ver la API key que tenemos configurada.</li> </ul> <img class="aligncenter size-large wp-image-8093" src="https://ragose.com/wp-content/uploads/2018/06/Ajustes-generales-Imagify-780x535.png" alt="Ajustes generales Imagify" width="702" height="482" /> <h3>Optimización</h3> En el apartado <strong>optimización</strong>, podremos muchos ajustes interesantes para la optimización de imágenes, Por un lado, podremos <strong>crear versiones webp de las imágenes</strong>, que son un formato mucho más ligero que el resto, pero que sólo son compatibles con algunos navegadores como <strong>Google Chrome</strong>. Simplemente darle al botón de <strong>generar versiones de webp que faltan</strong> y te las creará. Además, el plugin podrá <strong>sustituir las imágenes por webp</strong> de forma automática siempre que el navegador sa compatible y lo haces en la opción de <strong>usar las etiquetas picture tags</strong>. Si usas un CDN mediante WP Rocket, automáticamente usará la URL de este, de lo contrario, tendrás que indicarla, para que estas imágenes se carguen desde este. Después podrás <strong>activar el redimensionado de imágenes</strong>, que yo por cierto yo <strong>lo recomiendo en 1200px</strong> o al máximo que use tu tema. También podrás configurar qué miniaturas quieres optimizar y que obviamente <strong>serán todas</strong>. Y por último, podremos agregar otras carpetas que queramos optimizar y que estén fuera de la instalación de WordPress, como yo tengo mi <strong>tema Astra</strong> y el <strong>tema hijo Ragose</strong>. <img class="aligncenter size-large wp-image-23081" src="https://ragose.com/wp-content/uploads/2020/04/Imagify-ajustes-optimización-780x896.png" alt="Imagify ajustes optimización" width="780" height="896" /> <h3>Opciones de visualización</h3> En opciones de visualización, tenemos la opción de activar un <strong>acceso directo a la barra de administración</strong>, pero yo prefiero desactivarlo para ahorrar recursos. <img class="aligncenter size-large wp-image-8094" src="https://ragose.com/wp-content/uploads/2018/06/Opciones-de-visualización-780x333.png" alt="Opciones de visualización" width="702" height="300" /> Cuando hayas terminado guarda los cambios. Puedes hacerlo desde el botón verde y te llevará directamente a la <strong>función de optimización</strong>. <h3>Optimizar imágenes</h3> Puedes ir al apartado de <strong>optimizar imágenes</strong> desde <strong>Medios</strong> - <strong>Optimización masiva</strong>. Pues tan sencillo como ir al apartado de optimización masiva y darle al botón de <strong>Imagifícalo todo</strong>. En ese momento todas las imágenes se empezarán a optimizar. Eso sí, ten en cuenta que deberás de mantener la ventana abierta y no recargarla. Así que lo suyo es hacerlo en una pestaña que no vayas a cerrar. Tardará según el número de imágenes que tengas, así que ten paciencia. <h2>Consejos para sacarle provecho a Imagify</h2> Te voy a dar unos consejos o trucos para sacarla provecho a esta herramienta. Van orientados a que ahorres al máximo el crédito que tenga con ellos. Reduce el tamaño de imágenes Optimiza las miniaturas <h2>¿Qué te parece la herramienta?</h2>

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

Recibe cada semana consejos de optimización probados para tener una web WordPress rápida, que mejorará su SEO y conversiones y acceso a herramientas, contenido exclusivo y soporte gratuito.

    18 comentarios en “Cómo optimizar imágenes en WordPress, para reducir peso y carga”

    1. Manfred Camero García

      Hola Raul.
      Sobre este tema del post, una pregunta: cuando borras una imagen desde la Galeria de Medios que uno mismo subió, también se borran la miniaturas o hay que borrarlas de manera individual? De ser así, donde puedo ver las miniauturas?
      Gracias de antemano, saludos.

      1. Hola Manfred,

        Las miniaturas no se suelen borrar y son las que más espacio ocupan. Puedes verlas si entras en la carpeta wp-content – uploads.

        Saludos.

    2. Hola, un par de cosas sobre imágenes:

      En primer lugar, hablas de tamaños de 1200 pixels y yo para conseguir menos de 100k tengo que reducir a tamaños de 500 pixels de ancho, uso PS y la opción exportar a WEB (jpg), ¿como consigues imágenes de esos tamaños y que no pesen.

      Lo segundo es sobre versión PC vs Móvil. ¿usas las misma imagen par ambas versiones o hay que tener duplicadas todas las imágenes a dos tamaños para las dos versiones (uso Elementor)

      Gracias!!

      1. Hola Satur,

        Te respondo:

        1. Reduces el tamaño, reduces el peso, usas WebP y después Lazy Load. No hay más. Obviamente habrá algunas que no se puedan reducir más.

        2. Astra gestiona esto muy bien, pero con builders como Elementor te ayudan a elegir qué imagen cargar y donde.

        Saludos.

    3. Muy buen articulo,para las imagenes estoy usando wp-optimize que es un todo en uno y parece que va bien,tu herramienta de test de velocidad muy buena,gracias

    4. Mi web iba bien, muy rápida hasta hoy… No sé que pasa que tarda 15 segundos en cargar. Tengo un hosting básico de https://sered.net/hosting-espa%C3%B1a-ssd (36€/año + IVA).
      Resulta que estoy teniendo varios pedidos al día y en realidad es una academia de baile en la que la gente se conecta para bailar coreografías enlazadas a VIMEO.
      Quizá por el volumen de gente me ha quedado pequeño el hosting.
      Imagenes tengo 30 subidas en todo el sitio…
      No creo que sea eso en mi caso pero todo puede ser.
      ¿Me recomiendas que haga todos estos pasos?
      ¡Gracias!

      1. Hola Miquel,

        Para tantas imágenes lo suyo es optimizar el peso al máximo sin perder calidad, aplicar Lazy Load y si puede ser, usar un CDN para ello.

        Seguro que mejora.

        Saludos.

    5. En un par de días la web de un proyecto en el que colaboré paso de pesar 100MB a pesar 1.20GB, me escribieron preguntándome que podían hacer… Y yo dije en mi mente: Raúl tiene un excelente post sobre esto.

      ¡Gran trabajo! Sos mi mas grande referente para todo el mundo de la optimización.

      1. Pues no debería, vaya yo lo usé hace un par de semanas e iba bien. Esta semana tengo que usarlo de nuevo, si noto algo te lo digo. Saludos.

    6. Hola,

      Quisiera saber qué puedo hacer pues tengo mi blog muy lento. Lo tenia en un hosting gratis y lo pasé para uno económico y me va más lento aún.

      Quisiera saber también si el plugins wp Smush me libera del problema de las imágenes automáticamente o tengo que seleccionar después la mas pequeña.

      Por favor ayúdeme que no se mucho del tema. Gracias.

    7. Me acabo de instalar el plugin Smush it y lo he arrancado para optimizar las imágenes, pero me salta una y otra vez la página:
      504 Gateway Time-out

      Supongo que le tengo que aunmentar la memoría a algo, pero ahora no se por dónde trastear.

      ¿Algún consejillo?

    Únete gratis a WPOptimizers para comentar y aprender a optimizar WordPress.

    ¡Lo quiero!

    Si ya lo eres inicia sesión