¿Como de importante es la optimización de imágenes en el desarrollo web?

¿Como de importante es la optimización de imágenes en el desarrollo web?

¿Como de importante es la optimización de imágenes en el desarrollo web?

Cuando entramos a un sitio web, el tiempo que tarda nuestro navegador en cargar dicho sitio para mostrarnos todos sus detalles y así facilitarnos la interacción con dicho sitio, está determinado entre un 65-85% por las imágenes, en un tiempo la cifra fue aún mayor, pero los plugins, dinámica de redes sociales incluida a veces desde el home, ha reducido la cifra promedio, aún cuando sigue siendo muy dependiente la carga de las imágenes. Ubicados desde la experiencia del usuario, rápido entendemos lo desagradable que resulta cuando nuestro sitio se tarda tanto tiempo en cargar.

Más que comodidad, es dinero

Pero visto que la mayoría de los proyectos serios en internet tienen como norte producir ganancias a sus dueños, debemos entonces aclarar que un buen rendimiento del sitio aumenta las ganancias en las plataformas tipo Amazon o EBay. Una diferencia en la carga de cien milisegundos puede llegar a representar una diferencia en la ganancia de hasta un 1% en esas grandes plataformas.

Los tres elementos más importantes en la carga de un sitio web

Aún cuando hay otros elementos influyendo de manera lateral, puede decirse que, por lo menos un 95% del peso de una página web está determinada por tres factores: Imágenes, base de datos y plugins, en el mismo orden. En algunos casos los plugins se mezclan con los otros factores, pero básicamente son las imágenes las que más inciden. ¿Quieres mejorar la experiencia de tus visitantes? Optimiza las imágenes ¿Quieres ganar más dinero? Optimiza las imágenes. En general, es tener un mejor sitio. Hasta en el aspecto.

Como optimizar las imágenes para mi sitio web

Para empezar hay que tomar en cuenta algunas consideraciones, empezando por el tamaño de la imagen. Tendemos a pensar que solo reduciendo el tamaño estamos optimizando la imagen y no es así, es decir, de manera lineal sí tiene un efecto positivo, pero siempre hay otros factores a considerar. Uno de estos elementos es el número de bits o profundidad de color, hoy día la mayoría de los monitores usan formato de 24 bits. Si tomamos en cuenta que el tamaño que conocemos está determinado en píxeles, que no son más que cuadrículas de puntos agrupados en la imagen, tenemos que una imagen de 100×100 no será igual si se trata de 8 bits de profundidad de color que si se trata de 24. En el primer caso, el peso sería de 9,76 Kb, mientras si se trata de 24 bits de profundidad de color, la imagen tendrá 29,29 Kb de peso.

Formatos recomendables para guardar las imágenes

Todo será relativo, algunos formatos no admiten ciertos elementos, por eso no se puede recomendar un formato de manera general, pero de manera detallada podemos decir que:

JPG: 24 bits de profundidad, hay que tener claro que este formato no acepta transparencias y mucho menos animaciones, al momento de guardar la imagen tenemos que elegir que el nivel de calidad, entre 0 y 100%, lo más recomendable al guardar imágenes en este formato es elegir entre 75 y 85%, así reducimos el peso sin que sea muy evidente la diferencia entre la imagen original y la edición.

PGN: Es uno de los formatos más usados y tiene 32 bits de profundidad, una de las razones de su uso frecuente es que, de los 32 bits, el sistema usa 24 para los colores y 8 para poder utilizar diferentes niveles de transparencia. Además de ello, garantiza una mayor calidad de imagen en comparación al JPG pero, obviamente, también un poco más de peso en la imagen. Es importante que sepamos apreciar el ahorro en el peso y usemos PNG solo cuando sea necesario, de nada vale que nuestro sitio web tenga animaciones e imágenes PNG vistosas si la carga es tan lenta que los visitantes terminan marchándose apenas entran al sitio, además de la manera en que esto afecta el posicionamiento, un sitio con una velocidad de carga excesivamente lenta la tendrá cuesta arriba para posicionarse.

GIF: Es el único formato que soporta animaciones, de entrada, al convertir una imagen en gif ya no se pueden retocar los colores pero, previamente, sí es posible, aunque debemos tener en cuenta que el gif, al tener movimiento, tendrá más peso cuando más complejas y pesadas sean las imágenes que la conforman. Igual siempre puedes optar por imágenes muy sencillas, pero lo más recomendable es no utilizar animaciones en el home de un sitio web. Normalmente le suma demasiado peso.

Está claro, que la optimización de imágenes va mucho más allá de un asunto de aspecto. Es tráfico, es dinero y es la calidad de tu sitio lo que está en juego.

 
Comments

No comments yet.