INSTITUTO TECNOLOGICO DE TLAXIACO

INGENIERIA EN SISTEMAS COMPUTACIONALES

PROGRAMACIN WEB

PESO DE GRAFICOS PARA SITOS WEB

ALUMNO : VICTOR REYES SANTIAGO

N Ctrl: 07620027

28 DE AGOSTO DE 2011

GRAFICOS DE LA WEB

A pesar del mejoramiento en el ancho de banda y las mejoras en los procesadores, aun sigue siendo recomendable que las pginas web tengan un peso reducido para evitar que tengan problemas o demoren en cargar. Sin lugar a dudas, una de las dificultades mayores frente a la que se enfrentan los diseadores web es en la utilizacin de imgenes. El empleo de imgenes, tanto para el decorado de la pgina como para que forme parte del contenido, es indispensable. Teniendo en cuenta esto, la nica opcin con que cuentan los diseadores web es la optimizacin de las imgenes para su empleo en sus pginas. Para que el diseo tenga la vista que su creador ha planificado, es necesario que el largo y ancho de las imgenes no se modifique, por lo que la nica opcin con que se cuenta es con la reduccin de la calidad. Las imgenes a ser utilizadas en el diseo de una pgina web, puede ser modificada en varios parmetros a los efectos de reducir su peso. (www.visual-web.net, 2010)

El parmetro ms empleado para modificar el peso de una imagen es la resolucin, cuya medida es en ppp (pixeles por pulgada cuadrada). La resolucin necesaria en una imagen que va a ser mostrada en una pgina web, es de 72 ppp, es lo que se recomienda para su uso en este medio, debido a que la gran mayora de los monitores no tienen resoluciones superiores. Otro parmetro modificable es el color. Una imagen de alta calidad (denominado color verdadero, ya que se acerca a la capacidad del ojo humano en la deteccin de colores) tiene una profundidad de color de 32 bits por pixel, de los cuales 24 bits son para el color (casi 17.000.000 de colores) y 8 bits son destinados a las transparencias. Reduciendo la escala de profundidad del color a 16 bits (color de alta densidad), se obtiene tambin una reduccin del peso de la imagen. Para imgenes que emplean pocos colores, pueden utilizarse escalas menores, como 256 colores o menos. (diseno-paginasweb.tk)

Hay varias formas de optimizar una imagen para su empleo en pginas web. Algunos programas de edicin de imgenes tienen plug-ins para la optimizacin y otros tienen funcionalidades incorporadas. Cuanto mayor sea la resolucin, ms pxeles formarn la imagen, ms datos de informacin necesitar y, por lo tanto, mayor ser el tamao del fichero resultante. Por lo tanto, cuantos ms colores tenga una imagen y cuanto mayor sea su resolucin, mayor peso tendr el fichero necesario para almacenarla.

En la frmula anterior, ancho y alto estn dados en pulgadas, resolucin en pxeles por pulgada y profundidad del color en bites.

Para una imagen de 3 x 2 pulgadas a una resolucin de 72 ppp y con una profundidad de color de 8 bits, por ejemplo, tendremos: Peso fichero = [[(3 x 72) x (2 x 72)] x 8] / 8 = 31104 bytes = 31 Kb Si las dimensiones de la imagen est en centmetros, basta dividir estos por 2,54. As, una imagen de 1 x 1 pulgadas a una resolucin de 300 ppp y con una profundidad de color de 24 bits (color real) tendr un peso de: contiene un total de 90.000 pxeles. Peso fichero = [[(1 x 300) / 2,54 x (1 x 300) / 2,54] x 24] / 8 = 41850 bytes = 419 Kb Si trabajamos directamente con pxeles (captura con cmara digital, por ejemplo), bastar multiplicar las dimensiones de la imagen entre s y por la profundidad de color en bits para determinar la cantidad de bits presentes en un archivo de imagen., y dividiendo el resultado entre 8, tendremos el peso del fichero en bytes.

Como vemos, los pesos obtenidos son muy altos, sobre todo en el caso de imgenes destinadas a Internet, donde el ancho de banda es un recurso limitado. En Internet, actualmente solo tres formatos son reconocidos y visualizados correctamente por los navegadores: los formatos JPEG, GIF y PNG. Para una mejor visualizacin, algunos de estos formatos son ms recomendados que otros, dependiendo del uso que se desea darle (logo, foto, icono), as como de las caractersticas de la imagen (tamao, calidad, peso). Mas all de la presentacin visual, la optimizacin de la imagen permitir ganar tiempo al momento de visualizar una pagina Web y reducir el espacio que ocupa la imagen en el servidor. El tamao de una imagen viene a ser su ancho y altura. La resolucin viene a ser el nmero de puntos por unidad de superficie de la imagen, es decir la relacin entre el nmero de pixeles y las dimensiones.

Ya que su imagen estar destinada a la Web una resolucin de 72 pixeles por pulgada ser ms que suficiente. En cambio el tamao depende del uso que le va a dar. (http://www.desarrolloweb.co, 205)

Bibliografa
www.visual-web.net. (16 de 06 de 2010). Recuperado el 29 de 08 de 2011, de http://www.visualweb.net/optimizacion-de-imagenes-para-paginas-web/ http://www.desarrolloweb.co. (05 de 10 de 205). Recuperado el 29 de 08 de 2011, de http://www.desarrolloweb.com/articulos/1780.php diseno-paginas-web.tk. (s.f.). Recuperado el 29 de 08 de 2011, de http://diseno-paginasweb.tk/diseno-paginas-web/optimizacion-de-imagenes-para-paginas-web/