Optimizar las imágenes en WordPress

Por: Pablo Velasco,
Últ. act. 17 de febrero del 2020

A la hora de que los visitantes de nuestro WordPress tengan una buena experiencia un factor fundamental sería la optimización de las imágenes.

Este suele ser un tema que se descuida muy a menudo, y puede ser el causante de que la web tarde mucho en cargar. En este artículo vamos a aprender todo lo necesario para que las imágenes de WordPress estén optimizadas de forma adecuada.

Sin más, ¡vamos a ello!

Por qué es importante optimizar las imágenes en WordPress

Es posible que navegando por internet te hayas encontrado en algunas páginas imágenes que tardan mucho tiempo en cargar. Ves que se van mostrando poco a poco, hasta que finalmente se muestra completa. Muy posiblemente esto ocurra debido a que la imagen no está optimizada.

Las imágenes no optimizadas pueden provocar 2 cosas no deseadas:

  • Tu WordPress será más pesado y tardará más en cargar la página completa, con la mala experiencia que esto supondrá para el visitante. Esto se notará especialmente cuando el acceso a la web se haga desde un teléfono móvil.
  • Puede perjudicar al posicionamiento. Buscadores como Google asignan unos determinados recursos de ancho de banda para el rastreo webs, por lo que cuando más pese tu WordPress menos páginas indexará en cada proceso. Además, entenderá que la web no está correctamente optimizada, lo que puede afectar al posicionamiento.

Si utilizas herramientas como PageSpeed de Google para analizar tu web verás que en muchas ocasiones la incorrecta optimización de las imágenes es lo que provoca la mala nota, ya que Google le da mucha importancia a este factor.

¿Ya estás convencido de que es importante tener las imágenes optimizadas en tu WordPress? Espero que sí 🙂

Tipos de optimización de imagen

A la hora de que una imagen esté correctamente optimizada hay que tener en cuenta diversos factores, como el tamaño, la calidad o el formato. Aquí voy a repasar cada uno de estos aspectos.

Tamaño de las imágenes

Si las imágenes que vas a utilizar en tu WordPress las has obtenido de un banco de imágenes o son fotos que has realizado con una cámara (por ejemplo, con tu móvil) es muy probable que su tamaño sea mucho mayor que el que vayas a necesitar en la web.

¿Qué sentido tiene utilizar una imagen con un ancho de 4000 píxeles si en tu WordPress se va a mostrar con un ancho máximo de 850 píxeles? Ya te lo digo yo: ninguno.

¿Buscas hosting para tu web?

Hemos analizado las mejores opciones. Revisa nuestro artículo para descubrir el mejor hosting en España.

Aprovecha nuestros descuentos en la contratación:

Para muestra, un botón. Las siguientes imágenes son similares y se muestran con las mismas dimesiones en pantalla. Sin embargo, la primera tiene un tamaño 2000×2000 píxeles y la segunda el tamaño real con el que se muestra, 426×426 píxeles.

imagen tamaño no optimizado
imagen tamaño optimizado

Parecen iguales, ¿no? Pues la primera imagen ocupa 388 Kb, mientras que la otra ocupa 70 Kb, 5 veces menos. El ahorro de espacio es muy notable. Si en una página tienes varias imágenes con un tamaño mayor del necesario su velocidad completa de carga será mucho más lenta.

Por tanto, tendrás que averiguar cuál es el tamaño máximo con el que se va a mostrar cada imagen en tu WordPress y adaptar la imagen a ese tamaño.

Averiguar el tamaño de las imágenes que se cargan en WordPress

Lo primero a tener en cuenta es que los tamaños de las imágenes pueden variar mucho en función de dónde se vayan a utilizar. No es lo mismo la imagen que se va a usar como logo, que las que se añadan a los artículos del blog o a una galería de imágenes.

Para averiguar cada uno de los tamaños la opción más rápida es utilizar el inspector de elementos que incluyen todos los navegadores modernos, como Chrome, Firefox o Safari.

Bastará con pulsar con el botón derecho del ratón sobre la imágen o área donde se vaya a incluir y seleccionar la opción de inspeccionar elemento. Veremos que se muestra el tamaño de dicha imagen. Lo importante aquí será anotar el ancho, ya que el alto puede ser variable. En el vídeo que encontrarás al final del artículo podrás ver cómo hago esto con más detalle.

averiguar tamaño imágenes de wordpress

Pero ojo, esto no es tan sencillo. Si estamos analizando la imagen destacada de una entrada de WordPress es posible que no se muestre con el mismo tamaño en el listado de artículos del blog que en la página que carga la entrada completa. En este caso, tendrás que quedarte con la versión de mayor tamaño.

Otra situación que se puede dar es que la imagen se muestre con el ancho completo de la ventana del navegador. En este caso, no existe un tamaño fijo definido, ya que dependiendo del ancho de la ventana la imagen se puede mostrar con un tamaño u otro. Para estos casos te recomiendo que el ancho máximo de la imagen sea de 1920 píxeles.

Vale, ahora puedes estar pensando que habrá usuarios que tengan una ventana de mayor resolución, pero estos serán los menos y no notarán demasiado la pérdida de calidad al hacerse la imagen más grande. Es preferible adaptarse al mayor número de usuarios posibles.

Calidad de las imágenes

Este factor es muy importante y a menudo se ignora por desconocimiento. Los archivos de imágenes tienen asignados un factor de calidad. Por ejemplo, para las imágenes en formato JPG la calidad puede ir de 0% al 100%.

Dependiendo de la calidad una imagen puede ocupar más o menos espacio en disco, y las diferencias pueden llegar a ser muy notables.

Lo que ocurre es que, a partir de determinado nivel de calidad, es muy difícil distinguir a simple vista la diferencia. Es por ello que lo recomendable será limitar la calidad hasta un nivel razonable. Por ejemplo, para un JPG podría bastar un 80% de calidad.

Esto lo vas a ver más claro con el siguiente ejemplo. La primera imagen tiene una calidad del 99% y en la segunda se ha optimizado su calidad.

imagen calidad no optimizada
imagen calidad optimizada

¿Notas mucha diferencia? Supongo que no. Pues la primera imagen ocupa 140 Kb mientras que la segunda solo ocupa 31 Kb. Como ves, realmente merece la pena esta optimización.

Aquí puede darse una excepción. Si tu web requiere de imágenes de muy alta calidad (por ejemplo, una web de fotos de boda) es posible que no te interese ajustar tanto la calidad, aunque con un 90% para los JPG ya debería ser más que suficiente.

Formato de las imágenes

Las imágenes que vayas a subir a tu WordPress pueden estar en distintos formatos. Los más populares son JPG, PNG y GIF. Hay otros formatos de imágenes, como TIFF o BMP, pero no te los recomiendo para su uso en una página web.

Dependiendo de tipo de imagen será mejor elegir un formato u otro, tanto para ahorrar en espacio en disco como para tener una buena calidad calidad. No voy a entrar aquí en los tecnicismos de cada formato para no liarte, sino que te indicaré cuál es la mejor opción para cada caso.

Para las fotografías la mejor opción es el formato JPG, ya que será el que menos espacio ocupe con una menor pérdida de calidad. También se puede usar PNG, pero ocupará más espacio en disco.

¿Necesitas ayuda con tu WordPress?

Con nuestros servicios para WordPress podemos resolver cualquier tipo de incidencia que se te presente:

Ver los servicios para WordPress

Para imágenes con colores uniformes, como logos, planos, cómics, etc. el formato PNG será el más adecuado por calidad y tamaño que ocuparán. Aquí también se podría llegar a utilizar el formato GIF, especialmente cuando predominan las líneas rectas.

En el caso de que necesites una imagen con transparencia tendrás que utilizar el formato PNG, ya que el JPG no admite esto. El formato GIF también dispone de la opción de aplicar transparencias, pero si lo que vas a subir es una foto la opción a utilizar será el PNG.

Por último, si quieres subir una imagen animada deberás usar el formato GIF, que es el único que cuenta con esta opción. Ten presente que las imágenes con animaciones suelen ocupar bastante espacio en disco, ya que se genera una imagen por fotograma.

De nuevo, te dejo un ejemplo, comparando la misma imagen en formato JPG (la primera) y PNG (la segunda).

imagen formato jpg
imagen formato png

Para esto caso la imagen en formato JPG ocupa 44 Kb y la imagen en formato PNG ocupa 101 Kb. Hay un menor ahorro de espacio, pero está claro que merece la pena elegir el formato adecuado.

Es posible que hayas oído hablar del formato WEBP. Se trata de un formato más reciente desarrollado por Google y con el que se consigue un ahorro considerable de espacio. El problema está en no es compatible con todos los navegadores (actualmente con Chrome y Safari), y esto es algo que no se puede ignorar. Existen formas de cargar este formato solo para navegadores compatibles, pero no lo trataremos aquí.

Optimizar las imágenes de WordPress online antes de subirlas

Ahora que ya hemos repasado los diversos tipo de optimización que se pueden aplicar a las imágenes para conseguir una carga más rápida con una pérdida mínima de calidad queda decidir la manera de hacerlo.

Existen 2 posibilidades: optimizar las imágenes antes de subirlas o hacerlo directamente en WordPress a través de plugins. Comienzo con la primera opción.

Una imagen se puede optimizar en nuestro propio equipo utilizando programas como Photoshop, Firewoks (más orientado a web) o, incluso, opciones gratuitas como Gimp.

Aquí voy a revisar una alternativa que considero muy sencilla y rápida: optimizar las imágenes a través de herramientas online.

En internet existen multitud de webs que ofrecen la posibilidad de optimizar las imágenes a nivel de calidad, tamaño o formato. Simplemente tenemos que subir las imágenes y todo se hace se forma automática.

Voy a utilizar para ello la web de iloveimg.com que cuenta con todas estas opciones. Por supuesto, existen muchas otras webs para realizar estas tareas, por lo que si ya estás más familiarizado con ellas no hay problema en que las uses.

Optimizar tamaño de las imágenes online

Dentro de la web que acabo de mencionar tendrás que entrar en la opción Redimensionar IMAGEN.

redimensionar imagen wordpress online

Verás que se carga una página muy simple con un botón para subir las imágenes a comprimir, aunque incluso resultará más cómodo arrastrar las imágenes desde nuestro escritorio a la página.

cambiar tamaño imagen wordpress online

Puedes subir varias imágenes al mismo tiempo. Una vez que lo hayas hecho verás una vista previa de las imágenes subidas y en la parte derecha la reducción que se aplicará en las imágenes.

reducir tamaño imágenes online

Inicialmente estará seleccionada la opción de reducir el tamaño de la imagen por porcentaje (por ejemplo, un 50% más pequeña). En lugar de esto te recomiendo reducirlas hasta un determinado tamaño en píxeles. Dichos píxeles serán los que previamente hayas calculado que necesitas para tu WordPress, y este tamaño puede variar en función las imágenes que vayas a subir: fotos para el blog, logo de la web, galerías de imágenes, etc.

Para hacer esto pulsa en la pestaña POR PÍXELES. En el campo Ancho (px) introduce el ancho en píxeles que deberá tener la imagen, dejando vacío el campo Altura (px). Además deberás dejar activado el campo Mantener relación de aspecto, para que la imagen no se deforme, y desmarcado el campo No agrandar si el original es más pequeño, para no redimensionar imágenes que ya son más pequeñas que el tamaño que queremos conseguir.

redimensionar imágenes online

Una vez hecho esto simplemente deberás pulsar en el botón Redimensionar IMÁGENES de la esquina inferior derecha. Comenzará el trabajo de redimensionado, que puede tardar unos segundos y… ¡listo!

Verás una nueva página con un botón para descargar las imágenes con el nuevo tamaño a tu ordenador. ¿Es sencillo, no?

Optimizar calidad de las imágenes online

Para ajustar la calidad de las imágenes tienes que entrar en la opción Comprimir IMAGEN. De nuevo accederás una página muy simple con un botón para subir las imágenes a comprimir, y la opción de arrastrarlas directamente desde tu equipo.

comprimir imagen wordpress online

Al subir las imágenes se mostrará la vista previa de las mismas. Pulsando el botón Comprmir IMÁGENES las imágenes se comprimirán a un nivel óptimo para la web.

optimizar imágenes wordpress online

Una vez hecho verás el botón para descargar las imágenes comprimidas en un zip, junto con una información del ahorro de espacio en disco que has conseguido.

optimizar calidad imágenes online

¡Más fácil imposible!

Cambiar el formato de las imágenes online

Lo normal en estos casos casos es convertir imágenes de otros formatos a JPG, o convertir JPG a otros formatos. Ambas opciones las tenemos disponibles en iloveimg.com.

El proceso a seguir será similar al que has visto para cambiar el tamaño y ajustar la calidad de las imágenes.

Para convertir imágenes a formato JPG, que sería lo recomendable para fotos, tendrás que pulsar en la opción Convertir a JPG. Ahora sube o arrastra las imágenes a convertir y, una vez hecho, pulsa en el botón Convertir a JPG.

Optimizar imágenes de WordPress con plugins

Como hemos visto, las imágenes las puedes tener optimizadas antes de ser utilizadas en tu WordPress, pero también dispondrás de la posibilidad de optimizarlas cuando la subas en él.

Para ello dispones de multitud de plugins pensados para ello. Aquí voy a repasar los que considero que son las mejores opciones.

Optimizar el tamaño de las imágenes con un plugin de WordPress

Como te había comentado, usar imágenes demasiados grandes no es eficiente. Esto puede perjudicar en los tiempos de carga de tu web.

Para limitar el tamaño de las imágenes que vayas a subir a WordPress te recomiendo utilizar el plugin Imsanity.

Para instalar el plugin vete en la administración de WordPress a Plugins > Añadir nuevo. En la caja de búsqueda escribe el texto Imsanity y pulsa intro.

instalar plugin optimización de imágenes

Verás que se muestra un listado de plugin, el primero de los cuales sería el que vamos a revisar aquí.

Simplemente pulsa en el botón Instalar ahora que se muestra en la caja del plugin y, pasados unos segundos, en el botón Activar. Si necesitas más información sobre cómo hacer esto revisa nuestro tutorial sobre cómo instalar plugins en WordPress.

Una vez instalado el plugin Imsanity tendrás que configurarlo. Para ello vete en la administración a Ajustes > Imsanity.

configurar plugin imsanity

Voy a repasar los diversos parámetros que aquí se muestran:

  • Imágenes subidas dentro de una página/entrada: aquí definimos el ancho máximo y la altura máxima que tendrán las imágenes que subamos desde la edición de páginas o entradas. Como sabes. durante el proceso de creación de una página o entrada tenemos la opción de subir la imagen sin hacerlo desde la biblioteca de medios. En nuestro blog explicamos cómo añadir entradas y cómo añadir páginas si necesitas ampliar conocimientos.
  • Imágenes subidas directamente a la biblioteca de medios: para definir ancho y alto máximo de las imágenes que subamos directamente desde el apartado Medios de WordPress
  • Imágenes subidas en cualquier parte (cabeceras del tema, fondos, logotipos, etc.): igual que lo anterior, pero en este caso se aplicará para las imágenes que subamos desde otros sitios, como la personalización del tema.
  • Calidad de imagen JPG: aquí podemos definir la calidad máxima que tendrán las imágenes JPG. Lo recomendable sería un valor de 80, aunque en las pruebas que he realizado con el plugin no parece que esto esté funcionando.
  • Convertir BMP a JPG: muy recomendable activar esta opción, ya que el formato BMP no se debería utilizar en una web, al ocupar este tipo de imágenes demasiado espacio.
  • Convertir PNG a JPG: te recomiendo no activar esto, ya que puedes tener imágenes, como logos o dibujos, donde será más eficiente el formato PNG.
  • Exploración profunda: se puede dejar desactivado, ya que no suele hacer falta.

Como has podido ver, este plugin nos permite definir diversos tamaños máximos para las imágenes en función del lugar donde las subamos. Esto es muy útil, ya que el tamaño puede variar en función del uso que se le vayas a dar.

Por ejemplo, puedes determinar el ancho máximo de las imágenes de las entradas o páginas. En el caso de que algunas, como la imagen destacada, se carguen con un ancho completo, puedes dejar unos valores de 1920×1920 píxeles. Pero si este tamaño está limitado a una caja, podrás configurar un tamaño menor para las imágenes subidas desde las páginas y entradas. Más arriba ya he explicado cómo averiguar el tamaño de las imágenes. En el vídeo lo verás más claro.

Para las imágenes subidas a la biblioteca de medios o subidas en cualquier parte puedes dejar el tamaño de 1920×1920 píxeles, a menos que estés seguro que ninguna imagen se va a cargar a tamaño completo.

En el caso de que tengas dudas sobre qué valores poner, puedes dejar los que vienen por defecto: 1920 píxeles de ancho y 1920 píxeles de altura.

En la parte inferior de la página de configuración del plugin verás que tienes la posibilidad de redimensionar las imágenes que hayas subido antes de instalar el plugin. Gracias a esta opción, además de optimizar la carga de tu WordPress, conseguirás ahorrar espacio en disco.

redimensionar imágenes wordpress

Para hacer esto en primer lugar tienes que pulsar en el botón Buscar imágenes. Debajo se mostrarán las imágenes que tengan un tamaño superior al que se haya configurado en los parámetros de tamaño máximo del plugin.

A continuación, puedes seleccionar las imágenes a las que se les ajustará el tamaño. Tienes 2 opciones: usar Select All para seleccionarlas todas o seleccionar solo algunas. Inicialmente es recomendable elegir solo 1 o 2 imágenes para asegurarte que funciona correctamente.

Una vez seleccionadas las imágenes pulsa en el botón Redimensiona las imágenes seleccionadas. Ten en cuenta que solo se redimensionarán un máximo de 250 imágenes de una vez.

Es muy importante que antes de ejecutar esto hagas una copia de seguridad de WordPress, o al menos del directorio wp-content/uploads, ya que el proceso de redimensionado no es reversible.

Optimizar la calidad de las imágenes con un plugin de WordPress

Ahora que hemos visto como ajustar el tamaño de las imágenes con un plugin queda la segunda parte: optimizar la calidad.

Como te había comentado antes, el plugin Imsanity también contaba con un parámetro para optimizar la calidad de las imágenes con formato JPG, pero en los tests que he hecho no parece que lo haga. Esto lo he comprobado comparando el espacio en disco que ocupa las imágenes que he subido. He visto que el tamaño es prácticamente el mismo, lo que no me cuadra.

Plugins para optimizar la calidad de las imágenes hay muchos, peros varios de ellos no te funcionarán porque utilizan funciones de PHP que están desactivados en determinados servicios de hosting, por una cuestión de seguridad.

Yo te recomiendo usar el plugin optimizador.io. La principal ventaja de este plugin es que la optimización de la calidad de las imágenes la hace en la nube (un servidor externo), por lo que el consumo de recursos que este proceso pueda provocar no correrá a cargo de tu cuenta de hosting. ¡Además en gratuito!

Para descargar el plugin tienes que ir la web optimizador.io y acceder al área de registro.

plugin optimizar calidad imágenes wordpress

Aquí deberás introducir tu nombre y la dirección de correo. Una vez hecho esto y enviado el formulario verás una página con el enlace del descarga del plugin.

Ahora tendrás que instalar el plugin y dar de alta la API Key para poder utilizarlo. Este proceso viene estupendamente explicado en el tutorial de instalación de optimizador.io, por lo que te recomiendo revisar esta página en lugar de repetirlo aquí otra vez.

Ten presente que, una vez que hayas generado la API Key, esta la podrás utilizar en distintos WordPress. No será necesario generar una API para cada una.

Voy a repasar ahora las distintas opciones con las que cuenta optimizador.io. Para acceder a su configuración vete en el menú de la administración de WordPress a optimizador.io.

configurar plugin optimizador.io

Vamos a revisar lo que contiene cada una de las pestañas:

  • Inicio: muestra un resumen con el total de imágenes en la biblioteca multimedia, cantidad de imágenes optimizadas, espacio ahorrado con la optimización, etc.
  • Opciones: aquí encontrarás diversos parámetros de configuración, que explicaré más adelante.
  • Planificación: carga un listado con las imágenes que se han enviado a optimizar, pero que están pendientes de ello. Luego entraré en los detalles de lo que significa esta planificación.
  • Logs: muestra un listado con todas las imágenes que ya se han optimizado, con información del ahorro de espacio que esto ha supuesto para cada una de ellas.
  • Registro API Key: muestra la clave API que se está utilizando en el plugin. En caso de que no muestre esta información deberás generar dicha clave.
  • Ayuda: aquí verás un vídeo tutorial, y la respuesta a las preguntas más frecuentes sobre el plugin.
  • Debug: muestra información sobre WordPress y el servicio de hosting donde está alojado. Esta información puede ser solicitada por el soporte de optimizador.io en caso de que tengas problemas.

Los parámetros de configuración del plugin se encuentran en la pestaña Opciones.

configurar parámetros optimizador.io

Son los siguientes:

  • Autoptimizar: para optimizar automáticamente todas las imágenes que subas a WordPress. Te recomiendo dejarlo activado.
  • Backup imagenes originales: hace una copia de seguridad de las imágenes optimizadas antes del proceso, que se guardan en el directorio wp-content/plugins/weimgoptimizer/backups. Inicialmente te recomiendo activar esta opción, y que la desactives una vez que compruebes que las imágenes optimizadas se ven bien. Ten en cuenta que hacer el backup hará que aumente el espacio ocupado por tu WordPress en la cuenta de hosting.
  • Optimizar Thumbnails: con esto, además de optimizar la imagen principal, también se optimizarán el resto de miniaturas que generan WordPress, el tema u otros plugins. Puedes ver más información sobre el tema de las miniaturas en nuestro tutorial sobre los ajustes de medios de WordPress. Es muy recomendable dejar activado este parámetro.
  • Mostrar banner «Últimas optimizaciones»: para mostrar en la parte superior de la administración de WordPress información sobre las optimizaciones realizadas por el plugin. Puedes dejar esto activado o desactivarlo si te molesta. Te pongo un ejemplo del banner que se muestra.
información imágenes optimizadas en wordpress

Como te había dicho antes, el plugin no optimiza las imágenes en tu propia cuenta de hosting, sino que lo hace en la nube. Una buena noticia, ya que así nuestra web no sufrirá por esta tarea.

Las optimizaciones no se harán de forma inmediata: una vez que ejecutemos el proceso, se planificará su optimización, que estará listo en unos pocos minutos.

Disponemos de varios métodos para optimizar las imágenes. Por una parte, al activar el parámetro Autoptimizar, esto se hará de forma automática para las nuevas imágenes que subas a WordPress.

Pero… ¿qué ocurre con las imágenes que ya tenías ya subidas antes de instalar el plugin?

Sin problema, también se podrán optimizar. Dentro de la pestaña Inicio de optimizador.io verás un botón Optimizar todas las imágenes. ¿Adivinas para que sirve? Exacto, todas las imágenes de tu biblioteca de medios se optimizarán. Ten en cuenta que si tienes un número muy alto de imágenes el proceso se puede alargar varios minutos, incluso horas si tienes miles.

Adicionalmente, también puedes optimizar la calidad de las imágenes de forma individual o por grupos. Para ello vete en la administración de WordPress a Medios > Biblioteca.

Lo primero que tendrás que hacer es cambiar la forma en la que se muestran las imágenes, pasando de la vista de cuadrícula a la vista de lista. Lo puedes hacer pulsando el icono que verás en la parte superior.

cambiar a vista lista biblioteca de medios

Al hacerlo verás que a la derecha de cada imagen se muestra un botón Optimizar ahora para las que no se han optimizado todavía. Pulsando sobre él la imagen se optimizará de forma inmediata. Solo tendrás que esperar unos segundos. Es el único caso en el que las optimización no se planifica.

Para las imágenes que ya se han optimizado anteriormente con el plugin verás información sobre el espacio en disco que ocupaban, el espacio en disco resultante y el ahorro conseguido.

reducir tamaño imágenes wordpress

Por último, dispones de la opción de optimizar varias imágenes a la vez. Para ello simplemente marca las casillas que hay a la izquierda de las imágenes que quieras optimizar. Luego, en el desplegable Acciones en lote que verás arriba, selecciona Optimizar seleccionados y pulsa en Aplicar. Se planificará la optimización de estás imágenes, que estarán listas en unos minutos. Mientras tanto, verás que las imágenes muestras en texto Planificado.

optimizar imágenes wordpress

Como has podido ver, su funcionamiento es muy sencillo. De hecho, una vez que tengas todas tus imágenes optimizadas, no tendrás que hacer nada. Cada que vez que subas una imagen nueva el proceso será automático.

¿Es mejor optimizar las imágenes antes de subirlas o hacerlo desde WordPress con un plugin?

Esta es la pregunta del millón, y no hay una respuesta única. Veamos las ventajas y desventajas de cada opción.

La principal ventaja de optimizar las imágenes antes de subirlas a la web estará en que te ahorrarás tener que instalar plugins adicionales, con lo que tendrás un WordPress más limpio.

Además, podrás definir el tamaño exacto para cada imagen ya que, dependiendo de dónde la vayas a colocar, sus dimensiones pueden variar mucho. Es muy recomendable que esta labor de definir el tamaño de la imagen lo hagas antes de su subida.

En el caso de que haya varios usuarios que añadan contenidos a tu WordPress será aconsejable que utilices plugins de optimización de imagen. De esta forma te aseguras de que, en caso de que alguien suba imágenes no optimizadas, estas se arreglarán de forma automática.

Por otra parte, un plugin como optimizador.io no solo optimiza la imagen principal, sino que también lo hará con las miniaturas, con la ventaja que eso supone. También he podido ver que el nivel de optimización de calidad conseguido es mayor que con herramientas online, de forma que se consigue un ahorro de espacio adicional.

Mi consejo es que ajustes el tamaño de las imágenes antes de subirlas a WordPress, dejando el tema de la optimización de la calidad de la imagen a optimizador.io.

Conclusiones y tutorial en vídeo

Uno de los factores más importantes para determinar la velocidad de carga de un WordPress es, junto con el tiempo de respuesta del servidor, el peso total de los elementos que se cargan en ella.

Para lo primero es importante, entre otras cosas, tener un plugin de caché como, por ejemplo, WP Rocket.

Respecto al peso de la página, las imágenes son un elemento fundamental, ya que son los archivos qué más espacio ocupan en disco. Esto es especialmente notable en páginas con mucho contenido.

Es por ello que una correcta optimización de las imágenes de WordPress será un elemento fundamental a la hora de conseguir unos tiempos de carga adecuados. Si ignoras esto es que no estás preocupado por el éxito de tu web.

Como has podido ver aquí, optimizar imágenes es un proceso muy sencillo, y solo te llevará unos minutos. No tienes excusa para no hacerlo.

Te dejo un tutorial en vídeo donde podrás ver de forma más visual cómo optimizar las imágenes en WordPress:

¿Te han quedado dudas? ¿Utilizas otros sistemas para optimizar las imágenes de WordPress? Puedes escribir un mensaje en los comentarios.

8 Comentarios

  1. Tecnogeek

    Sin duda, es una guía que me ha fascinado por ser completa y que da las bases para cuidar el aspecto de las imágenes.

    Responder
    • Pablo Velasco

      Muchas gracias por tu palabras de agradecimiento :))

      Responder
  2. Dani

    Buen artículo. Me ha ayudado mucho a comprender la optimización de imágenes. No obstante, me gustaría resolver una duda, que de momento no me ha resuelto ningún artículo sobre este tema. Entiendo que debemos adaptar nuestras imágenes al ancho con el q se muestran en Google, pero ¿Cómo podemos adaptar nuestra imagen para móviles y escritorio al mismo tiempo, siendo distinta la resolución con la que va a mostrarlo Google?
    Gracias

    Responder
    • Pablo Velasco

      Hola Dani, muy buena pregunta.

      Lo primero que has de tener en cuenta es que WordPress genera varias miniaturas cada vez que subes una imagen a la web, de forma que utiliza la que mejor se ajusta en cada ocasión. Esto también puede hacerlo el tema que estés usando en tu WordPress. Por ejemplo, si las entradas del blog tienen una imagen destacada, y dicha imagen se muestra tanto en el listado de entradas del blog como en la página del artículo, la imagen o miniatura utilizada puede ser distinta.

      Respecto al tipo de dispositivos, los temas suelen utilizar imágenes adaptables. Esto consiste en que para cada imagen que se carga en la web se asignan diversas miniaturas para cada ancho posible de la ventana del navegador, de forma que se carga la que mejor se adapta a cada situación.

      Responder
      • Dani

        Muchas gracias por responder tan rápido, ya me queda más claro. Gracias

        Responder
  3. Romi

    Hola, un saludo, buen artículo pero yo considero que más fácil de usar es Femora Compress

    Responder
  4. marta

    que plugin crees que es mejor utilitzar. Smush o optimizador.io?

    Responder
    • Pablo Velasco

      Personalmente prefiero optimizador.io, ya que genera un menor consumo de recursos en la cuenta de hosting. Esto no quiere decir que también Smush sea una buena opción, por lo que si ya lo estás utilizando y te sientes cómoda, puedes seguir con él.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *