Herramientas y plugins para optimizar imágenes en WordPress

5
(8)

Si necesitas optimizar las imágenes de tu WordPress, estás en el sitio adecuado. En este post te explico cómo debes hacerlo y las herramientas y plugins que te ayudarán a llevarlo a cabo.

Optimizar imágenes en WordPress

¿Por qué debes optimizar tus imágenes en WordPress?

Por si no lo sabes, la velocidad de carga de tu sitio web o blog es un aspecto fundamental a la hora de posicionar tus contenidos en las primeras posiciones de Google.

Es tan simple, como el hecho de que cada segundo que tarda tu sitio web en cargarse, puede implicar hasta un 20% menos de conversiones.

Por tanto, uno de los aspectos en los que hago hincapié, como consultor SEO, es en que tienes que optimizar, sí o sí, las imágenes que subes a tu WordPress.

¿Cómo se optimizan las imágenes en WordPress?

Por suerte, tienes muchas maneras de optimizar las imágenes en WordPress.

Pero muchas veces, que haya esa variedad, confunde más que ayuda. En este artículo pretendo ponerte en la senda para que, por un lado, aprendas y sepas qué estás haciendo y por otro, no te pierdas en la cantidad de herramientas y plugins que existen en el mercado para la compresión de imágenes.

Optimizar imágenes en WordPress se basa en dos procesos de compresión principalmente: redimensionar y reducir peso.

Y algo que tienes que tener en cuenta es que ambos procesos los puedes, y debes, hacer en dos pasos: antes de subir la imagen a WordPress y después de subir la imagen a WordPress.

Redimensionar imágenes

Redimensionar una imagen es el proceso por el cual recortas una imagen al tamaño adecuado.

Imagina que tienes una imagen de 4000×4000 pixeles de tamaño con una calidad tremenda y que quieres añadir como portada en tu sitio web.

El problema es que una imagen de ese tamaño, por poner un ejemplo, y con alta calidad, pesará considerablemente, por lo que ralentizará la carga de tu sitio web sí o sí.

Además, piensa que realmente no se van a mostrar en pantalla esos 4000×4000 píxeles. Si no que evidentemente, la pantalla tendrá menos píxeles y más aún en móvil.

¿Qué tienes que hacer en estos casos? Conocer qué tamaño es el que realmente se está mostrando en pantalla para así redimensionar o recortar la imagen a la cantidad de píxeles exigidos.

¿Cómo puedes conocer ese tamaño? O bien en la propia documentación de la plantilla o bien trasteando el código fuente de la misma.

Reducir peso

Relacionado con el punto anterior, está la reducción de peso de la imagen.

Reducir peso de imágenes se denomina al proceso por el cual una imagen ocupa menos bytes de espacio, es decir, utilizar algún algoritmo de compresión para comprimir la imagen.

Menos bytes o kilobytes, menor será el peso de una imagen. Y a menor peso, más rápida será la velocidad de carga.

Esto es porque cuando visitas un sitio web con tu móvil, lo que estás haciendo es una petición al servidor que aloja dicho sitio web para que te muestre una copia de la misma.

Si el servidor se tiene que parar a enviar muchos kilobytes de información, porque tu sitio web cuenta con imágenes con mucho peso, eso hará que tú, como usuario, estés esperando en tu móvil que aparezca la información, y como ya te he contado más arriba, no somos muy pacientes y si no carga rápido, nos vamos.

¿Cómo puedes reducir el peso de una imagen? Para reducir el peso de imagen, puedes hacerlo o bien recortando y/o redimensionando la imagen, como te he explicado en el punto anterior, o bien mediante compresión de la misma, intentando que no baje su calidad.

Dependiendo de qué tipo de imagen estés cargando en tu sitio web, quizás no te interese tener una resolución de 300dpi sino que con una resolución menor, se verá igual de bien y te habrás quitado algunos bytes de encima.

Lo ideal es que las imágenes que cargues en tu sitio web pesen lo menos posible, te estoy hablando de menos de 100Kbs, y que su calidad no se resienta para no estropear la experiencia de usuario.

Encontrar ese equilibrio entre peso y calidad a la hora de comprimir, será tu objetivo fundamental para optimizar al máximo tus imágenes en WordPress.

Optimizar las imágenes antes de subirlas a WordPress

Explicados ambos conceptos (redimensión y peso) que debes aplicar en tus imágenes para optimizarlas, ahora toca explicar cuándo hay que hacerlo.

Con WordPress tienes dos oportunidades: antes y después.

Lo ideal es que antes de subir cualquier imagen a tu WordPress, proceses su tamaño y peso para así ya tener una primera versión optimizada.

Piensa que los recursos de tu servidor no son infinitos por lo que no debes subir imágenes pesadas al mismo.

Te puede interesar:  Remozado SEO

Es un poco rollo, lo sé, pero es lo que hay. Acostúmbrate a hacer los siguientes pasos cada vez que vayas a subir imágenes a tu WordPress:

  1. Renombra el archivo de la imagen. Es algo que muchas veces olvidas y es importante para el SEO. Si tu imagen es la de perro jugando con un gato, el nombre del archivo debería ser: «perro-jugando-con-un-gato.jpg» por ejemplo.
  2. No utilices mayúsculas, tildes, ni caracteres raros en los nombres de las imágenes.
  3. Recorta o redimensiona la imagen al tamaño real que se va a mostrar en pantalla.
  4. Reduce el peso de la misma sin perder calidad.
  5. Nota adicional: si puede geolocalizar la imagen, geolocalízala.

Optimizar las imágenes después de subirlas a WordPress

Aunque ya hayas optimizado el tamaño y calidad de tus imágenes antes de subirlas a WordPress, no está de más que tengas algún plugin en WordPress que lleva a cabo otra optimización.

Y no solo te hablo de plugins. También aquí cobra importancia el hosting o alojamiento web que utilices. Un buen hosting procesará de forma adecuada las imágenes que subas a él.

Recuerda que todo esto lo haces para la optimización de la velocidad de carga de tu blog o página web por lo que el hosting es parte fundamental para el éxito de esta misión.

Seguro que puedes seguir arañando algún que otro byte por ahí. Y ya te digo que todo byte que puedas mejorar, es por el bien de tu posicionamiento.

Más abajo te enumero algunos plugins que existen en WordPress y puedes utilizar para optimizar aún más tus imágenes en WordPress. ¡Sigue leyendo!

5 Herramientas para optimizar imágenes

Para gustos los colores. Hay muchas herramientas en el mercado, tanto gratuitas como de pago, que te ayudan a optimizar el tamaño y calidad de tus imágenes. Mira cómo.

Aquí te pongo una selección de ellas.

Adobe Photoshop

Adobe Photoshop
Adobe Photoshop

Creo que no necesita presentación. Adobe Photoshop es uno de los mejores editores de gráficos existentes en el mercado. Es un clásico.

Es cierto que no es gratuito. Además las licencias no son baratas. Pero es normal. Lo bueno no es barato.

En mi caso la utilizo como herramienta de cabecera para cualquier edición de imágenes que necesite.

¿Cómo hacer optimización de imágenes con Photoshop? Si tienes Adobe Photoshop y quieres optimizar tus imágenes, lo que tienes que hacer es:

  • En el menú, selecciona Archivo y luego Exportar.
  • Ahí tienes la opción Guardar para Web.
  • En el cuadro de diálogo que te aparece, selecciona qué tipo de imagen quieres: JPG o PNG-24. JPG si no necesitas transparencias. PNG-24 si la imagen lleva alguna transparencia.
  • Pulsar Guardar y ya tendrás la imagen optimizada por Adobe Photoshop.
Guardar para web - Adobe Photoshop
Guardar para web – Adobe Photoshop

Evidentemente, se puede hacer mucho más para optimizar una imagen en Adobe Photoshop, pero tampoco pretende este artículo ser una guía detallada de la herramienta.

Entre lo que puedes hacer:

  • Con la herramienta de recortar puedes recortar tus imágenes para eliminar aquello que sobre.
  • En el menú principal, dentro del menú Imagen, tienes las opciones tamaño de imagen y tamaño de lienzo que te permiten tanto modificar el tamaño de la imagen como el tamaño del lienzo.
  • Cuando estás grabando tu imagen en formato JPG puedes regular la calidad del mismo, en detrimento de la calidad.

Ir a Adobe Photoshop

Squoosh

Squoosh
Squoosh

Es una herramienta online gratuita. ¿Sabes de quién? De ¡Google! Sí, como lo oyes. Squoosh.app es una herramienta para optimizar imágenes desarrollada por el propio Google.

La conocí prácticamente cuando vio la luz y se ha convertido en mi herramienta de cabecera junto a Adobe Photoshop para optimizar imágenes.

Me encanta su interfaz, simple y eficaz. ¿Cómo optimizar imágenes con Squoosh?

  • Navega a https://squoosh.app/
  • Arrastra la imagen que quieres procesar
  • Verás que se divide en dos con el antes y el después.
  • Por defecto, comprime con MozJPEG, pero puede elegir entre varias opciones de algoritmos de compresión de salida. Quizás la más interesante es la salida WebP.
  • Pulsa el botón de descargar de la esquina inferior derecha y listo. Ya tienes tu imagen optimizada en tu ordenador.

Tiene más opciones de configuración en función del algoritmo de compresión que utilices. Es cuestión de que vayas jugando para comprimir lo más posible, pero perdiendo la menos calidad posible.

Dependiendo de la imagen que quieras optimizar, notarás una mayor o menor pérdida de calidad. Si necesitas alta calidad, es posible que no puedas utilizarla.

Ahora bien, piensa siempre en móvil. Y piensa que es una herramienta del propio Google, quién está apostando, cada vez más, por la velocidad de carga y las imágenes, así que… tu verás.

Ir a Squoosh.app

JPEGmini

JPEGmini. Reduce el tamaño, no la calidad
JPEGmini

La particularidad que tiene JPEGmini es que es una herramienta de escritorio. Es decir, tienes que descargarla e instalarla en tu ordenador para poder utilizarla.

Te puede interesar:  SEO para una Escuela Online

JPEGmini es muy sencilla. Tiene una interfaz curiosa, a modo de polaroid, en la cual lo único que tienes que hacer es arrastrar tu imagen.

Automáticamente te la comprime.

Tienes la opción de bien te optimiza la imagen original (sobreescribe la imagen original) o bien te graba otra nueva en el directorio que le especifiques. Mejor elige esta segunda opción para siempre poder comparar con la original.

Tiene una limitación este programa: que solamente sirve para optimizar imágenes JPG. No te sirve para las imágenes PNG.

Por otro lado, la versión gratuita es totalmente funcional, pero tiene la limitación de 20 imágenes por día. Si ves que necesitas optimizar más imágenes al día, tendrás que ir por la versión de pago.

Ir a JPEGmini

ImgOptimizer

ImgOptimizer de Webempresa
ImgOptimizer de Webempresa

Cada vez más los hostings o alojamientos web se están poniendo las pilas en ofrecer servicios de calidad que les diferencie de la gran competencia existente en el mercado.

Es una de las razones por las cuales hostings como Webempresa, ha creado una herramienta para todos sus clientes que se llama ImgOptimizer.

Con ImgOptimizer, puedes con un solo clic optimizar todas las imágenes subidas a tu hosting. Sin duda una gran ventaja en caso de que tengas ya subidas a tu WordPress muchísimas imágenes.

Si tienes otro hosting con algún plugin similar, enhorabuena. Si no, plantéate cambiar de hosting.

Ir a ImgOptimizer de Webempresa

GTmetrix

GTmetrix también para optimizar tus imágenes
GTmetrix también para optimizar tus imágenes

¡Vaya! GTmetrix. Esta herramienta me gusta mucho y tiene una característica muy chula que te cuento ahora.

GTmetrix es una herramienta de medición de la velocidad de carga de un sitio web. Es decir, para nada es una herramienta de optimización de imágenes.

Pero tiene una funcionalidad, poco conocida, que te puede ayudar bastante y ahorrarte mucho tiempo.

Si te registras con ellos y utilizas su test de velocidad con tu cuenta de usuario (gratuita), si el test detecta que tienes imágenes sin optimizar, te lo dirá y además te pondrá un enlace a la imagen ya optimizada.

¡Como lo oyes! Es la caña. Solamente tienes que pinchar en el enlaces y descargar la imagen optimizada por ellos mismos. Este paso lo conoce poca gente.

Ahora toca que reemplaces tu antigua imagen por la nueva y vuelvas a pasar el test para ver qué te dice.

Ahora bien, hay veces que desespera porque te da una versión optimizada, la pones, vuelves a pasar el test y otra vez te dice que aún se puede optimizar más. ¡No todo puede ser perfecto!

Sea como sea, es otra alternativa más para optimizar tus imágenes.

Ir a GTmetrix

Otras herramientas online gratuitas

Lectores como tú, también me han recomendado que utilice estas herramientas:

  • Pixlr. Es un editor de fotos, animación y diseño.
  • Compresor online de PNG y JPEG de Website Planet.
  • ImageOptim. Optimizador de imágenes.

4 Plugins para optimizar imágenes en WordPress

Es lo bueno que tiene WordPress, que gracias a la gran comunidad que hay detrás, siempre hay alguna opción, en forma de plugin, la solución en particular que necesitas para una funcionalidad concreta. Ya sea como plugin gratuito o como plugin de pago.

Aquí te dejo una selección de plugins.

Smush Image Compression and Optimization

Smush It - Image Compression and Optimization
Smush Image Compression and Optimization

Creo que no me equivoco si te digo que es el plugin más conocido en WordPress a la hora de hablar de optimización de imágenes. También puede que lo conozcas con el nombre de SmushIt.

Está desarrollado por el equipo de WPMU DEV. Y cuenta ya con más de un millón de instalaciones activas en este momento.

Tiene una versión gratuita y otra de pago. Con la versión gratuita ya te puede servir. Hace bien su trabajo.

¿Cómo optimizar imágenes con Smush It?

  • Descarga y activa el plugin desde el repositorio de WordPress.
  • Puedes empezar por optimizar aquellas que ya tienes subidas en tu WordPress. Ya que el plugin tiene una opción para esto. En la versión gratuita lo tienes que hacer por lotes, es decir, no puedes optimizar todas las imágenes del tirón.
  • Luego revisa las opciones y elije la configuración que más te convenga.
  • Por último, prueba a subir una nueva imagen. Verás ahora que sale un botón que pone Smush, en la parte donde poner el texto alternativo y demás. Pulsa en él si Smush no ha comprimido aún tu imagen.

En principio, cada vez que subas una nueva imagen, automáticamente Smush te la optimiza, pero yo prefiero darle al botoncito si veo que no lo ha hecho.

Ir a Smush Image Compression and Optimization

WP Rocket

Aplica Lazy Load a tus imágenes en WordPress con el plugin de caché WP Rocket
Aplica Lazy Load a tus imágenes en WordPress con el plugin de caché WP Rocket

Sí. Como lo oyes. WP Rocket. No me he confundido. ¿Pero no es un plugin de caché? Sí, pero también tiene la opción de aplicar Lazy Load a las imágenes de tu WordPress.

Me explico.

Lazy Load, o Carga Diferida en español, es la técnica de programación que permite cargar las imágenes cuando realmente aparecen en pantalla. Es decir, mientras no son visibles, los recursos no se cargan. Por lo que la velocidad de carga aumenta.

Te puede interesar:  Libros SEO

Esto es algo fundamental que debes aplicar en tu sitio web o blog, y WP Rocket te lo permite.

Es cierto que existen muchos otros plugins para aplicar la carga diferida en tus imágenes, pero como tarde o temprano, vas a tener que utilizar un plugin de caché y muy seguramente este plugin sea WP Rocket, por ser de lo mejorcito en el mercado, pues te ahorras tener dos plugins.

Ir a WP Rocket

Imagify

Imagify. Herramienta y plugin de WordPress para optimizar imágenes
Imagify. Herramienta y plugin de WordPress para optimizar imágenes

Imagify podría ir tanto en el apartado de herramientas como en el de plugins. Ya que es una herramienta y un plugin para WordPress.

Es de pago, pero tiene un plan gratuito que es muy posible que se ajuste a tus necesidades. Te ofrecen 25Mb a optimizar al mes de manera gratuita.

Este plugin está creado por los autores de WP Rocket así que puedes estar seguro que hablamos de calidad. ¡Ni que me pagaran una comisión! O sí… 😉

Ir a Imagify

Imsanity

Imsanity
Imsanity

Otro plugin del que hablan maravillas es Imsanity. Aunque si te digo la verdad, aún no he tenido ocasión de probarlo. ¡Hay tantos plugins!

Tiene buenas referencias en el repositorio de WordPress. Casi todas las valoraciones son 5 estrellas. Más de 300.000 instalaciones activas. Actualizado hace 2 meses.

Si no te ha convencido ninguna de las anteriores opciones, prueba este plugin y ya me cuentas.

Hasta donde yo sé, es un plugin gratuito. Algo que también se agradece.

Ir a Imsanity

Recomendaciones para optimizar tus imágenes en WordPress

Vale. Ya te he dado toda la información que necesitas para que puedas optimizar tus imágenes. Te resumo aquí ahora lo más importante.

Nombre descriptivo

Ya lo he dicho antes, lo primero que tienes que hacer con tus archivos de imágenes es renombrarlos con un nombre descriptivo, mejor que incluyan la palabra clave que quieres posicionar, no utilizando mayúsculas, ni tildes, ni caracteres raros.

Utiliza caracteres en minúscula, separa palabras con guiones medios. Por ejemplo, la imagen destacada de este post que estás leyendo se llama: optimizar-imagenes-wordpress.jpg.

Optimiza antes de subir las imágenes a WordPress

Todo lo que puedas optimizar las imágenes antes de subirlas a WordPress es trabajo bien hecho.

Empieza por determinar qué tamaño de imagen necesitas realmente. Si la imagen se va a mostrar en la web o blog a 300×300 para qué subir a WordPress una imagen de 1000×1000.

Utiliza alguna de las herramientas que te he comentado antes para redimensionar y recortar tu imagen al tamaño adecuado.

Acto seguido decide qué formato necesitas. Si vas a necesitar que tenga transparencia, entonces tendrás que elegir el formato PNG, pero recuerda que un imagen PNG siempre pesará más que una imagen JPG.

Si puedes selecciona JPG, suele ser la mejor relación calidad/peso.

Ahora bien, atento a los nuevos formatos de imágenes. Google ya está recomendando WebP como el nuevo estándar de formato de imagen. El problema es que aún no todos los navegadores lo soportan. Como te digo, habrá que estar pendiente. WebP reduce aún más las imágenes.

Optimiza después de subir a WordPress

Instala el plugin que más te guste para optimizar imágenes en WordPress y úsalo, aunque ya hayas optimizado las imágenes antes de subirlas.

Seguro que pueden optimizarlas un algo más.

Es más, si ya tienes muchas imágenes subidas a tu WordPress, estos plugins son una opción ideal para optimizar tus imágenes a modo bulk, es decir, todas del tirón.

Conclusiones

Como ves, esto de optimizar imágenes da para mucho. Es cuestión de que vayas probando qué es lo que mejor te funciona o te gusta y aplicarlo a tu rutina de trabajo con WordPress.

Tanto tus visitantes como tu SEO lo agradecerán ;-).

Reduce el tamaño y la calidad de tus imágenes en función de las necesidades de tu proyecto.

Utiliza para eso las herramientas y plugins que te he listado más arriba.

El objetivo no es otro que tener un sitio web o blog lo más ligero posible. Ya sé que cada vez la tecnología permite conexiones más rápidas, como la 5G, pero no siempre y no todo el mundo va a tener 5G. Debes pensar en aquellas visitas que quieren leer tus contenidos o comprar tus productos o servicios, pero tienen una conexión 3G.

Un sitio web con las imágenes optimizadas es sinónimo de ventas. ¿Acaso no quieres vender? 😉

¿Te ha resultado útil?

¡Haz clic en las estrellas para puntuarla!

Puntuación media 5 / 5. Recuento: 8

¡No hay valoraciones hasta ahora! Sé el primero en calificar esta publicación.

¡Muchas gracias por compartir!

Facebook
Twitter
LinkedIn
WhatsApp
Telegram

¿Te ha gustado el artículo?

Contrata mis servicios de Consultoría SEO.

¿Necesitas algo concreto?

Buscar

Te puede interesar...

10 comentarios en “Herramientas y plugins para optimizar imágenes en WordPress”

  1. Excelente tu recomendación ya que no la conocia, por mi parte utilizo de forma online «Pixlr» que tiene grandes prestaciones.

    Una consulta: ¿Sabes como se puede optimizar una carpeta de un blog con cientos de imágenes y que la ruta de las fotos sea modificada con éxito?

    Muchas Gracias!

    Santiago

  2. Buen árticulo, pero no encuentro solución a mi problema, yo no subo directamente una foto a la biblioteca de medios, pongo un enlace a una foto, que al incrustarla en la entrada, me sale enoooooooooorme, y no se como reducirla de tamaño.

    1. Hola Paco! Gracias por el comentario. Bueno, lo primero es que no entiendo muy bien el beneficio de no tener las imágenes en la biblioteca de medios, más bien es algo que te perjudica. Pero respondiendo a tu pregunta: siempre puedes mediante CSS por ejemplo modificar el max-width o similar para que se vean más pequeñas las imágenes en tu sitio web. Pero vamos, hay muchas maneras. Saludos!

  3. Rafa, ¡muchas gracias! el motivo de no subir fotos a la biblioteca, y poner enlaces, es que a foto diaria que suelo poner en mi web, en poco tiempo me comería mi capacidad de almacenamiento, lo dicho muchas gracias!.

Deja un comentario

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

¿Te resulta complicado posicionar en Google?

Contrata mis servicios de Consultoría SEO.

Scroll al inicio

Suscríbete ahora y llévate mi Master Class gratuita para mejorar el posicionamiento de tus artículos.

Responsable: Rafael C. Labrador Villanueva Finalidad: envío de mis publicaciones y algunos correos comerciales. Legitimación: consentimiento del interesado. Destinatarios: tus datos estarán alojados en la plataforma de email marketing Active Campaign suscrita al acuerdo Privacy Shield, Derechos: podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos. Tienes más info en: https://rafalabrador.com/politica-de-privacidad/.

Master Class gratuita: Descubre cómo mejorar el posicionamiento de tus artículos y obtén resultados en 30 días.

Responsable: Rafael C. Labrador Villanueva Finalidad: envío de mis publicaciones y algunos correos comerciales. Legitimación: consentimiento del interesado. Destinatarios: tus datos estarán alojados en la plataforma de email marketing Active Campaign suscrita al acuerdo Privacy Shield, Derechos: podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos. Tienes más info en: https://rafalabrador.com/politica-de-privacidad/.