Usabilidad web: El peso de las imágenes

Hace un tiempo que no tenía la oportunidad de publicar por este blog, diseño y marketing, ambos temas me apasionan y sin embargo no tengo el tiempo suficiente para escribir todo lo que me gustaría sobre estas temáticas.

Aprovecho un hueco entre trabajo y trabajo para escribir una breve nota sobre la influencia del peso de las imágenes de una web en su usabilidad. Y es que durante los últimos años estoy harto de encontrar diseñadores web que muestran escasa preocupación por este tema.

Las imágenes que componen una página web, así como materiales adicionales (Flash, javascript, etc) suelen ser los elementos más pesadas, bastante más que el propio HTML. Un abuso de los mismos puede provocar que incluso con las velocidades que tenemos en la actualidad (llegó el ADSL 6 Megas) la experiencia del usuarios sea bastante pobre.

Seguro que en más de una ocasión os habéis encontrado con páginas cuyo tiempo de carga supera los 10 o 20 segundos y que a buen seguro no habéis añadido a vuestras favoritas. Y sin lugar a dudas es una lástima porque un poco de cuidado mejoraría notable la navegación y permitiría al usuario centrarse en el contenido.

La solución es tan sencilla como elegir el formato correcto para la imagen y elegir un nivel de compresión adecuada:

- Para imágenes sintéticas, realizadas por ordenador y que se caracterizan por usar un número reducido de colores, los mejores formatos son .GIF y .PNG. En ambos casos eligiendo adecuadamente el número de colores podemos reducir notablemente el peso de las imágenes.

- Para imágenes naturales, paisajes, personas, fotografías en general, el formato JPEG es el idóneo. Pero debemos recordar ajustar el nivel de compresión oportuno a través de nuestra herramienta de edición.

Finalmente siempre recordar ofrecer la imagen en el tamaño en que se va a mostrar en navegador, de forma que el usuario no tenga que descargar una imagen enorme para posteriormente reducirla mediante CSS o HTML.

A parte existen pequeños trucos como no incluir texto en una imagen y sobreponerlo posteriormente, de esta forma la imagen comprime bastante más. Puedes ver un ejemplo en los banners del blog Disco Duro.