Las imágenes, a menudo no se tienen en cuenta para la optimización de las búsquedas en Internet. Sin embargo, son una parte enorme de nuestras páginas. De hecho, las imágenes suelen ser el recurso más grande o pesado que se carga en la página. Pero también en sentido figurado: las imágenes únicas de alta calidad son un bien valioso en las búsquedas y te ayudarán a situarte por encima de los competidores que utilizan imágenes de otros lugares.
La optimización de imágenes es uno de los puntos clave en la optimización del rendimiento web (WPO). El WPO se encarga de que las páginas carguen rápido y se pueda navegar de forma fluida, mejorando la experiencia de usuario (UX).
Tabla de Contenidos
1. Utiliza imágenes únicas y originales
El peligro más inmediato de utilizar imágenes ajenas es que puedes estar infringiendo los derechos de autor. En ese caso, te arriesgas a una serie de consecuencias, desde que te pidan que retires la imagen hasta incluso una multa. Por lo tanto, si no utilizas imágenes originales, asegúrate de que la licencia permite realmente su uso en tu sitio web. Hay imágenes libres pero sólo para usos no comerciales. Así que si es para tu negocio, asegúrate de que puedas utilizarlas para usos comerciales.
A Google le gusta las imágenes únicas. Cada vez que buscamos un producto o cualquier cosa en realidad, Google pretende mostrar el mayor número posible de imágenes diferentes de ese objeto. Así que, si eres un sitio web de comercio electrónico y estás usando las mismas imágenes de producto que todos los demás competidores, tus posibilidades de entrar en las SERP son muy escasas.
En cuanto Google tiene alguna opción, no hay una sola imagen repetida en la búsqueda, sino que profundiza para mostrar el producto desde el mayor número de ángulos posible. Si eres un proveedor de estas imágenes únicas, tus posibilidades de aparecer en las SERP de búsqueda mejoran notablemente.
2. Elige los formatos de imagen adecuados
Seguro que conoces los formatos JPEG y PNG para guardar imágenes. Llevan muchos años con nosotros. De hecho llevan tantos años que están dejando de ser los formatos más adecuados para tus imágenes. Hoy en día, los formatos más óptimos son AVIF, JPEG 2000, JPEG XR y WebP. Estos formatos aprovechan mejor la compresión y, por lo tanto, pueden hacerse más ligeros. Esto conlleva mejores tiempos de carga y una mejora general de la experiencia del usuario. Y recuerda: mejor experiencia de usuario: mejores posiciones en las búsquedas.
De los cuatro formatos de imagen mencionados, destaca el primero en WebP. Está considerado como el formato de imagen más universal para la web. Es compatible con la compresión con y sin pérdida, permite la transparencia, y puede ser animado. Esencialmente, es PNG, JPEG y GIF todo en uno. Además, los archivos WebP suelen ser entre un 25% y un 35% más ligeros que los PNG y JPEG de calidad similar. Y encima tiene el apoyo de Google, así que poco se puede discutir.
El único problema es que WebP todavía no es compatible por algunos navegadores más antiguos. Aunque hoy en día, desde que Safari se subió a bordo, el formato es realmente compatible en más del 90% de los navegadores. Aún así, si quieres ser muy cuidadoso, puedes configurar tus páginas para que sirvan WebP cuando el navegador lo soporte, y un formato diferente cuando no haya soporte. Así de sencillo, para aprovechar todo su potencial sin dejar de lado a los dispositivos más humildes o anticuados.
3. Comprime tus imágenes
Aunque los formatos de nueva generación ya son ligeros, puedes ahorrar aún más si pasas tus imágenes por un software de compresión.
Aquí tienes varias opciones, dependiendo de la plataforma de tu sitio web. Algunas plataformas de comercio electrónico comprimen las imágenes por defecto. Y otras como Wordpress, cuentan con una serie de plugins que comprimen las imágenes al vuelo, a medida que las subes o incluso comprimen las imágenes que ya estabas utilizando en tu sitio web con un proceso batch.
Si no quieres depender de los plugins, puedes comprimir tus imágenes externamente. Hay un montón de herramientas gratuitas en línea que realizarán esta tarea de una manera sencilla. Luego puedes descargar las imágenes comprimidas y subirlas a tu sitio web.
Por último, puedes pedir a tu diseñador que comprima las imágenes con editores gráficos o puedes hacerlo tú mismo si tienes conocimientos de diseño gráfico.
Aquí te muestro un ejemplo de compresión con la herramienta online TinyJPG.
Como se ve, los ahorros de tamaño suelen ser considerable. Sin perder calidad a la vista de los usuarios.
Está claro que no lo deberías comprimir si fueras a usar estas imágenes para editarlas o ampliarlas. Pero para usarlas en una web, no vas a ver cambios en la imagen a simple vista, pero vas a ahorrar bastante peso y tu web será más ligera. Lo cual lo agradecerá Google, pero también tus usuarios a los cuales les cargará mucho más rápido y ligero.
4. Especificar las dimensiones de la imagen
Cuando omites las dimensiones de las imágenes, el navegador necesitará algún tiempo tratando de averiguar el tamaño adecuado para tus imágenes en la pantalla. Desde el punto de vista del usuario, parecerá que los elementos de la página están bailando de un lado a otro y la página será inutilizable hasta que se estabilicen. Esto se llama desplazamiento de la disposición y es medido por Google como parte de la evaluación de la experiencia del usuario mediante sus Core Web Vitals.
Para evitar este problema, establece siempre las propiedades de anchura y altura de tus imágenes, de la siguiente manera:
<img src="chaqueta.jpg" width="640" height="360" alt="chaqueta de entretiempo de color negro" />
Con esta información, cualquier navegador obtendrá las dimensiones de tu imagen y reservará espacio suficiente en la página. Así, aunque tu imagen no se cargue inmediatamente, los demás elementos de la página no se pelearán por el espacio, lo que probablemente resolverá la mayoría de tus problemas de desplazamiento de la disposición.
5. Lazy load de imágenes
Otro truco relacionado con las imágenes que puede mejorar la experiencia del usuario es diferir las imágenes que quedan fuera de la pantalla. Básicamente, significa que no se cargan las imágenes hasta que se necesitan. Las imágenes de la parte superior se cargan de inmediato, mientras que las de la parte inferior que no son visibles al entrar en la página sólo se cargan cuando se desplaza hacia ellas.
A esto se le llama Lazy Load o carga perezosa de imágenes, aunque este término también se podría aplicar a otro tipo de recursos como vídeos o scripts.
Este enfoque libera más recursos para cargar la parte superior de la página, la que el usuario ve primero. Y da una impresión medible de que se carga una página más rápida.
6. Añadir el texto alternativo a las imágenes
El texto Alternativo (alt text) es un atributo de la imagen que contiene la descripción de la misma. Su propósito original es mostrarse cuando la imagen no puede cargarse o leerse en voz alta a los visitantes con problemas de visión para que la web sea más inclusiva.
En términos de SEO, sin embargo, el propósito del texto alternativo es describir la imagen al motor de búsqueda.
Un buen texto alternativo es el que describe la imagen con precisión, con suficientes detalles, pero sin rellenar con palabras clave.
Vamos a ver, por ejemplo, la siguiente imagen.
No tiene mucha historia la imagen, pero su texto alternativo está lleno de posibilidades.
Puede ser genérico:
<img src="faro.jpg" alt="faro">O puede estar sobre optimizado:
<img src="faro.jpg" alt="faro en un día nublado mar césped nubes árboles">O simplemente, puede estar correcto:
<img src="faro.jpg" alt="faro en el mar">Aunque los objetos se identifican correctamente, las definiciones son bastante genéricas y la interpretación de la imagen no es tan específica como el texto alternativo que puedo proporcionar uno mismo.
