DISEÑO DE PAGINAS WEB

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas

Procurar que las imágenes sirvan para algo, que den información. Esta es una de las razones por las que debemos usar los atributos ALT.

No pasarnos. La página no debe pesar demasiado. Un visitante que ve como la página tarda en cargarse más de 15 o 20 seg lo más probable es que se vaya y, lo que es peor, que no vuelva.

Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta. A veces una imagen muy grande requiere una compresión tal que al final tenemos una calidad pésima. En estos casos debemos plantearnos el tipo de imagen a usar.

REGLAS BASICAS

TIPO DE IMAGENESFíjate en las imágenes mostradas en tu monitor. Estas imágenes están formadas por unos puntos muy pequeños llamados pixeles. Si tu monitor fuera de aquellos en blanco y negro utilizados en la época de los pioneros, cada pixel podía estar encendido (color blanco) o apagado (color negro).

En los monitores de color actuales cada pixel o punto de pantalla no representa esos dos únicos colores, como sabes puden mostrar millones de colores y tonalidades. Pero la idea es la misma.

La imagen está formada por puntos y el ordenador los maneja como bits. A la hora de codificar esta imagen para poder guardarla en un archivo existen dos técnicas básicas: los mapas de bits y las imágenes vectoriales

MAPA DE BITS. Cada punto de la pantalla es o blanco o negro, almacenar esa imagen en un archivo es sumamente fácil: cada punto (blanco o negro) es un bit (1 o 0). Pero en realidad cada punto representa más de dos colores, 16 millones (si usamos 24 bits para cada pixel).

Ten en cuenta que 240 puntos es una imagen pequeñita, de 15 pixels de alto por 16 pixels de ancho por ejemplo.

En este método se basan los formatos JPG, PNG o GIF utilizados en las páginas web y que usan diferentes algoritmos para comprimir los archivos y ocupar así menos espacio. Si estas imágenes se escalan (se se les varía el tamaño) la calidad se ve degradada.

Sus características son:

• Número de colores: de 2 a 256 de una paleta de 24 bits.• Formato de compresión sin pérdida basado en el

algoritmo LZW.• Carga progresiva en el navegador.• Máscara de trasparencia de 1 bit.• Permite la animación simple.• Es el formato más adecuado para aquellas imágenes

sencillas, de formas simples y en las que no existe un elevado número de colores.

GIF (graphic Image File Format)

Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información.

Las características de este formato son:

• Número de colores: 24 bits color o 8 bits B/N• Elevado grado de posibilidad de compresión.• Formato de compresión con pérdida.• No permite trasparencia, ni canal alfa.• No permite la animación.

JPEG (Joint Photographic Expert Group)

Proporciona un formato compresión de imágenes sin pérdida.

Las características de este formato son:

• Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel.

• Mayor compresión que el formato GIF (+10%)• Compresión sin pérdida.• Canal alfa. (Transparencia variable)• No permite animación.•

El más adecuado para imágenes de elementos renderizados, ya que se logran unos degrarados muy suaves y una buena definición de las lineas.

PNG (Portable Network Graphics)

Jpg con 20% de compresión.11Kb

Gif con 256 colores.22 Kb

Png 24 bits.68 Kb

Vemos que para obtener una calidad similar los tamaños de la imágenes son muy diferentes, en este caso, lo más adecuado será optar por el formato JPG

Jpg con 20% de compresión.6Kb

Gif con 256 colores.13 Kb

Png 24 bits.41 Kb

El formato png es el que más calidad nos ofrece, sin embargo, la opción Jpg parece la más adecuada por su relación calidad peso, será una decisión que debermos tomar sobre todo en función de la importancia de la imágen o el detalle que sea necesario mostrar.

Presentado por:Yudi Andrea VanegasAnalisis y desarrollo

De sistemas de informacion661869