Cuántas veces te ha pasado que navegando por una web notas que la carga de las fotos tarda... y se va viendo la parte superior... y va bajando...
Es habitual, a pesar de que cada vez tenemos mejores conexiones a internet.
A la hora de mostrar imágenes en una web es importante que estén optimizadas.
Además de que este no es el único problema, ahora veremos alguno más y cómo solucionarlos.
El tamaño sí importa (el de las imágenes)
Cuando hablo del tamaño me refiero a su ancho y alto, en píxeles. Por poner un ejemplo: 800 x 600 px.
También importa el peso. Cuanto menos ocupe, en KB, mejor. Pero de esto hablo más abajo.
Si puedes define un estándar, o varios si lo ves necesario. Así es mucho más sencillo.
Si, por ejemplo, hablamos de un blog, no es mala idea que todas las imágenes principales vayan al mismo tamaño. De esta forma no tienes que pensar cada vez en qué tamaño debes usar.
En este sentido existen soluciones para que, según el tamaño de pantalla del visitante, su navegador cargue la imagen más apropiada.
No es lo mismo navegar desde el móvil que desde una pantalla grande de ordenador.
Por ejemplo, está la etiqueta picture, que llegó con HTML 5. Pero no quiero complicar las cosas más de lo necesario. Ahora que ya sabes que existe puedes buscar información al respecto.
Nombres de fichero útiles
Utiliza un nombre de fichero que permita identificar la imagen de forma fácil.
Evita nombres como los que ponen las cámaras de manera automática, por ejemplo, los que empiezan por DSC, IMG o similares y luego llevan números (que suelen ser la fecha y la hora).
Procura no usar caracteres extraños, espacios, o letras acentuadas. Los espacios sustitúyelos por guiones medios o bajos.
Esto parece una tontería pero puede ayudarte a ti, a personas que trabajen en la web e incluso a que se posicionen mejor en buscadores.
Texto alternativo, para posicionamiento en buscadores y accesibilidad
Utiliza el campo de texto alternativo (alt) para indicar una breve descripción de la imagen.
Digamos que este texto es la descripción que le darías a alguien con el que estás hablando por teléfono.
Este texto ayuda a las personas que no pueden ver la imagen y también con el posicionamiento en buscadores.
Sobre este punto hablo más en profundidad en los artículos sobre Accesibilidad web y SEO para Joomla.
Formatos de imágenes y cuál elegir
Existen múltiples formatos de imagen: JPG, PNG, SVG, WebP...
Infórmate y usa el que prefieras, o el que los programas que utilizas te permitan.
Eso sí, comprime.
Y cuando hablo de comprimir me refiero a su peso, en KiloBytes (KB).
Fíjate que no hablo de Megas...
Cuanto menos ocupe, mejor. Siempre que tenga la calidad necesaria.
Por norma general, que ocupe menos de 100 KB.
En este sentido ya he hablado de algunas herramientas en otros artículos, como este en el que hablo de Gimp e Inkscape.
Automatiza todo lo que puedas
Existen múltiples herramientas para automatizar algunas de estas tareas.
En Joomla por ejemplo tenemos el editor JCE, del que ya te tengo hablado. Permite definir a qué tamaño redimensionar las imágenes que subas. Uno pequeño y otro grande. Eso sí, esta funcionalidad requiere la versión Pro.
También tenemos XT Adaptive Images, una extensión de Extly que hace esto y mucho más.
Echa un ojo en el directorio de extensiones de Joomla, vas a encontrar varias extensiones más para realizar estas tareas.
Conclusión
Da igual el programa que uses para editar imágenes o el sistema de publicación en web, comprueba que las imágenes que muestras estén optimizadas.
Te invito como siempre a que dejes tus comentarios de las herramientas que usas, problemas que te has encontrado o lo que quieras compartir.
Ah, y también a que compartas en tus redes este artículo, para tratar de conseguir que navegar por la web sea cada vez una experiencia mejor.
