8 pasos para optimizar imágenes Wordpress

Por suerte, existen muchas herramientas gratuitas disponibles que pueden ayudarte a optimizar tus imágenes Wordpress. En este artículo, exploráremos varias de estas herramientas, que incluyen desde herramientas para redimensionar y recortar imágenes hasta herramientas para comprimir imágenes sin perder calidad y para cambiar el formato de las imágenes a Webp. También veremos otras acciones que puedes realizar para mejorar la optimización de tus imágenes, como el uso del texto alternativo y de la carga diferida de imágenes a través de un plugin.

Existen herramientas que hacen varias de estas acciones al mismo tiempo pero son de pago, en este artículo mencionaremos herramientas con versiones gratuitas. ¡Sigue leyendo para descubrir cómo puedes mejorar la velocidad de carga de tu sitio web y la experiencia del usuario gracias a estas herramientas gratuitas para optimizar imágenes!

1. Redimensionar la imagen

Redimensionar una imagen es la tarea más importante a realizar para optimizar imágenes Wordpress. Una imagen grande que no ha sido redimensionada puede ralentizar significativamente el tiempo de carga de la página, lo que afecta negativamente la experiencia del usuario. Por otro lado, una imagen demasiado pequeña puede verse borrosa o pixelada, lo que también puede afectar la experiencia del usuario.

Es importante que las imágenes que subas a tu sitio web tengan un tamaño adecuado al espacio que van a ocupar en la página. Por ejemplo, una imagen para el encabezado del sitio web debería tener una resolución mucho mayor que una imagen en la sección de noticias de un blog. Si vas a usar una misma imagen en varios lugares de tu web, quizás sea recomendable subir varias versiones de la misma adaptada a los distintos espacios que va a ocupar en cada lugar.

A continuación, te mostramos algunas medidas recomendadas para diferentes espacios de una página web:

• Encabezado del sitio web o imágenes que ocupen toda la pantalla: Entre 1500 y 2000 píxeles de ancho y 400 a 600 píxeles de alto.
• Imágenes para la sección de noticias o cuerpo del artículo: Entre 800 y 1200 píxeles de ancho.
• Imágenes para miniaturas de la página de inicio: Entre 150 y 400 píxeles de ancho.
• Imágenes para productos: La imagen principal del producto debe tener una dimensión de al menos 800 píxeles de ancho y 800 píxeles de alto y las imágenes adicionales del producto, como las galerías de imágenes, deben tener una dimensión de al menos 600 píxeles de ancho y 600 píxeles de alto.

Recuerda que no se recomienda superar las 1920 píxeles de ancho para las imágenes que se van a utilizar en la web. Además, debes asegurarte de que las imágenes no pesen demasiado, ya que esto puede afectar negativamente el tiempo de carga de la página. Utiliza herramientas de redimensionado de imágenes, como ResizePixel o Image Resizer for Windows para redimensionar tus imágenes gratis y rápido.

En resumen, es importante que redimensiones tus imágenes antes de subirlas a tu sitio web y que ajustes su tamaño de acuerdo al espacio que van a ocupar. Esto mejorará la velocidad de carga de tu sitio web y proporcionará una experiencia de usuario óptima.

2. Geolocalización de la imagen

La geolocalización de imágenes es una técnica de optimización de SEO local para optimizar imágenes Wordpress que consiste en añadir datos de ubicación a las imágenes que se utilizan en una página web. La geolocalización se utiliza para informar a los motores de búsqueda sobre la ubicación física de la imagen y mejorar la visibilidad en los resultados de búsqueda local.

Las principales ventajas de la geolocalización de imágenes son:

1. Mejora del SEO local: Cuando se utiliza la geolocalización de imágenes, los motores de búsqueda pueden identificar la ubicación de una empresa o negocio y mostrarla en los resultados de búsqueda local. Esto es especialmente importante para los negocios locales, ya que puede aumentar la visibilidad en los resultados de búsqueda y, en consecuencia, atraer más tráfico y clientes potenciales.
2. Mayor relevancia de la imagen: Cuando se geolocaliza una imagen, se agrega información valiosa para el usuario que puede aumentar su relevancia. Los usuarios pueden encontrar fácilmente imágenes relevantes para una ubicación específica, lo que aumenta la satisfacción del usuario y mejora la experiencia del usuario en el sitio web.
3. Mejora del rendimiento de la página: La geolocalización de imágenes puede mejorar el rendimiento de la página en las búsquedas móviles. Esto es importante, ya que cada vez más usuarios utilizan dispositivos móviles para buscar información local. La geolocalización de imágenes puede ayudar a que el sitio web sea más fácilmente identificable y accesible para los usuarios móviles.

Esta práctica es especialmente recomendable para negocios locales o que quieran vender sus productos o servicios en una zona geográfica específica, ya que mejora considerablemente el SEO local. Para hacerlo recomendamos la herramienta GeoImgr, ya que es la única gratuita y efectiva que hemos probado. Su único inconveniente es que hay que registrarse para usarla y tiene un límite diario de 5 imágenes.

Nota importante: Si el producto o servicio que vendes no va dirigido a una ubicación específica (por ejemplo: tienda online que vende en toda España) quizás no te interese geolocalizar las imágenes en una zona geográfica concreta ya que estarás enviando «mensajes contradictorios» a Google (vendo en toda España pero todas las imágenes están geolocalizadas en Bilbao, raro ¿no?) además de estar aumentando el peso de la imagen con datos irrelevantes o que no van a ayudarnos con nuestro objetivo.

3. Convertirla al formato WEBP

Webp es un formato de imagen relativamente nuevo que está causando un gran impacto en el mundo de la compresión de imágenes. Fue desarrollado por Google y es recomendado en los test de velocidad y optimización web de Google. Se considera el futuro de los formatos de imagen debido a su capacidad para reducir significativamente el tamaño del archivo sin perder calidad. En Nireweb estamos 100% enfocados en posicionar las webs en Google, por lo que seguimos al pie de la letra todas sus recomendaciones para optimizar imágenes Wordpress.

Las principales ventajas de servir imágenes en formato Webp frente a otros formatos de imagen son las siguientes:

1. Tamaño de archivo más pequeño: Webp puede comprimir imágenes sin pérdida de calidad, lo que resulta en un tamaño de archivo mucho más pequeño que otros formatos como JPEG o PNG.
2. Mejora del rendimiento de la página: Al reducir el tamaño de archivo, Webp puede mejorar significativamente el tiempo de carga de la página y la velocidad de navegación.
3. Mejora de la experiencia del usuario: Las imágenes en formato Webp tienen una calidad visual superior a un tamaño de archivo similar, lo que mejora la experiencia del usuario y proporciona una sensación más fluida al navegar por la página.
4. Mayor compatibilidad con dispositivos móviles: Webp es especialmente efectivo en dispositivos móviles (lo cual es fundamental ya que más del 80% de las búsquedas se hacen desde móviles), ya que reduce la carga de datos y mejora el rendimiento de la página. Además, es compatible con dispositivos Android y algunos navegadores móviles de iOS.

Existen muchas herramientas gratuitas para convertir nuestras imágenes al formato WEBP pero nosotros recomendamos Convertio.es por su facilidad de uso, rapidez y porque nos permite transformar imágenes a WEBP desde cualquier formato. Su único inconveniente es que tiene un límite de 10 imágenes diarias en la versión gratuita.

4. Comprimir la imagen sin que pierda calidad

La compresión de imágenes es una técnica importante para optimizar imágenes Wordpress antes de subirlas. La compresión permite reducir el tamaño de archivo de la imagen sin comprometer la calidad visual, lo que tiene una serie de ventajas para la velocidad de carga y la experiencia del usuario en el sitio web.

La importancia de comprimir una imagen antes de subirla a la web se puede resumir en los siguientes puntos:

1. Mejora de la velocidad de carga: Las imágenes sin comprimir pueden tener un tamaño de archivo muy grande, lo que puede ralentizar significativamente la velocidad de carga de la página. La compresión de imágenes reduce el tamaño de archivo, lo que a su vez mejora la velocidad de carga de la página y la experiencia del usuario.
2. Ahorro de ancho de banda: Las imágenes sin comprimir pueden consumir mucho ancho de banda, lo que puede resultar en cargos adicionales si se excede el límite de ancho de banda proporcionado por el proveedor de alojamiento web. La compresión de imágenes puede reducir significativamente el uso de ancho de banda, lo que puede ahorrar dinero en costos de alojamiento web.
3. Mejora de la experiencia del usuario: Las imágenes sin comprimir pueden ralentizar la velocidad de carga de la página y disminuir la experiencia del usuario. La compresión de imágenes puede mejorar significativamente la velocidad de carga de la página, lo que a su vez mejora la experiencia del usuario y reduce la tasa de rebote.

Existen multitud de herramientas y páginas web para comprimir las imágenes, después de haber probado varias os recomendamos TinyPNG o Compressor.io ya que son fáciles de usar, no requieren de registro y, por supuesto, son gratuitas. Es recomendable que las imágenes no pesen más de 100 KB al subirlas a la web.

Nota importante: Si has geolocalizado la imagen (paso 2) debes de tener cuidado con la compresión ya que esta puede eliminar los datos EXIF de la imágen y con ello la geolocalización. Si vas a comprimir una imagen geolocalizada con datos EXIF te recomendamos usar Compressor.io ya que este compresor conserva estos datos tras la compresión. Además, asegúrate de que la imagen está en formato JPG, PNG o WebP ya que otros formatos de imagen pueden no ser compatibles con los datos EXIF que agrega la geolocalización de imágenes.

5. Renombrar los archivos de imagen para incluir palabras clave relevantes

Renombrar los archivos de imagen para incluir palabras clave relevantes es una práctica importante para mejorar el posicionamiento SEO de tu sitio web y optimizar imágenes Wordpress. Cuando se sube una imagen con un nombre genérico, como «imagen1.jpg», Google no tiene ninguna información sobre el contenido de la imagen. Sin embargo, si se renombra el archivo con palabras clave relevantes, como «camisa-roja-manga-corta.jpg», el motor de búsqueda puede utilizar esta información para indexar y clasificar la imagen en los resultados de búsqueda y que la imagen aparezca en Google Imágenes.

Además, los nombres de archivo descriptivos y relevantes pueden ayudar a los visitantes de tu sitio web a entender mejor el contenido de la imagen y a encontrarla más fácilmente. Por ejemplo, si un visitante está buscando imágenes de camisas rojas de manga corta, es más probable que haga clic en una imagen con un nombre de archivo descriptivo como «camisa-roja-manga-corta.jpg» que en una imagen con un nombre genérico como «imagen1.jpg».

Para elegir el nombre de archivo adecuado es recomendable hacer un estudio de palabras clave previo y tener en cuenta en qué página se va a usar dicha imagen y que palabras clave está atacando para que haya una congruencia entre la palabra clave que está atacando el contenido de la página y la imagen. Por otro lado, es importante destacar que no se debe abusar del uso de palabras clave en los nombres de archivo, ya que esto puede ser considerado como «keyword stuffing» y penalizado por los motores de búsqueda. Por lo que es mejor que un profesional te asesore en esta tarea.

6. Usar texto alternativo o Alt Text

Utilizar texto alternativo, también conocido como «alt text», es una práctica importante para mejorar la accesibilidad de tu sitio web, para mejorar el SEO y para optimizar imágenes Wordpress.. El texto alternativo es una descripción textual que se muestra en lugar de una imagen en caso de que la imagen no se pueda mostrar o si el usuario está utilizando un lector de pantalla.

Al agregar texto alternativo a tus imágenes, no sólo mejoras la accesibilidad para los usuarios con discapacidades visuales, sino que también proporcionas información adicional sobre el contenido de la imagen para los motores de búsqueda. Los motores de búsqueda no pueden «ver» las imágenes, por lo que utilizan el texto alternativo como una indicación del contenido de la imagen.

Al escribir el texto alternativo, es importante ser descriptivo y utilizar palabras clave relevantes. Evita utilizar texto genérico o sin sentido como «imagen1» o «foto». En su lugar, describe el contenido de la imagen de manera clara y precisa. Por ejemplo, si la imagen es de un par de zapatos rojos, utiliza un texto alternativo como «Zapatos de tacón rojos con correa».

Para elegir el texto alternativo adecuado es recomendable hacer un estudio de palabras clave previo y tener en cuenta en qué página se va a usar dicha imagen y que palabras clave está atacando para que haya una congruencia entre la palabra clave que está atacando el contenido de la página y la imagen. Por otro lado, es importante destacar que no se debe abusar del uso de palabras clave en los textos alternativos, ya que esto puede ser considerado como «keyword stuffing» y penalizado por los motores de búsqueda. Por lo que es mejor que un profesional te asesore en esta tarea.

Para añadir texto alternativo a una imagen no necesitas ninguna herramienta, es algo que se puede hacer fácilmente desde el propio Wordpress en la sección de «Medios».

7. Carga diferida de imágenes o Lazy Load

La técnica de carga diferida, también conocida como «lazy load», es una técnica utilizada para retrasar la carga de las imágenes en una página web hasta que sean necesarias o visibles en la pantalla del usuario. En otras palabras, en lugar de cargar todas las imágenes al mismo tiempo, se cargan a medida que el usuario se desplaza hacia abajo en la página.

La carga diferida puede ser muy útil para las páginas web que tienen muchas imágenes grandes y que tardan en cargar. Al retrasar la carga de las imágenes que no se muestran en la pantalla del usuario, se reduce el tiempo de carga total de la página y se mejora la experiencia del usuario. Además, esta técnica también puede ayudar a reducir el uso de ancho de banda y a disminuir la carga en el servidor.

La utilización de esta técnica es altamente recomendable para mejorar la velocidad de carga de la página, mejorar la experiencia del usuario y optimizar imágenes Wordpress. En WordPress, existen varios plugins que pueden ayudar a implementar la técnica de carga diferida, como WP Rocket o Smush Pro (que aunque sean de pago son los mejores en nuestra opinión). Si buscas uno gratuito Autoptimize puede servirte.

8. CDN para servir las imágenes en Wordpress

Un servicio de red de distribución de contenido (CDN) es una red de servidores ubicados en diferentes ubicaciones geográficas que se utilizan para distribuir contenido web, como imágenes y otros archivos multimedia, a los usuarios finales de manera más rápida y eficiente. Cuando un usuario solicita una imagen en tu sitio web, la solicitud se dirige al servidor más cercano en la red de CDN, en lugar de tener que viajar a través de la red global de internet hasta llegar al servidor de origen, lo que reduce el tiempo de carga y mejora la velocidad de tu sitio web.

Al utilizar un servicio de CDN para tus imágenes, reduces la carga en tu servidor, lo que significa que tu sitio web puede manejar más tráfico sin experimentar una ralentización en el tiempo de carga. Además, como las imágenes se entregan desde el servidor de CDN más cercano al usuario final, se reduce la latencia y se mejora la experiencia del usuario.

En resumen, utilizar un servicio de CDN para tus imágenes es una buena práctica para mejorar la velocidad de carga de tu sitio web y reducir la carga en tu servidor, lo que puede mejorar la experiencia del usuario y la clasificación en los motores de búsqueda.

El uso del CDN es bastante complejo y, además de su instalación, requiere de un correcto mantenimiento web para funcionar. En Nireweb lo ofrecemos en prácticamente todos nuestros planes de mantenimiento. Para esta tarea recomendamos los CDN de Bunny o Cloudflare.

Nuestra opinión: Optimizar imágenes Wordpress

El proceso de optimización de una imagen puede ser muy largo y hay que seguir necesariamente todos los pasos antes de subirlas (solo si quieres hilar fino de verdad); pero sí que recomendamos como mínimo redimensionarlas (punto 1), comprimirlas (punto 4), hacer uso de un CDN y de la carga diferida (puntos 7 y 8).

Las imágenes son una parte fundamental de cualquier página web y subirlas de cualquier manera es un error bastante grave que terminará lastrando el posicionamiento SEO de nuestra web. Cada vez más usuarios entran desde dispositivos móviles y unas imágenes lentas y pesadas pueden arruinar completamente la experiencia de usuario, especialmente en estos dispositivos.

Otra opción es ocultar algunas de las imágenes de la web para dispositivos móviles con CSS (es decir, que sí se vean en PC y tablet pero aparezcan ocultas en móviles), esto puede facilitar la navegación de usuario y acelerar la velocidad de carga considerablemente.

La mayoría de estos pasos no son extremadamente difíciles de realizar incluso para usuarios sin experiencia en Wordpress o programación pero requieren de bastante tiempo. En Nireweb nos tomamos nuestro tiempo para seguir todos estos pasos en el diseño web Wordpress e incluimos CDN y carga diferida mediante los mejores plugins del mercado con nuestro mantenimiento web.