Crea tu Web: Indice de diseño

Indice Visión general Previos Estructura Diseño Herramientas Recursos

ImÁgenes en la web
Alguna imagen si, todo imágenes cansa

Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las imágenes debemos guiarnos por unas cuantas reglas básicas:

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.

Tipos de imágenes
Fíjate en las imágenes mostradas en tu monitor. Estas imágenes están formadas por unos puntos muy pequeños llamados pixels. 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
Mapas de bits
Una imagen en mapa de bits está formada por puntosVolvamos al monitor en blanco y negro. 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). Si la imagen tiene 240 puntos ocupa 240 bits (240:8 = 30 bytes). Pero en realidad cada punto representa más de dos colores, 16 millones (si usamos 24 bits para cada pixel). En este caso la imagen anterior ocupará algo más: 240 puntos x 24 bits : 8 son 720 bytes. 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.
 
  • Imágenes JPG
  •   Usando este formato pueden almacenarse imágenes de hasta 24 bits de color. Es recomendable para fotografías o imágenes con degradados. Cualquier programa editor de gráficos permite guardar una imagen en este formato con diferentes grados de compresión. Lógicamente cuanto más comprimamos la imagen menor es su calidad. Si queremos imágenes de alta calidad debemos soportar archivos de tamaños elevados. Recientemente ha aparecido una variación de este formato denominada JP2 o JPG2000, especialmente destinado a la red. Pero aún no es admitido por todos los exploradores.
     
  • Imágenes GIF
  • No abuses de los gifs animados Este otro formato se usa para imágenes con hasta 256 colores ( 8 bits de color). Frente a esta limitación nos ofrece la posibilidad de definir zonas transparentes y además existe una variante que permite imágenes animadas, muy útil para llamar la atención sobre algo en concreto como puedan ser las novedades de nuestro sitio o un anuncio de algún servicio. Pero conviene no abusar de las animaciones, son archivos muy grandes y pueden llegar a resultar pesados. En nuestro sitio Gifsanimados tienes una excelente colección para elegir
     
  • Imágenes PNG
  •   El formato PNG es el gran desconocido de internet, pese a su magnífico comportamiento. Realmente existen varios formatos PNG: PNG8, que almacena imágenes de hasta 256 colores, PNG24 para imágnes de 24 bits y PNG32 para imágenes de 32 bits. Permite transparencias como los GIF y transparencia graduada (colores cuya opacidad van desde el 0% hasta el 100%), aunque los exploradores no aprovechan esta utilísima propiedad. Por contra no admiten animaciones.
    Imágenes vectoriales
    Ese otro método de almacenar imágenes se basa en encontrar funciones matemáticas para representar la imagen completa. Este método no sólo se usa para figuras regulares (rectángulos, cuadrados, círculos) tambien se puede usar para imágenes tipo fotografía. Si alguno de los que leeis estas líneas ha oido hablar de una cosa llamada figuras de Mandelbrot sabrá que es eso de encontrar una función matemática para representar la formas tan poco regulares como un paisaje de montaña y similares. Estas imágenes dan una calidad excelente y permiten ser escaladas (modificar su tamaño) sin pérdida de calidad. Un ejemplo son los archivos DXF y otros usados en programas CAD. Estos formatos no se usan en las páginas web.
    Estructura de los sitios web
    Las imágenes en tu página
    Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML

    Comunidad Virtual. Alojamiento web gratis