Imágenes en la Web

Page history last edited by Norma 1 year, 11 months ago

Imágenes en la web

Imagen extraída de www.gurublog.com/archives/la-crisis-economica-incrementa-ciberataques/2701/2010/ el 20/04/2010

A menudo en nuestros trabajos necesitamos colocar imágenes ya sea para ejemplificar un concepto, ilustrar o proveer la descripción de algo/alguien. En el caso particular de colocar imágenes en nuestros trabajos y que se publicarán en la web debemos tener en cuenta los diferentes formatos que existen con sus particularidades para saber cuál es el más conveniente. Pero antes de describir los diferentes formatos de archivos de imágenes proveeremos respuesta a dos preguntas básicas:

¿Qué es una imagen?

De acuerdo al diccionario de informática de la página http://www.alegsa.com.ar/Dic/imagen.php) una de las definiciones de la palabra imagen expresa:

En computación, representación visual de cosas en forma digital. Suele estar representadas por miles de pixeles (llamado raster) que, vistos en conjunto, forman una fotografía, un gráfico, etc. o pueden estar hechas por vectores.

Ahora bien, éstas imágenes tienen la posibilidad de guardarse en diferentes formatos, cada uno de los cuáles tienen diferentes características que el usuario deberá conocer para saber cuál es la más apropiada utilizar de acuredo al producto que quiera obtener. El diccionario antes mencionado provee la siguiente definición de formato:

El formato de imagen provee un método estandarizado para la organización y el almacenamiento de datos de imagen.

El formato de imagen puede guardar las imágenes por raster (usa píxeles) o por vectores.

El tamaño del fichero de una imagen, expresado en bytes, se incrementa a la par con el número de píxeles en la imagen y la profunidad de color de los píxeles. Un píxel de profunidad de 8 bits (1 byte) permite 256 colores y un píxel de 24 bits de profunidad (3 bytes) puede almacenar más de 16 millones de colores (llamado color verdadero)

Las imágenes pueden comprimirse para no ocupar tanto espacio y ser más fáciles de utilizar. Las mismas pueden comprimirse con o sin pérdida de datos. A continuación presentaremos los formatos más conocidos y utilizados en la Web.

Las imágenes digitales pueden ser mapa de bits o vectoriales.

Imágenes Vectoriales

Las imágenes vectoriales son gráficos formados a base de curvas y líneas a través de elementos geométricos definidos como vectores. La gran ventaja de las imágenes vectoriales es que no sufren pérdida de resolución al producirse una ampliación de los mismos. Se utiliza mucho para trabajos de rotulación, rótulos, iconos, dibujos, logotipos de empresa etc. Esta clase de imagen tiene poco peso como archivo informático, medido en kilobytes. (http://www.digitalfotored.com/imagendigital/formatosarchivos.htm)

Imagen vectorial tomada de

http://www.digitalfotored.com/imagendigital/formatosarchivos.htm el 20/04/10

Resolución 200ppp

Mapa de bits

Los scanners y camaras digitales crean imágenes en forma de mapa de bits o mosaico de imágenes. Este tipo de archivo ocupa más memoria que las imágenes vectoriales y cuando se amplian la imagen se desdibuja o "pixela" pudiéndose observar una serie de mosaicos. A continuación se muestra la misma imagen original y ampliada para que se observe este fenómeno de degradación de la imagen en mosaicos y su consecuente pérdida de resolución.

Figuras tomadas de http://www.digitalfotored.com/imagendigital/formatosarchivos.htm el 20/04/10

¿Cuáles son los formatos de las imágenes en la web?

Como mencionamos anteriormente un formato de archivo informático (o formato de fichero informático) es una manera particular de codificar información para almacenarla en un archivo informático.Existen varios formatos según lo que queramos almacenar, imágenes con movimiento o estáticas, vídeos, diferentes formas de multimedia, según el lenguaje de programación, archivos de textos, etc. En nuestro caso nos referiremos a los más usados en imágenes.

Los formatos más comunes y populares utilizados en la Web son: bmp, jpg, gif, y png. Hay que saber elegir entre ellos ya que no todos se adecuan al trabajo que estamos elaborando. Por ello es muy importante conocer sus características, para poder elegir el formato más apropiado. Dos aspectos a tener en cuenta y que pueden llegar a ser una limitante son la cantidad de memoria que estas imágenes tengan de acuerdo a su formato y el otro aspecto relevante es el grado de compatibilidad con algunos navegadores.

¿Cuáles son las características de los diferentes formatos?

Como se mencionaba anteriormente, hay formatos que permiten guardar las imágenes con óptima resolución y otros que conservan la calidad de las mismas. Entre los formatos que conservan la calidad de las imágenes se encuentra los formatos TIFF, y BMP.

Formato TIFF

Este tipo de formato es ideal para guardar imágenes con alta calidad de resolución. Cuando se guarda algún archivo con este formato lo hace con 48 bits de color. Este tipo de formato universal es compatible con los sistemas operativos Windows, Linux y Mac entre otros. Este tipo de formato no es muy conveniente en relación a la cantidad de memoria que ocupa por ejemplo en el caso de almacenar fotografías digitales. En cambio, este formato es conveniente si se quiere escanear una fotografía e imprimirla ya que la misma será de gran calidad.

Imagen formato tiff tomada de http://img41.imageshack.us/i/jacosub2.tif/ el 19/05/10

Imagen Tiff tomada de http://upload.wikimedia.org/wikipedia/commons/f/fa/TIFF_file_format_test.tif el 05/05/10

Formato BMP

Este formato guarda imágenes de 24 bits, 8 bits, inclusive menos. Se pueden llegar a comprimir este tipo de archivos sin perder calidad mediante la compresion RLE (Run Length Encoding). Su uso es conveniente en el caso de imágenes de poco peso. Se utiliza mucho para crear fondos de escritorio en Windows. No es aconsejable para utilizar en imagenes que se captan sino para aquellas ya reducidas a 24 bits.

En relación a aquellos formatos en los cuales se pierde la calidad de la fotografía y que por ende son más livianos se encuentran: JPEG, GIF y PNG.

Figura bmp tomada de http://www.digitalfotored.com/imagendigital/formatosarchivos.htm el 20/04/10

Formato JPEG:

Las imágenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamaño de la imagen es mayor y tarda más en descargarse.

Puedes incluir imágenes en otros formatos a través de Dreamweaver, que podrán ser visualizadas en algunos navegadores. Este es el caso de las imágenes BMP y PNG. Si introduces una imagen BMP en Dreamweaver, te aparecerá un cuadrado gris en su lugar. La imagen solo se mostrará correctamente en el navegador.

Figura tomada de http://www.digitalfotored.com/imagendigital/formatosarchivos.htm el 20/04/10

Antes de editar una imagen en JPEG, conviene que tengamos en cuenta los siguientes puntos, para no perder calidad en el archivo:

No guardar imágenes en formato JPEG si se van a modificar.

* Cada vez que abramos un archivo o lo editemos, la imagen sufre una compresión y pérdida de calidad.

* Antes de editar una imagen en JPG, la guardaremos inicialmente una copia en formato BMP o TIFF con la máxima profundidad de color.

Formato GIF:

Este formato se ve muy favorecido porque tan solo utiliza 256 colores, los que si bien proporcionan una imagen con menor definición, se obtienen archivos más livianos, lo que es muy importante al momento de cargar todas nuestras imágenes en la web. Si tenemos imágenes que muestran grandes áreas monocromáticas o de similar tonalidad éste es el formato a utilizar. Además también acepta incorporar transparencias y animaciones en páginas web, lo que lo hace muy popular al ser el único formato que puede ser soportado por numerosos navegadores. También es muy útil en la publicidad tipo 'banners'.

Como contrapartida, ha surgido el problema del copyright, y ahora la compañía pretende cobrar por el uso de las fotos, aunque su licencia ya se ha vencido.

A continuación se presenta un ejemplo de animación en este formato.

Figura tomada de http://www.gifmania.com/smileys/siluetas/ el 22/03/10

Formato PNG

A diferencia del gif este formato permite mayor profundidad de color en las imágenes, razón por la cual se lo llama color verdadero, pero no permite animaciones facilmente y es compatible a partir de la versión 5.0 de Internet Explorer.