Imágenes. Conceptos básicos

Lo primero que una persona suele incorporar a una web son imágenes. Éstas contendrán diferentes motivos. Imágenes son las fotografías que incorporamos o los gráficos y diseños, pero también lo son los fondos, los rótulos que empleemos para destacar algún título o los fondos para un botón o un recuadro determinado.

Las imágenes que encontramos en un ordenador se suelen clasificar en dos grupos, atendiendo a cómo se almacena la información:

• Imágenes vectoriales: el contenido de una imagen vectorial se almacena como una serie de coordenadas y datos que son interpretados por el ordenador. Por ejemplo, y simplificando, si una imagen tiene una gran zona de cielo de color azul, lo que se almacenaría sería una referencia indicando que a partir de una posición determinada hasta otra el color sería azul. Con tres o cuatro datos podríamos recrear toda esa zona. De este modo, este formato es poco apropiado para imágenes muy complejas y fotografías, pero por el contrario es muy útil para dibujos más sencillos, con grandes espacios de colores planos. Su principal ventaja es que ocupan muy poco espacio, por lo que se transfieren rápidamente a través de Internet, y que pueden redimensionarse sin pérdida de calidad. Normalmente los encontraremos como archivos .svg. No se suelen emplear demasiado en la creación de páginas web.
• Mapas de bit: en éstos el contenido se almacena casi punto a punto. Es decir, para definir un cielo en una imagen de 800 píxeles de ancho, iríamos indicando pixel a pixel el color de cada punto. Aunque luego se aplican técnicas de compresión, los archivos suelen ser más grandes, aunque mucho más realistas. Es el tipo que se emplea para almacenar fotografía y el que usaremos para nuestras páginas web. De entre los diferentes formatos que emplean este tipo de almacenamiento encontraremos los archivos .jpg, .png y .gif.

Entre los diferentes tipos de imágenes de mapa de bits intentaremos emplear el formato .png para imágenes sencillas, rótulos, fondos y otros elementos de diseño, mientras que el formato .jpg se emplea para fotografía e imágenes complejas. El formato .gif también es apropiado para imágenes sencillas, como alternativa a .png.

Dimensiones de imágenes y de pantallas

Las imágenes tienen siempre una dimensión de ancho y alto que se suele medir en píxeles. Los píxeles nos dan la dimensión de los elementos que se muestran en una pantalla. Así, si un monitor cuenta con una resolución de 1280x1024 se nos está indicando que podemos mostrar 1280 puntos de ancho y 1024 de alto. Hoy en día los monitores se mueven entre valores de ancho de 1024, 1280 y 1600. La altura suele andar desde los 760 puntos en adelante, ya que varía dependiendo de si el monitor tiene una proporción 4:3 o 16:9 (panorámicos).

Todo esto nos arroja una realidad interesante: si queremos mostrar una fotografía en una página web, no será necesario que exceda las dimensiones sobre las que estamos hablando. Una imagen que se deba ver a buen tamaño en una página web puede tener una dimensión situada entre los 500 y los 800 píxeles de anchura. Por el contrario, una imagen tomada con una cámara fotográfica actual puede exceder los 3000 píxeles de anchura. En muchos casos tendremos que realizar pequeñas transformaciones en nuestro material, para que se muestre correctamente y para que además no ocupe tamaño innecesariamente. Como es lógico, cuanto menos píxeles tenga una imagen .jpg, menos tamaño suele ocupar.

El factor del tamaño también se ve afectado por la profundidad del color. Cada uno de los píxeles de una imagen se puede representar mediante una secuencia de ceros y unos (llamados bits). Dependiendo de lo larga que sea esa secuencia, podremos disponer de un mayor número de colores. Una fotografía estándar suele emplear secuencias de 24 bits, lo que nos arroja que podemos elegir un color de entre más de 16 millones de posibilidades. Por el contrario, en una imagen 8 bits, por ejemplo, sólo podríamos tener 260 colores diferentes por imagen.