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 (y poco aconsejable) 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 o que faciliten la lectrua. Esta es una de las razones por las que debemos usar el atributo ALT. Este atributo ayuda a los buscadores para indexar nuestras páginas y a mecanismos de accesibilidad para leerla. Importante para que el usuario tenga un buena experiencia al visitar vuestro sitio

Actualmente la velocidad de la red es enorme, incluso en móviles, y los mecanismos de caché guardan las imágenes en el ordenador de usuario. Pese a esto es improtante controlar el peso de las imágenes. Las pa´gians aparte de paimágnees, tienen scripts u hojas de estilo css. Así que cuidado, 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 es eguro qeu se marchará a otro sitio más rápido y, lo que es peor, no volverá. Si tienes mucha imagen y poco texto por la naturaleza de la página, no olvides usar el atributo ALT para describir resumidamente el contenido de la imagen.

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. Así que 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 un formato con un magnífico comportamiento para la web. 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%, opacos, hasta el 100%, transparente), aunque los exploradores no aprovechan esta utilísima propiedad. Por contra no admiten animaciones.
    Imágenes vectoriales (svg)

    Ese es un método especial para almacenar imágenes. Se basa en funciones matemáticas para describir 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. Esta normallizado por el W3C, el mismo que regula el CSS o el HTML, y soporta animaciones

    En las páginas web los verás como archivos SVG (Scalable Vector Graphics) y es soportado por casi todos los navegadores. Estos gráficos se editan con programas al efecto, incluso de código abierto como el Draw de Libre Office. Pueden incluirse en una página como archivo SVG, como los restantes formatos o (lo más interesante) pueden definirse en la propa pagina como cualquier otro elemento (párrafo, enlace...). Un ejemplo sencillo de una imagen SVG:

    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="darkblue" stroke-width="4" fill="lightgreen" />
    </svg>

    Que daría lugar a

    Este navegador no soporta imagenes svg online.

    Si aplicas el zoom al navegador veras que en las imágnes superiores e empiean a preciar los pixels mientras que esta la calidad de esta última no cambia nada.

    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