Optimización de imágenes: por qué y cómo afecta al SEO

El tiempo de carga de las imágenes puede afectar la velocidad de un sitio web. Te contamos cómo deberías subir imágenes a Internet.
Share Button

¿Has considerado alterar el peso, las dimensiones y los atributos de las imágenes que subes a tu sitio web? Podrías estar perdiendo visitantes por no hacer una mínima optimización de imágenes. Te contamos por qué.

Ponte en el lugar de un usuario que visita tu sitio. Él hasta ahora conoce por primera vez tu empresa, y lo va a hacer porque de alguna forma encontró tu URL. En este momento no importa si fue por medio de un buscador, o porque llegó directamente desde la barra de direcciones. Más adelante vamos a ver por qué es importante esto para los buscadores. Mientras tanto, regresemos a la situación: tu visitante está en su computador, va a cargar tu sitio y pasan 5, 10, 15 segundos y nada que el sitio carga. Simplemente aparece una pantalla en blanco, y el navegador aparentemente está pensando. Supongamos que tu visitante se cansó de esperar a los 20 segundos, mientras que si se hubiera esperado, solo hasta los 30 se hubiera cargado todo el contenido. Te preguntarás, ¿por qué el título de este artículo? ¿qué tiene que ver la optimización de imágenes con el posicionamiento SEO?

Vamos por partes. Lo primero es que no nos podemos dar el lujo de que nuestro sitio tarde mucho tiempo en cargar. Ya hicimos lo más difícil que era conseguir quizás un cliente potencial que estaba interesado en conocer lo que le podíamos ofrecer desde nuestro sitio: ¿información?, ¿algún producto?, ¿algún servicio? Sea cual sea la respuesta, seguramente todos estamos de acuerdo con que si tenemos un sitio web es para que reciba visitas, darnos a conocer y ojalá generar conversiones, no solo para poner la dirección en una tarjeta de presentación o en la firma de un correo electrónico. Recordemos cómo la web bien utilizada se puede convertir en un canal de ventas muy efectivo, si lo utilizamos como tal.

Pero si por el contrario cometemos de entrada el error de que nadie entre a nuestro sitio web por el exagerado tiempo de carga, difícilmente vamos a conseguir que alguien llegue a ver nuestra información. Una de las muchas razones por las que un sitio puede demorarse en cargar es porque tiene imágenes muy pesadas, y esto hace que todo el sitio sea muy pesado. En últimas esta es la causa de que, como decíamos más arriba, un visitante se canse de esperar 30 segundos sin que el sitio haya terminado de cargar, y termine abandonándolo. ¿El resultado? Un cliente potencial menos de tu tienda en línea o un lector menos de tu blog.

Esta imagen muestra los atributos de una fotografía que pesa cerca de 2Mb y en formato PNG.

En esta imagen podemos ver 2 errores muy comunes: el formato PNG y que pesa cerca de 2Mb.

Afortunadamente hay alternativas para evitar este problema. Entre ellas, lo primero que debemos tener en cuenta es que las imágenes deben ser muy livianas en lo posible. Entre una foto de 6 Mb y de 12 Megapixeles; y una de 100 Kb y solo 800 pixeles, ¿cuál crees que se va a demorar cargando más en un celular? Con la primera seguramente, además le estarás dando un duro golpe al paquete de datos del móvil de la persona que te está visitando. Con la segunda, en cambio, que es más liviana y tarda menos tiempo en cargar, lo más probable es que cargue solo en unos segundos y le dejes una muy buena impresión a ese visitante.

Lo anterior suele pasar porque la persona que construyó el sitio por lo general es alguien que sabe de diseño, pero que no tiene conocimientos básicos de posicionamiento SEO en buscadores. Acá lo que hay que saber respecto a este tema es que uno de los puntos que Google va a tener en cuenta al momento de posicionar a un sitio entre los primeros resultados es el tiempo de carga y el porcentaje de rebote (porcentaje de rebote entendido como el porcentaje de usuarios que abandona el sitio antes de que termine de cargar). Si nuestro sitio carga en 4 segundos en un celular, eso es una señal ante Google de que lo estamos haciendo bien y que merecemos ser premiados con una buena posición entre los SERP, los primeros resultados de una búsqueda.

En qué nos debemos fijar cuando subamos una imagen

Por supuesto no todo depende del tiempo de carga de una foto, pero es algo que tendremos que considerar cada vez que subamos una foto en nuestro sitio. Así que olvídate de las fotos con transparencias en formato PNG de 3.000 pixeles y con un peso de 6 Mb. Procura que sean muy livianas: JPG y del mismo ancho que vas a manejar en tu sitio web. Por ejemplo en este blog el ancho de todas las fotos es de 800 pixeles, y procuramos bajarle la calidad al máximo sin que se llegue a notar. Te aseguro que tu sitio cargará más rápido.

Por otra parte, hay otros aspectos que a simple vista no vamos a ver, pero que son igual de importantes, los atributos: como el título de la foto o sus descripciones.

Por ponerte un ejemplo, haz de cuenta que subes una foto que se llama 009UYG56.jpg en tu página de flores. Ahora supón que tu competencia subió una foto que se llama ventas-y-arreglos-florales-bogota.jpg. Muy diferente, ¿no? La segunda le está diciendo a Google que la página donde está contenida esa imagen habla de flores. La primera no dice nada, a menos que veamos sus etiquetas.

En esta imagen podemos ver los títulos y etiquetas ALT en formato html de una imagen de ejemplo.

Quizás veas compleja esta imagen por contener código, pero las etiquetas son realmente fáciles de modificar. Y mucho más si utilizas algún tipó de gestor de contenidos como WordPress.

Las etiquetas, más exactamente las etiquetas ALT en este caso, son las que le van a decir al navegador cuando no pueda cargar una imagen. Estas van a servir para entregarle aún más información a los robots del buscador que nuestro sitio es sobre este tema, y no sobre otro. Por ejemplo, hay un navegador llamado Lynx que solo funciona en Linux y que sirve para previsualizar un sitio como si fuera solo texto, que es lo más cercano a como Google ve nuestro sitio. Si vamos a donde debería haber una imagen, vamos a encontrar que vamos a tener unas líneas de texto que describen la imagen que debería ir ahí.

lynx-posicionamiento

Más o menos así vería Google tu sitio, así que no te preocupes únicamente por el diseño para los visitantes de tu sitio, sino para los robotos y las arañas de los buscadores van a ver también.

Caso aplicado: Instagram también optimiza imágenes

Esta es una imagen que subí a mi perfil de Instagram. Esta tiene un tamaño, unas dimensiones y un formato muy liviano.Para terminar, déjenme poner un ejemplo práctico y más familiar sobre el tema de optimización de imágenes. Piensen en Instagram, la aplicación y red social para celulares de compartir fotografías. Cada foto no se demora cargando más de 1 segundo, incluso utilizando un plan de datos. Imagínense si el tiempo de carga fuera de 3 o más segundos. El éxito  de Instagram quizás no hubiera sido tan impactante y Facebook no la hubiera comprado en $1.000 millones de dólares. ¿Por qué? Nadie va a perder su tiempo bajando una aplicación lenta.

Al respecto hice una prueba y comparé: ¿cuánto pesa una foto tomada con el celular en su máxima resolución y en qué formato queda guardada? Y me hice esta misma pregunta, pero con una foto de Instagram. Para eso utilice esta fotografía que subí hace unos días a mi perfil: tiene unas dimensiones de 612×612 pixeles, está en formato JPEG y pesa 600 Kb. Su original, en cambio, que tiene unas dimensiones superiores, de 2.400×3.200, también es un JPG y pesa 2.6 Mb, más de 4 veces más, respecto a su versión en Instagram. Esto en síntesis quiere decir que Instagram, además de recortar la imagen para que quede cuadrada, tiene un sistema de compresión muy complejo, porque además de que las imágenes suben con mucha velocidad, cargan de igual forma desde la aplicación.

Quería llegar a este punto porque si una de las aplicaciones más descargadas del mundo ha pensado en esto, en la optimización de imágenes como un valor agregado para su producto, nosotros también lo podemos aplicar a nuestros sitios web sin ningún problema, y ofrecerles una mejor experiencia a los visitantes de nuestro sitio. Lo único que tenemos que hacer será prestarle atención a los puntos que ya mencionamos:

[list style=”square”][list_item]Tamaño de la imagen[/list_item][list_item]Formato de la imagen[/list_item][list_item]Dimensiones de la imagen[/list_item][list_item]Título de la imagen (atributos)[/list_item][list_item]Etiqueta ALT de la imagen (atributos)[/list_item][/list]

Imagen propiedad de Greh Fox

Share Button