¿Te gustaría aprender a optimizar imágenes para WordPress y así gustar más a Google? Con este tutorial podrás saber cómo hacerlo y mejorar la velocidad de carga de tu sitio, además de por consiguiente, mejorar su posicionamiento SEO.
Las imágenes son fundamentales en cualquier contenido web que goce de calidad, ya que nos permite visualizar de qué trata el mismo e ir separando los párrafos para que los lectores no se aburran al leerlo, contribuyendo a una mayor tasa de retención y por ende, un mejor posicionamiento del contenido.
Debemos tener en cuenta que reducir el tamaño de una imagen nos puede llevar a una reducción de su peso y también en muchas ocasiones a un empeoramiento de la calidad. Si queremos mostrar a nuestro visitante imágenes de calidad para dar un toque profesional a nuestra web, no podremos dejar a un lado la calidad de nuestras fotos.
¡Pero tranquilos! Hay muchas formas de comprimir el peso de una imagen sin que pierda su calidad y por eso te lo vamos a enseñar en éste post.
¿Por qué debemos optimizar y comprimir las imágenes?
Si no optimizamos las imágenes que subimos a nuestros WordPress, podemos ver gravemente afectada la velocidad de carga de la página web, ofreciendo así una mala experiencia al usuario que tras aburrirse de esperar, optará por visitar otras webs.
Según un estudio, las imágenes suponen alrededor del 40% del peso total de una página web, por lo que lo primero que debemos hacer al comenzar a optimizar un sitio online es reducir el tamaño de sus imágenes.
Te digo a continuación cuales son las 3 razones más evidentes por las que optimizar las imágenes de un sitio web:
Aumento de la velocidad de carga de la web
Como habíamos dicho anteriormente, no podemos hacer esperar a tus usuarios, debemos optimizar las imágenes para que se muestren cuanto antes, con una buena calidad para evitar tasas de rebote altas.
La web ocupará menos espacio en tu hosting
Con el espacio que ofrecen hoy los hostings es bastante complicado que alcances el límite de almacenamiento del mismo, pero tener suficiente espacio libre, permitirá al hosting cargar tu web con mayor velocidad.
De esta forma, si las imágenes se suben al hosting con un tamaño y peso adecuados, ocuparán menos espacio que en su formato inicial, lo que te evitará tener que migrar a un hosting superior si agotas los recursos que habías contratado.
Mejora el posicionamiento SEO en buscadores
Los sitios web con una carga lenta son mal vistos por Google y otros motores de búsqueda. Al optimizar tus imágenes, no solo mejorarás el rendimiento de tu página, sino también su posicionamiento en los resultados de búsqueda.
Con imágenes bien optimizadas, Google podrá rastrear y clasificar tus imágenes con mayor rapidez, lo cual puede resultar en un aumento del tráfico hacia tu sitio. Optimizar tus imágenes no tiene por qué ser complicado ni consumir mucho tiempo, y puede integrarse fácilmente en tu rutina habitual de publicación. No optimizar tus imágenes puede afectar negativamente el éxito de tu sitio web.
En las siguientes líneas, aprenderás cómo puedes optimizar tus imágenes para WordPress de una manera que mantenga la calidad sin comprometer el rendimiento.
¿Qué significa optimizar imágenes para páginas web?
Las imágenes de gran peso ralentizan la carga de tu página web y crean una experiencia de usuario negativa. Por ello, llamamos comprimir u optimizar imágenes al proceso que disminuye el tamaño de estos archivos ya sea de forma manual mediante herramientas online o a través de un plugin en Wordpress.
¿Cuál es el tamaño o peso ideal de una foto para web?
Seguramente para esta pregunta haya varias respuestas, pero por nuestra experiencia, el peso de una imagen web no debería ser superior a 100 KB siempre que la misma no sea muy grande o superior a 1200 píxeles. En el caso de que nuestra imagen sea muy grande, podemos ampliar el rango del peso hasta los 200 KB.
Siempre debemos comprimir el peso de las imágenes tomando como referencia principal su calidad.
7 Consejos para optimizar tus imágenes en WordPress
El principal objetivo a la hora de optimizar imágenes para páginas web es encontrar el punto de equilibrio entre su peso y su calidad. Debemos obtener una foto que pese poco y tenga una calidad aceptable.
Hay varias formas de comprimir el peso de una imagen, pero las más utilizadas son la compresión online o mediante un plugin. También es vital seleccionar un formato de archivo correcto y elegir el mejor tipo de compresión.
Sirve las imágenes a través de un CDN
Una red de distribución de contenidos (CDN) es una red global de servidores que acelera la entrega del contenido de tu sitio web, como imágenes, vídeos y hojas de estilo.
Utilizar una CDN en tu sitio de WordPress asegura que los visitantes obtengan los datos desde un servidor cercano a su ubicación.
Por ejemplo, si alguien visita tu sitio desde Indonesia, recibirá el contenido desde un servidor cercano, lo que disminuye el tiempo de carga.
Puedes configurar una CDN de manera independiente, como integrando Cloudflare con tu sitio de WordPress. Afortunadamente, algunos proveedores de hosting gestionado para WordPress incluyen una CDN en sus servicios.
La propagación de la CDN, es decir, el proceso de actualizar y distribuir tu contenido a todos los servidores de la red, puede llevar entre 24 y 48 horas.
Elige el formato del archivo de imagen correcto
Antes de comenzar con la optimización, asegúrate de elegir el formato de archivo adecuado. El tipo de archivo que elijas influirá en su tamaño total y en la capacidad de optimizar la imagen..
Existen varios tipos de archivos y por tanto, debemos escoger el mejor para nuestra web.
- JPEG: es el tipo de archivo de imagen de los más utilizados, es muy adaptable y se puede encontrar un equilibrio entre tamaño y calidad. Además podemos usar optimización con y sin pérdida (degradación de la imagen con pérdida de calidad).
- PNG: imágenes de mayor calidad aunque con un tamaño bastante mayor al JPEG.
- GIF: utiliza imágenes animadas o en movimiento hasta 256 colores. Solo utiliza la compresión sin pérdida de calidad.
- WEBP: nuevo formato que se está implantando en webs debido a su ventaja de pequeño tamaño pero su inconveniente de la incompatibilidad con algunos navegadores.
Como consejo importante, recomiendo utilizar desde ya el formato de imagen WEBP ya que es compatible con la mayoría de navegadores, además de ser un formato de imagen que comprime el peso, por lo que ocupa poco espacio a la vez que carga muy rápido.
Ejemplo de calidad de una imagen JPEG optimizada
Comprime tus imágenes
Al comprimir una imagen para WordPress, es crucial encontrar un equilibrio entre la calidad de compresión y el tamaño del archivo.
Si eliges una compresión mínima, obtendrás una imagen de alta calidad pero con un tamaño de archivo grande. Por otro lado, una compresión elevada reducirá significativamente el tamaño del archivo, aunque la calidad de la imagen podría verse comprometida.
El objetivo es encontrar el punto óptimo entre el tamaño del archivo y el nivel de compresión adecuado para tus necesidades.
Si tu sitio web depende de imágenes de alta calidad, como un sitio de fotografía, deberás dedicar tiempo para encontrar este equilibrio. Una vez establecida la configuración óptima de compresión, podrás aplicarla a todas las imágenes futuras.
A continuación, exploraremos herramientas para ordenadores, opciones online e incluso plugins específicos para WordPress que facilitan la compresión de imágenes sin perder calidad.
Herramientas de optimización de imágenes manuales
Las herramientas de escritorio ofrecen un mayor control sobre la configuración de optimización de imágenes. Si estás familiarizado con el uso de editores de fotos como Photoshop, es posible que prefieras este enfoque.
Algunas de las herramientas más populares para escritorio son:
- Adobe Photoshop: Incluye su propia herramienta integrada de compresión de imágenes que optimiza las imágenes para la web.
- Affinity Photo: Una opción más económica que Photoshop, con funciones integradas de compresión de imágenes.
- Paint.NET: Un editor de fotos para usuarios de Windows que es una sólida alternativa a Photoshop e incluye herramientas de compresión de imágenes.
- Gimp: Es una alternativa gratuita a Photoshop que tiene una curva de aprendizaje considerable, pero también ofrece funciones de optimización de imágenes.
Estas herramientas requieren cierto tiempo de aprendizaje, pero te permiten encontrar la configuración óptima de optimización de imágenes que mejor se adapte a tus necesidades.
¿Cómo optimizar una imagen para web en Adobe Photoshop?
La herramienta de pago Photoshop nos da la posibilidad de reducir el peso de imágenes de gran calidad para que las podamos subir a nuestro servidor con un tamaño más ligero y adaptado a la web.
Este programa nos da la opción de guardar imagen para web con el fin de optimizarla y poderla subir a internet sin que tenga demasiado peso. ¿Perdemos calidad con este guardado? Pues obviamente sí. Es lógico que si queremos reducir una imagen de 4 MB a 50 KB perderemos calidad pero obtendremos un equilibrio entre ésta y el tamaño del archivo.
Si queremos guardar una imagen para web en Photoshop deberemos irnos al menú archivo, exportar y pulsar sobre la opción «guardar para web…», aunque dependerá de tu versión instalada de Photoshop. También tenemos otra opción para llegar a este guardado usando un comando con las siguientes teclas: Alt+Mayus+Ctrl+S y obtendrás la opción de guardar para web.
Posteriormente deberemos seleccionar los ajustes para calibrar la calidad que necesitamos en nuestra imagen. Normalmente se suelen usar el tipo JPEG, aunque también la podremos optimizar en GIF, PNG y WebP. Mediante un control deslizante de 0 a 100 deberemos seleccionar el nivel de optimización para la imagen, siendo recomendable usar al menos el 30.
Herramientas para optimizar imágenes online gratis
Existen herramientas online que nos permiten comprimir imágenes sin necesidad de utilizar programas de escritorio y además hacerlo de manera gratuita. Estas herramientas solo necesitan cargar la imagen desde el almacenamiento interno de tu PC y en pocos segundos, optimizan la calidad-tamaño para que pueda ser subida a la web.
¿Cual es el mejor compresor de imágenes online?
Lo cierto es que sería difícil elegir solo uno, ya que a continuación, te voy a detallar las mejores herramientas de optimización de imágenes online:
Image Compressor
Esta es la herramienta más utilizada por mí. Simplemente deberemos cargar la imagen desde nuestro PC y la herramienta adaptará la compresión para ofrecer un equilibrio entre calidad y tamaño.
En caso de que queramos aplicar una mayor optimización, podremos deslizar la barra vertical que tendremos a la derecha de la imagen para seguir reduciendo su peso hasta el tamaño deseado.
Una vez tengamos el nivel de compresión requerido, nos mostrará el tamaño final de la imagen optimizada y la podremos descargar a nuestro escritorio.
Optimizilla
Con Optimizilla podremos subir hasta 20 imágenes para comprimir a la vez en formato JPEG o PND. El proceso es automático y podremos ir viendo qué va ocurriendo mientras que la tarea se va realizando hasta finalizar con la opción de poder descargar las imágenes optimizadas.
Obtendremos archivos con un menor peso y con una calidad muy similar a la imagen inicial.
Shrink Me
Compatible con imágenes JPEG y PNG, es tan fácil como arrastrar la imagen desde su ubicación al navegador pudiendo comprimir el archivo hasta el 60% con cambios apenas visibles.
Compressor.io
Puede reducir imágenes hasta el 90% de su tamaño con el único límite de que la misma no tenga un tamaño superior a 10 MB. Funciona igual que Shrink Me, arrastrando y soltando al imagen.
iLoveMG Compress Image
Es otra de las herramientas creadas por iLovePDF que nos permite comprimir imágenes del tipo JPG, PNG y GIF tanto si las tienes guardadas en tu PC como en la nube (Google Drive o Dropbox).
Convierte imágenes muy rápido, se descargan optimizadas automáticamente y la propia herramienta decide el nivel de compresión requerido para cada archivo.
TinyPNG
Otra herramientas más de gran calidad para optimizar imágenes PNG y JPG en la que solo tendrás que cargarlas (hasta un total de 20 archivos y 5 MG) y las comprimirá automáticamente para poderlas descargar en tu PC.
Plugins de Wordpress para optimizar imágenes
Gracias a Wordpress, no tendremos que hacer el trabajo de compresión manual ya que existen varios plugins que hacen éste trabajo con solo subir la imagen al CMS.
Además, no solo optimizará imágenes subidas después de la instalación del plugin, sino que una vez los instalemos, estos harán un análisis global de tu pagina web buscando imágenes sin comprimir para hacerlo.
Si aconsejamos no cargar imágenes superiores a los 2 MB de peso en Wordpress, ya que podías consumir rápidamente el espacio disponible en tu hosting.
El mejor sistema de optimización sería comprimirlas con las herramientas online para después subirlas a tu Wordpress con estos plugins instalados y que se ajuste aún más la compresión.
¿Cuáles son los mejores plugins para optimizar imágenes en Wordpress?
Imagify Image Optimizer
Imagify (gratuito y premium) fue creado por el mismo equipo de WP Rocket y además es compatible tanto con Wordpress como con su plugin Woocommerce. Optimizar las imágenes de productos es esencial para el posicionamiento de los mismos.
Se pueden optimizar las imágenes en bloque eligiendo 3 niveles de compresión y en caso de no quedar satisfecho con el resultado, tiene una opción para deshacer los cambios.
ShortPixel Image Optimizer
Shortpixel es un plugin gratuito capaz de optimizar 100 imágenes al mes compatible con formatos JPG, GIF, PNG y WEbP. Funciona subiendo las imágenes a su servidor para comprimirlas y posteriormente las devuelve a tu sitio web para sustituirlas por las originales.
Permite crear una copia de seguridad de las imágenes originales para retroceder al inicio en caso de no te guste cómo ha quedado alguna fotografía.
WP Smush
WP Smush es un plugin de Wordpress con versión gratuita y de pago (Pro). Escanea las imágenes de tu web para reducirlas cuando las carga en tu sitio, además de comprimir las imágenes ya subidas anteriormente.
Es capaz de trabajar hasta con 50 imágenes a la vez pero está limitado a funcionar con archivos inferiores a 1 MB. Es compatible con plugins de biblioteca multimedia como por ejemplo WP All Import. Realiza la optimización de imágenes sin pérdida (mantiene calidad de la imagen).
Ajuste del tamaño de las imágenes para una visualización óptima
Antes de optimizar tus imágenes, es útil redimensionarlas adecuadamente. No tiene sentido cargar una imagen enorme en tu sitio si de todos modos será redimensionada.
Ajusta las dimensiones de tus imágenes antes de subirlas para evitar problemas con archivos demasiado grandes desde el inicio.
Por ejemplo, si necesitas una imagen de 300 × 300 píxeles, no cargues una imagen de 3000 × 3000 píxeles y luego dependas de que tu tema de WordPress la redimensione automáticamente.
Esto no solo consumirá más ancho de banda, sino que también ralentizará la carga de la página.
El método más efectivo es conocer las dimensiones requeridas por tu tema y ajustar tus imágenes en consecuencia antes de optimizarlas con una herramienta adecuada y luego subirlas.
Asegúrate de que las imágenes estén correctamente recortadas
WordPress cuenta con un editor de imágenes integrado que te permite recortar imágenes directamente desde tu escritorio.
Aunque esta función puede resultar útil, es recomendable recortar las imágenes antes de optimizarlas y subirlas.
Si determinas que una imagen necesita ser recortada para ajustarse mejor a tu sitio, elimínala de tu sitio web, realiza el recorte necesario y luego vuelve a cargarla.
Realizar demasiadas ediciones directamente en el escritorio puede resultar en la creación de múltiples versiones del mismo archivo, lo que aumenta la carga en tu servidor y el tamaño total de tu sitio.
Utiliza Page Speed Insights para encontrar problemas de carga de imágenes
Si aún no has utilizado PageSpeed Insights para evaluar la carga de tu sitio web, ¿a qué esperas? Obtendrás información crucial sobre el rendimiento de tu página y podrás identificar los puntos críticos que pueden afectar su visibilidad en Google y otros buscadores.
Si tomamos como ejemplo una tienda WooCommerce donde regularmente se publican nuevos productos, a menudo, estas imágenes se realizan desde dispositivos móviles con tamaños mínimos de 2 o 4 MB, a veces incluso más, y se cargan en la tienda «sin optimizar».
Si usamos la herramienta Google Page Speed, podemos detectar imágenes no optimizadas y nos muestra cuánto tiempo de carga puede ahorrar, además de espacio.
Si eres de los que optimizan correctamente sus imágenes antes de cargarlas en la tienda, los usuarios no deberían experimentar problemas al visitarla y explorar los productos. En este caso, PageSpeed podría simplemente no mostrar avisos si detecta que las imágenes están bien optimizadas.
¿Ves la diferencia? La optimización es crucial para garantizar que tus contenidos no solo sean efectivos, sino también rápidos de cargar, lo que mejora la experiencia del usuario.
Mejorar el SEO de las imágenes
¿Sabías que puedes optimizar tus imágenes para ayudar a que tu sitio web y tus imágenes se posicionen mejor en los motores de búsqueda?
Optimizar las imágenes no solo acelera tu sitio web, sino que también mejora tus posibilidades de posicionamiento. Sin embargo, hay algunos pasos adicionales que puedes seguir para mejorar el SEO de tus imágenes.
Sigue estos pasos para optimizar el SEO de tus imágenes:
Optimiza el título de la imagen
El título de la imagen aparecerá cuando un usuario pase el cursor sobre ella. Aunque no tiene un impacto significativo en el SEO, este pequeño detalle puede mejorar la experiencia del usuario.
Para cambiar el título de la imagen, ve al editor de entradas donde has insertado la imagen. Selecciona la imagen y haz clic en el icono de edición (un lápiz) que aparecerá como opción ‘Editar’.
Agrega la etiqueta ALT
El texto alternativo de la imagen proporciona a Google información sobre el contenido de tu página.
Si tienes varias imágenes en una página, asegúrate de que la primera imagen contenga tu palabra clave principal. Las siguientes imágenes pueden utilizar variaciones de esa frase clave, manteniéndose relevantes para cada imagen.
Para modificar el texto alternativo de una imagen, dirígete al editor visual y pasa el cursor sobre la imagen insertada. Haz clic en el icono de edición (un lápiz) y selecciona ‘Editar’.
En la ventana que se abre, busca el campo llamado ‘Texto alternativo’ y escribe tu palabra clave principal o una variación relacionada.
Nombre apropiado del archivo de la imagen
El nombre del archivo de la imagen puede influir en tu posicionamiento en la búsqueda de imágenes de Google, lo que puede generar tráfico adicional hacia tu sitio web.
Antes de subir la imagen a WordPress, tómate un momento para elegir un nombre de archivo apropiado que incluya tu palabra clave principal o describa claramente el contenido de la imagen.
Asegúrate de usar guiones (-) entre las palabras en lugar de espacios, ya que Google interpreta los guiones como espacios. De lo contrario, las palabras aparecerán juntas y el nombre del archivo no será legible.
A3 Lazy Load – Plugin para posponer la carga de imágenes
A3 Lazy Load es uno de los mejores plugins gratuitos para retrasar la carga de imágenes en WordPress. Aunque quizás no sea el más conocido, cuenta con más de 100.000 instalaciones y está muy bien valorado con una calificación media de 4,3 .
La característica principal de A3 Lazy Load, y por la cual está incluido en esta lista de plugins para optimizar imágenes en WordPress, es que posterga la carga de imágenes y vídeos hasta que sean visibles para el usuario. WordPress, de manera predeterminada, carga todo el contenido primero y luego lo muestra, lo cual puede ralentizar significativamente los tiempos de carga.
Algunas características destacadas de A3 Lazy Load son:
- La carga diferida de imágenes se aplica a todo tipo de contenido y ubicaciones: páginas, entradas, barra lateral (sidebar), pie de página (footer) o avatares.
- Permite la carga diferida de vídeos incrustados desde plataformas como YouTube, Vimeo o HTML5.
- Es completamente compatible con WooCommerce, WordPress AMP y plugins de caché como WP Super Cache o Total Cache.
Conclusiones finales para optimizar imágenes como un PRO.
- Antes de subir tus imágenes a Wordpress, asegúrate de haberlas optimizado mediante las herramientas online que hemos visto antes.
- Si ya tienes imágenes subidas a Wordpress sin optimizar, tienes la opción de volverlas a resubir cambiando su nombre y compriéndolas con las herramientas online.
- Utiliza imágenes de formato JPG y PNG siempre que puedas o nuevos formatos como los WebP.
- Elimina las imágenes de la biblioteca de Wordpress que no estés usando en tu sitio web para disponer del espacio ocupado.
- Sube las imágenes a Wordpress con el tamaño que deseas que se muestren en tu página web para evitar tener que ser redimensionadas.
- No olvides rellenar el atributo ALT para comunicar a Google de qué trata la imagen que estás mostrando en tu web.
- Trabaja con el sistema Lazy Load para retrasar la carga de las imágenes y acelerar la velocidad de carga del sitio.
Preguntas Frecuentes sobre optimización de imágenes en Wordpress (FAQs)
¿WordPress comprime las imágenes por sí solo?
¡Correcto! Desde la versión 4.5, WordPress aplica una compresión automática a las imágenes con un 82% de su calidad original. Si bien esto ayuda un poco, no es suficiente para sacarle el máximo provecho a la velocidad de tu sitio. Para un impulso real, te recomiendo echar un vistazo a los métodos que te explico más abajo.
¿De qué tamaño deben ser mis imágenes en WordPress?
Para cada tipo de imagen en WordPress, hay un tamaño ideal:
- Imágenes de entradas de blog: 1200 x 630 píxeles
- Encabezados: 1048 x 250 píxeles
- Miniaturas: 150 x 150 píxeles
- Logotipos: 200 x 100 píxeles
- Imágenes destacadas: 1200 x 900 píxeles (horizontal) o 900 x 1200 píxeles (vertical)
- Imágenes de fondo: 1920 x 1080 píxeles
¿Cuál es el mejor optimizador de imágenes para WordPress?
En el mundo de la optimización de imágenes para WordPress, no hay un único ganador definitivo. Lo ideal es que busques un optimizador que te ofrezca funciones de compresión y optimización para mejorar la velocidad de tu sitio web. ¡Ten en cuenta tus necesidades específicas para elegir el mejor aliado!
¿Puedo optimizar mis imágenes sin plugins?
¡Claro que sí! Si eres un manitas, puedes optimizar tus imágenes de WordPress sin necesidad de plugins. Para ello, solo tienes que:
- Ajustar las dimensiones: Redimensiona las imágenes al tamaño adecuado antes de subirlas.
- Comprimirlas: Utiliza herramientas online para reducir el peso de tus imágenes sin sacrificar calidad.
- Optimizar nombres de archivo y etiquetas alt: Elige nombres descriptivos y utiliza etiquetas alt relevantes para mejorar el SEO de tus imágenes.
- Implementar la carga lenta: Carga las imágenes solo cuando sean necesarias para mejorar el tiempo de carga de la página.
