Optimización de imágenes: 10 consejos imprescindibles (2)

Dentro de una determinada página cada foto cuenta. Muchas veces pasamos por alto la importancia de los thumbnails y miniaturas en términos de optimización. 

Efectivamente, puede que sean pequeñas, pero aunque sólo sea por la cantidad de ellas que pueden llegar a mostrarse en páginas como los listados, categorías o simples módulos y otros elementos que acompañen la ficha de producto pueden llegar a suponer una masa de información relativamente alta cuando cada kilobyte cuenta. 

El primer consejo es obvio: mantén un tamaño de las imágenes razonablemente pequeño. Son fotos pequeñas con lo que es absurdo que utilices formatos pesados y resoluciones altas, simplemente no se va a apreciar desde el punto de vista estético y estás restando agilidad a la página. 

También te recomiendo que utilices correctamente el atributo alt text del que ya os hablamos anteriormente. No dupliques el de la versión de la imagen a mayor resolución que aparece en la ficha de producto que, además, es la que tenemos que priorizar a la hora de la indexación.

Dentro de las buenas prácticas que recomienda Google para favorecer el rastreo y la indexación de las fotos podemos destacar el uso de sitemaps o mapas del sitio. 

Se trata de un pequeño archivo XML muy básico en el que se le ofrece a los buscadores una relación de las URLs en las que se encuentran todas las imágenes importantes de la web y, opcionalmente, permiten añadir alguna información adicional como títulos, pies de foto (también llamados caption), ubicación geográfica, licencia de la imagen si correspondiese… 

Es bastante sencillo de generar y facilita muchísimo la tarea de los robots así que pónselo fácil porque una vez dentro del índice tendrás posibilidades de empezar a aparecer en las búsquedas. 

Importante: los sitemaps no son solo una buena práctica para las imágenes, se utilizan especialmente para todas aquellas URLs de nuestro sitio que queremos que sean rastreadas. Por eso, es recomendable que se realicen por separado los de imágenes y los de otro tipo de URLs, además, no sólo no hay problema en subir más de uno, sino que, en realidad, hace que sea más eficiente.

En una web se utilizan muchísimos recursos visuales que hacen que resulte más atractiva. 

Estamos hablando por ejemplo de botones, separadores y, especialmente, fondos. Todo esto, al igual que ocurre con los thumbnails, va sumando peso poco a poco a la página con lo que ralentiza la carga. 

Lo primero que te diré es que te olvides de los atributos alt. Recuerda que lo que estamos buscando es una buena optimización de las imágenes y no nos aporta nada en términos estratégicos que estos recursos se indexen y se muestren en los resultados, ni queremos sobreoptimizar la página generando una cierta sensación de falta de naturalidad y priorización. 

En cuanto a optimización de las fotos en sí mismas te diría que, como suelen ser imágenes de pequeño tamaño o no muy complejas, utilices formatos livianos como PNG 8. No utilices imágenes para grandes masas de color que se pueden solucionar a través de las hojas de estilo CSS en lugar de con una imagen y modera el uso de los fondos porque pueden llegar a ser una de las imágenes más pesadas de toda la web debido a su enorme tamaño.

No me malinterpretes, no tengo absolutamente nada en contra de las fotos de stock. Son un recurso muy útil que se puede utilizar con muy buenos resultados, lo que no me convence es el mal uso. 

Las imágenes realizadas por nosotros mismos aportan un toque de singularidad a todo el sitio. Los usuarios llegan a generar una cierta ceguera ante las mismas fotos que se ven una y otra vez en todas las páginas. Esto todavía es más claro cuando hacemos búsquedas de imágenes, mira este ejemplo un tanto extremo pero que ilustra bien lo que quiero decir:

Cientos de miles de páginas utilizando el mismo recurso y, en este caso, para el mismo concepto con lo que ¿dónde quedará el CTR? ¿Por qué van a hacer click para visitar tu página? 

Cuando tengas que usar imágenes de stock utiliza siempre la que mejor encaje con el contenido al que te refieres y, en la medida de lo posible, trata de utilizar alguna foto que no sea la típica o las que usa tu competencia.

Los llamados captions, que ya habían salido a colación, son ni más ni menos que esas pequeñas explicaciones relacionadas con la imagen que se sitúan bajo la foto. 

Esto añade contexto y permite agregar semántica al contenido, con lo que los buscadores lo interpretan mejor, pero también es útil para el usuario porque ese texto se lee hasta cuatro veces más que el texto que lo circunda (ya sabes que cada vez más se escanea y se lee en diagonal). 

Y hasta aquí estos 5 consejos con los que completamos los 10 imprescindibles para la optimización de imágenes. Te recomiendo que leas los dos posts juntos para que tengas una idea global.

Lee la serie completa aquí: 

• Optimización de imágenes: 10 consejos imprescindibles (1) 

Imágenes | Unsplash y Google.