Formatos gráficos y gestión de ficheros. Optimización de gráficos

Diferentes formas de optimizar las imágenes de una página web.

19/5/05 - Uno de las principales limitaciones que encontramos a la hora de incluir gráficos en una página web es la limitación impuesta por la tecnología actual de acceso a Internet, que ofrece anchos de banda escasos a la mayoría de los usuarios. Si a esto sumamos que muchas de las personas que acceden a la WWW lo hacen con conexiones vía módem, la conclusión es que las páginas web deben tener escaso peso para poder ser descargadas en un tiempo aceptable.

Una imagen de 50 Kb teóricamente tardará en cargarse unos 10 segundos usando un módem de 56 Kb/segundo, tiempo bastante elevado, que aumenta en la práctica al ser el ancho de banda útil real bastante más bajo. Si una página web contiene varias de estas imágenes, el resultado final será inviable.

Como norma general, una pagina completa no debe pesar más de 30 Kb - 40 Kb (la página inicial de Yahoo pesa unos 20 Kb). Se hace preciso pues controlar el número de imágenes incluidas en cada página y la realización de un proceso de optimización de los ficheros gráficos en el que, además de elegir el formato de almacenamiento más adecuado, se busque la relación calidad/peso más acertada.

La mayoría de los programas gráficos de calidad ofrecen una herramienta para optimizar el peso de un fichero gráfico destinado a la web, mediante la que podemos fijar el peso del mismo, el número de colores que va a tener la imagen y si queremos que sea entrelazada, progresiva, con transparencias, etc. Deberemos buscar que las imágenes resulten con buena calidad y con el menor peso posible. El ensayo y la práctica son las bases para conseguir buenos resultados.

Si estamos manejando una imagen en formato GIF, el peso de ésta va asociado al número de colores que tenga, por lo que podemos jugar con la paleta de colores que asociemos a la imagen para variar su peso. El siguiente ejemplo muestra una imagen en formato GIF guardada con diferentes números de colores:

GIF 256 colores	GIF 64 colores	GIF 8 colores	GIF 4 colores
5,7 K	5 K	2,5 K	1,8 K

Como vemos, la diferencia es evidente, y eso que hemos elegido una imagen con pocos colores. En caso de una imagen más compleja, las diferencias aumentan mucho más.

Vamos a ver ahora el caso de una imagen en formato JPG, donde el peso no va a depender del número de colores, sino del porcentaje de compresión aplicado:

JPG 100%	JPG 75%	JPG 50%	JPG 25%	JPG 5%
5,3 K	3,8 K	2,6 K	2 K	1,2 K

Al igual que en el caso anterior, hemos elegido una imagen que pierda poco con la compresión para que se aprecie la disminución que se puede conseguir a veces a costa de no perder mucha calidad.

En el caso de una imagen con muchos colores y gradaciones suaves, como una fotografía, se nota más la pérdida de calidad:



Donde vemos que de la calidad máxima a la media la pérdida de calidad no es excesiva, pero el peso baja considerablemente, mientras que el paso de calidad media a baja no disminuye mucho el peso, pero sí la calidad de la imagen.

Otro factor a tener en cuenta es el tamaño físico de la imagen. A mayor tamaño, mayor peso en Kb. Debemos pues buscar un tamaño suficiente para que la imagen se vea bien, pero que no de un fichero de un peso excesivo.

+ 1 manual relacionado
+ 1 categoria relacionada

Autoría, licencia y acciones sobre este artículo

Informe de Luciano Moreno* Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

+ Entrar en Guias de diseño

Comentarios de los visitantes

Añadir un comentario del artículo Aun no hemos recibido comentarios de este artículo. Puedes ser el primero en enviar tu comentario.

Enlaces:

Maestrosdelweb

  Ir arriba