Cómo optimizar imágenes para la web con WordPress para reducir peso y carga

Optimización imágenes WordPress

Si quieres que tu WordPress cargue rápido, una de las cosas que deberías hacer es optimizar imágenes para la web.

Las imágenes son en muchas ocasiones las causantes de que la web tarde más de la cuenta en cargar.

Digo eso porque otras veces pueden ser scripts, plugins que vayan lentos u otro problemas.

Si vas subiendo y subiendo imágenes sin control a tu web, no te compliques en buscar el mejor hosting para tu WordPress porque no lo hay.

Por eso es de las tareas más importantes a la hora de optimizar WordPress.

Hoy te voy a enseñar a optimizar imágenes y hacer que vaya más ligera.

Así que vamos a ello.

¿Cuáles son las tareas que deberemos realizar?

Con este tutorial realizaremos 2 tareas con las que conseguiremos 2 resultados.

Por un lado optimizaremos todas las imágenes que tenemos actualmente en nuestra web.

Lo haremos directamente en la web con lo que no tendrá que descargarlas, ni optimizarlas de forma manual.

Y por otro, dejaremos configurado WordPress para que nos optimice automáticamente todas las imágenes que subamos.

Así nos ahorraremos el trabajo de optimizarlas antes de subirlas, pero sí deberíamos de tener algo de cuidado y no subir imágenes a lo loco.

Usaremos 2 plugins totalmente gratuitos, pero tendremos que trabajar más si nuestra web tiene muchas imágenes.

Imsanity es un plugin maravilloso que nos cambiará el tamaño de todas las imágenes que tengamos actualmente en nuestra web y las que subamos posteriormente.

WP Smush es otro plugin muy conocido que nos optimizará todas las imágenes que ya tenemos, pero es que además optimizará y cambiará el tamaño de las que subamos de forma automática.

Importante: Hagamos como lo hagamos, nuestras imágenes se va a modificar y ya no hay vuelta atrás.

Mi recomendación es que hagas una copia de seguridad de tu web y guardes esa copia por si necesitas restaurar el tamaño de imágenes actual u otro más grande.

¿Cómo elegir el tamaño adecuado para tus imágenes?

Sabiendo que vamos a modificar el tamaño de nuestras imágenes, deberemos de saber qué tamaño elegir como máximo.

Esto es algo complejo, porque depende por un lado del tipo de web.

No es lo mismo una web de un fotógrafo, que de alguien que ponga una imagen en pequeño dentro de los posts.

Y también de la plantilla, dado que cada una tiene un ancho máximo de pantalla, usa diferentes tamaños de miniaturas, etc.

Yo personalmente no usaría en este momento tamaños de más de 1000 píxeles en una pagina web.

Si quieres tener más calidad, puedes subir hasta los 2000, pero solo en caso excepcionales, dado que hará la página más lenta.

Pero ojo, esto es solo una aproximación, dado cada página web es diferente.

Tutorial Imsanity

Imsanity plugin WordPress cambiar tamaño imágenes

Como te he comentado, lo primero que haremos será realizar un ajuste de tamaño de las que ya tenemos subidas al gestor de medios de WordPress.

Esto es obligatorio porque cuando sé es novato en WordPress, lo más normal es que las subamos sin control.

Yo veo a diario webs con imágenes que superan los 4000 u 8000 píxeles y como puedes deducir, eso no es nada bueno si queremos tener nuestra web optimizada.

Imsanity se encargará de coger todas las imágenes de tu web y reducirlas el tamaño que tú quieras.

Así que nos vamos al instalador de plugins de WordPress, lo buscamos e instalamos.

Una vez que lo tenemos instalado, deberemos acceder a él desde el menú ajustesImsanity.

Panel de control Imsanity

Como puedes ver, el panel de control es muy sencillo, pero deberías de saber algunas cosas importantes para usarlo.

Lo primero que deberemos de hacer es indicarle a Imsanity el tamaño máximo al que vamos a modificar las que tenemos subidas.

Así buscará todas las imágenes de un tamaño igual o superior a este y las recortará de forma automática.

Puedes configurar las imágenes de entradas y páginas, las que subes directamente a la librería y las que se suben aparte como las que sube el tema.

Yo personalmente solo ajusto la primera, pero ya depende de ti.

Aquí lo que hay que hacer es tener una cosa en mente que es muy importante.

Solo indicaremos en ancho máximo el que queremos que se recorten y en el alto, pondremos una cifra alta, como yo que he puesto 10000 píxeles.

Esto lo hago para que el ancho se ajuste al tamaño que quiero y el alto se haga de forma automática, según la imagen.

Si quieres desactivar algunas imágenes, directamente pones 0 y no se revisarán.

Abajo hay más opciones, pero no le eches cuentas porque no las necesitas, e incluso te pueden traer problemas.

Una vez que lo tenemos configurado, le damos al botón de buscar imágenes.

Modificar tamaño con Imsanity

Como puedes ver, en el listado solo nos aparecerán las imágenes que son más grandes que el tamaño que hemos configurado.

Pero además, nos da la opción de ir desactivando desde la casilla las que no queramos que se modifiquen.

Si estamos de cuerdo con todo, le damos al botón de Resize Checked Images y todas se modificarán al tamaño que hemos elegido.

¿Quieres tener un WordPress rápido desde YA?
Descarga gratis mi checklist WPO. ¡Es gratis!

La quiero

Desde este momento, todas las imágenes que subamos se modificarán al tamaño elegido, pero no lo necesitamos.

Puedes desinstalar el plugin que con el siguiente haremos el resto.

Tutorial WP Smush

WP Smush

Una vez que ya tenemos las imágenes en un tamaño ideal, lo que tenemos que hacer es optimizarlas para que pesen menos.

Y de paso todas las que se suban de ahora en adelante se optimizarán y cambiarán de tamaño de forma automática.

Para ello usaremos el plugin WP Smush, uno de los más usados para esta tarea, pero el mismo tiene sus limitaciones que te voy a explicar.

  • Realiza la optimización de solo 50 imágenes al mismo tiempo, así que cuando se para hay que volver a darle al botón. Si tienes miles de imágenes, esto puede ser un problema.
  • Solo optimiza imágenes de menos de 1MB, de ahí que antes hayamos arreglado el tamaño de todas, para que entren dentro de esta cifra todas las que podamos.

Puedes tomártelo con tranquilidad y todos los días darle algunas veces o puedes pillar la versión Pro si te das de alta en wpmudev.

Pero que solo tiene una versión de prueba de 14 días y después te toca para y son casi 50 Euros al mes.

La ventaja es que disfrutarás de muchos más plugins tan buenos como este, aunque solo te puede ser útil si tienes muchas webs o eres diseñador/desarrollador en WordPress.

Tengo un post sobre los mejores plugins para optimizar WordPress que suelo actualizar con los nuevos por si quieres echarle un ojo.

Ve al instalador de plugins de WordPress e instala WP Smush.

Una vez instalado, podrás acceder a él desde el menú mediosWP Smush.

Panel de control de WP Smush para WordPress

Como puedes ver, el panel de control también es muy sencillo.

Arriba hay un botón en azul, que si le das empezará la optimización de tus imágenes, pero eso si, parando cada 50 para que le tengas que dar de nuevo al botón.

A la derecha hay un botón que pone Re-chequed images que verificará de nuevo todas las imágenes para comprobar que están correctas.

Podrás ver en todo momento como se van optimizando las imágenes, las que ya están listas y el espacio que vas ahorrando, etc.

Más abajo en los ajustes tenemos varias opciones.

La de Automatically smush my images on upload nos optimizará todas las imágenes que subamos y obviamente hay que dejarla activada.

Hablamos de las miniaturas que son las que normalmente se usan en páginas y entradas.

Preserve image EXIF data te da la opción de guardar los datos que suelen contener las imágenes y que puede que te interese si eres fotógrafo.

La última opción de Resize original images es la que nos va a modificar el tamaño de todas las imágenes que subamos de ahora en adelante, así que la activaremos.

La configuración es similar a Imsanity, poner el ancho máximo y en el alto le dejas una cantidad alta para que lo ajuste según la imagen.

Más abajo hay más opciones, pero no las he puesto porque son de pago, pero te las digo:

  • Una opción que optimiza el doble las imágenes.
  • Otra que también optimiza las imágenes originales, pero que puede que no lo necesites.
  • Puede hacer una copia de las originales, pero que si tenemos nuestra copia de seguridad no la necesitamos.
  • Y convertir PNG a JPG, pero que no te lo recomiendo porque todas esas imágenes darán error al no cambiar la url en los post y páginas.

Una vez que lo tienes todo listo, guardas los cambios y optimiza tus imágenes.

Lo que sí debes de tener en cuenta es no cerrar la ventana de WP Smush, porque sino el proceso de optimización se parará.

Recomendaciones que deberías tener en cuenta

Voy a darte unos consejos que suelo usar en todos mis sitios webs y que seguro que te serán de mucha utilidad.

Te ayudarán a ahorrar mucho tiempo y dinero.

Sube imágenes con tamaño adecuado

Aunque ya tengamos nuestra web preparada para que nos optimice las imágenes de forma automática.

Si subimos las imágenes sin control, eso hará que nuestro WordPress y hosting trabajen mucho más, con el consecuente uso de recursos.

Intenta subir las imágenes lo más exacta posibles, siempre que puedas.

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.

Ajusta tamaños desde el gestor de imágenes

En tu WordPress puedes irte a Medios – Librería Multimedia y ver todas tus imágenes subidas.

Si elijes alguna, puedes editarla y modificar el tamaño.

Así que elije una imagen, pulsa en editar imagen y en Escalar imagen puedes seleccionar por ejemplo el ancho y automáticamente se ajustará el alto.

Esto te servirá por si alguna imagen no se ha optimizado o se ha subido manualmente.

Hay otras alternativas

Aparte de estos plugins, he probado muchos más, como otro que hay conocido que se llama EWWW Image Optimizer.

El problema de este plugin es que en muchos hostings no funciona, dado que le falta la función exec() que se ha eliminado por seguridad y busqué otras alternativas.

Creo que hace poco han hecho algunas mejoras, pero yo ya he pasado de él.

Hay otra alternativa que estoy usando en mis sitios que se llama Imagify y es de lo mejor que he probado.

No lo he usado aquí porque es de pago, pero pronto hablaré de él.

Espero que esta guía te ayude a optimizar tus imágenes y si tienes alguna duda, te espero en los comentarios.

¡Valora mi contenido!
[0 votos. Media: 0]
avatar
el más nuevo el más antiguo el más votado
Francisco Jesus Cervantes Haro
Invitado

Este plugin Imsanity me da un error de acceso

Gonzalo
Invitado
Gonzalo

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.

Juan Carlos
Invitado
Juan Carlos

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?