Tecnicas para el manejo y optimización de imagenes para la Web

como optimizar las imagenes de tu web

En el trabajo de optimización de un sitio web, nunca se debe dejar de lado el contenido estático, incluidas las imágenes.

Algunas mejoras sencillas, de hecho, pueden reducir drásticamente el tiempo de descarga de un sitio web, sin comprometer la calidad

El canal YouTube de GoogleWebmasterHelp  nos ofrece una serie de consejos útiles para acelerar la carga de los elementos gráficos de nuestra web.

Nosotros sugerimos estos sencillos pasos:

1. Cortar el exceso de espacio blanco de una imagen.

2. Utilizar el mejor formato de imagen. Para las imágenes que contienen ilustraciones o material gráfico plano, utilizar el formato de 8-bits PNG o GIF, y reducir el número de colores en la paleta.

Algunos programas como PhotoShop, tienen la opción "guardar la imagen para el web" que hace que sea más sencilla la optimización de la configuración de la misma. Reduciendo la paleta de colores de 256 a, por ejemplo 32, disminuye significativamente el tamaño de la imagen.

Obviamente, menos colores tendrá la imagen, menor será su tamaño.

Por las imágenes muy detalladas y con muchos colores se utilizan normalmente los formatos JPG y PNG de 24 bits, ya que ofrecen una gama de colores mucho más amplia. Las imagenes PNG de 24-bit sin duda, tienen una calidad superior y una carga más lente. Siempre que sea posible, por lo tanto, se recomienda el uso del formato JPG, ajustando la calidad de la imagen para no comprometer el rendimiento.

Para una comparación entre formatos, mirad la lista:

•  
• PNG-8, 256 colors - 37K
• GIF, 256 colors - 42K
• PNG-24 - 146K

Recordamos que también existe la posibilidad de utlilizzare el "Progressive mode", una función de las imágenes JPG, que genera y transmite las diferentes versiones de la imagen empezando con una primera versión de baja calidad y añadiendo detalles en las versiones posteriores. Este método, como se puede imaginar, conlleva un aumento del tiempo de descarga de la imagen.

Las imágenes en formato PNG tienen una función similar llamada "entrelazado". Recomendamos desactivar esta función para que la descarga de la imagen sea más rápida.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.