Esta etiqueta es usada para incluir una imagen en un documento HTML. Las imágenes pueden ser del tipo GIF de hasta 256 colores (soporta transparencia y animacion), tipo JPG de hasta 16 millones de colores (gran compresion, no admite transparencias) o PNG hasta 16 millones de colores (soporta semi-transparencia, animacion y capas).
<IMG SRC=lapiz.gif ALT='Este es un texto alternativo'>
El parámetro SRC identifica el archivo a mostrar y se usa igual que HREF en el comando A.
Esto pone a nuestra disposición una gran flexibilidad, ya que podemos complementar el contenido de nuestro documento tanto con imágenes que se encuentren disponibles en nuestro servidor de Web como con una imagen situada en otro servidor.
Este es un elemento en linea, no se inicia en una nueva línea y sólo ocupa tanto ancho como sea necesario.
Existe alguna limitación respecto a los formatos gráficos que los navegadores pueden mostrar sin problemas. Los formatos fundamentales son: GIF y JPG, que cualquier navegador debería poder mostrar directamente sobre nuestro documento. Si usamos otro formato diferente, lo más probable es que cuando un cliente esté accediendo al documento, su navegador no comprenda ese formato y se tenga que solicitar la ayuda de otro programa, con lo cual al final la imagen no se insertará en el lugar estratégico de nuestro documento, sino que aparecerá en otra ventana diferente y todo el asunto pierde su encanto.
Ya hemos explicado como se puede hacer un enlace a una imagen vía el etiqueta A, con el que se presenta una imagen en una nueva ventana y no sobre el mismo documento HTML.
<A HREF=uap.gif>Logo de UAP</A>
En este ejemplo cuando haces clic en la palabra Logo de UAP se muestra la imagen "uap.gif" en una nueva ventana.
Parámetro obligatorio e indica el URL (ruta/nombre) de la imagen a mostrar. Su sintaxis es idéntica a HREF
Es un parámetro opcional es usado para asociarun texto alternativo en el modo no gráfico (ejemplo: Lynx, antiguo navegador que sólo trabaja con texto) o cuando el cliente tenga desconectada la presentación de imágenes por razones de velocidad. Además en los navegadores modernos este texto aparece como un recuadro de ayuda del menú de Windows 95.
Es un parámetro opcional es usado para asociar un texto adicional con la imagen que aparece al posar el puntero del ratón sobre la imagen.
Este es un parámetro opcional usado para alinear la imagen respecto al texto que la acompaña en la misma línea convirtiéndola en lo que se llama una imagen flotante. Hay dos tipos básicos de alineación:
Debo tener presente que para alinear una imagen en nuestra página también se debe usar el comando <P ALIGN=>...</P>, <CENTER>..</CENTER> o meter la imagen en una tabla.
Para las imágenes flotantes, las que van rodeadas de texto, estos parámetros controlan el espacio vertical y horizontal entre la imagen y el texto a su alrededor.
Este parámetro opcional fue incluido para mejorar la velocidad de presentación de las imágenes. Ocurre que si no es proporcionado este atributo el navegador se ve obligado a bajarse toda la imagen antes de poder presentar partes de ella, debido a que hasta el final no conocerá su tamaño real.
En los navegadores modernos también se usa estos datos como la escala de la imagen (es decir que puedes determinar el tamaño en el que la imagen se presentara). Para prevenir deformaciones de la imagen se incluyo el parámetro "aspect ratio" es decir que en realidad la imagen crecerá en alto y ancho en forma proporcional hasta que se cumpla uno de los parámetros, bien WIDTH o HEIGHT.
Permite definir el grosor del borde o recuadro en la forma no gráfica, aunque algunos navegadores también lo toman como borde de imagen. Por omisión es sin borde.
Este parámetro te permite mostrar una imagen, digamos, en dos etapas: una primera imagen de baja resolución y después se carga la segunda imagen en resolución más alta.
<IMG SRC=highres.gif LOWSRC=lowres.jpg>
Cualquier tipo de imagen GIF (86a, 89a, normal, interlazada, transparente o animada) y JPEG, puede ser combinada libremente.
Si las imágenes no son del mismo tamaño, la segunda (SRC) se rescata al tamaño de la primera (LOWSCR)
Los navegadores que no reconozcan LOWSRC simplemente lo ignoran y presentarán de frente la especificada en SRC.
<IMG SRC="action.gif" ALT=Icono ALIGN=middle>
Se muestra la imagen "action.gif" o el texto "Icono" si el navegador no es capaz de mostrar la imagen, alineando una línea de texto en el centro de la imagen.
<A HREF=isla.gif>Foto</A>
Un clic en la palabra Foto muestra la isla.gif en una nueva ventana.
<A HREF=colores.htm;><IMG SRC=isla.gif ALT=isla></A>
En este caso la imagen es presentada y un clic sobre ella nos lleva al documento "colores.htm"
<A HREF=grande.gif><IMG SRC=chica.gif></A>
En este caso se muestra la imagen "chica.gif" y un click sobre ella nos mostrará la imagen "grande.gif" en una nueva ventana.
<IMG SRC=grande.gif LOWSRC=chica.gif>
Si el navegador no reconoce el parámetro LOWSRC mostrara de frente la imagen "grande.gif", si conoce el parámetro muestra la imagen "chica.gif" y un click sobre ella nos mostrará la imagen "grande.gif" en el mismo recuadro, es decir que si las imágenes no son del mismo tamaño, la segunda imagen, osea "grande.gif" se reescala al tamaño de la primera, osea "chica.gif".
Hay muchos formatos de imagen disponibles algunos propietarios y otros libres, pero no todos los formatos son aceptados por los navegadores.
El formato gráfico GIF (Graphics Interhange Format) es el estándar (no oficial) de las imágenes en documentos HTML. Fue creado por Compuserve y puede manejar hasta un máximo de 8 bits de color (256 colores) y usa el método de compresión LZW que comprime entre 1.5:1 a 2:1.
Este método de compresión es muy conveniente para comprimir áreas monocolor, como las que puede haber por ejemplo en un diagrama sencillo. Pero no es tan conveniente para cosas más complicadas, como por ejemplo fotografías de objetos de la vida real o personas.
Una característica muy útil del formato GIF es la opción de hacer transparente un color determinado, es decir, que un color concreto no se vea, siendo reemplazado por el fondo de la página, aparentando flotar sobre el fondo.
Hay otro aspecto que hay que tener en cuenta y es que el formato GIF tiene dos subformatos diferentes. El más común es el GIF 87a, con el que no se pueden conseguir colores transparentes. El formato adecuado para ello es el GIF 89a. Por tanto, el programa gráfico debe tener la posibilidad de convertir las imágenes a este subformato.
Normalmente, un GIF contiene los datos de cada línea de la imagen de una manera ordenada, de tal manera que al ser cargada por el navegador aparecerá dibujada línea a línea de arriba hasta abajo.
Se puede cambiar este comportamiento si se ha guardado la imagen como un GIF entrelazado (interlaced GIF) del subformato 89a. En este caso, las líneas quedan guardadas no de una manera consecutiva, sino en saltos de cuatro en cuatro y al llegar al final recomienza nuevamente pero esta vez desde la línea 2, también de cuatro en cuatro, así hasta completar la imagen.
El propósito de esto es que al ser cargada esta imagen, se verá la imagen completa desde el principio, comenzando con una definición muy gruesa que luego se va afinando poco a poco.
El tiempo total de carga de una imagen entrelazada es el mismo que la misma imagen en formato no entrelazada, pero en el primer caso nos hacemos rápidamente una idea del contenido de dicha imagen, lo cual puede ser muy conveniente a veces: -)
Lamentablemente no todos los navegadores la soportan.
En el subformato GIF 89a (se llamo así porque este estándar apareció en 1989) se estableció la posibilidad de la existencia un color transparente, así como que un GIF pudiera contener internamente múltiples imágenes, visibles durante un tiempo determinado, con lo que se podía obtener una animación.
Pero esta interesante característica permaneció prácticamente en el olvido hasta finales de 1995, cuando Netscape la implemento en su navegador, adquiriendo muy pronto una gran popularidad.
Hay otros tipos de animaciones, como las obtenidas con:
Las animaciones basadas en el formato GIF 89a eliminan todos estos problemas, pues:
Para crear una animación, en primer lugar, hay que crear una a una las distintas imágenes que van a constituirla. Cualquier programa gráfico capaz de guardar en formato GIF es válido para este propósito.
En segundo lugar, es necesario un programa que ensamble estas imágenes individuales de una manera apropiada para crear la animación. Los programas más usados para ello son: GIF Construction Set (para Win 3.1x o 95), Microsoft Gif Animator (Win 95), GifBuilder o WhirlGIF.
Para mas informacion vista Wikipedia.
El formato gráfico JPG en realidad es la extensión (limitado a 3 caracteres por DOS) de JPEG (Joint Photographic Expert Group) quienes crean este estándar para comprimir imágenes usando transformadas discretas de coseno. Es independiente de la imagen y la compresión puede llegar a 100:1, pero cuanto más se comprime más fidelidad se perderá.
En la práctica se usan compresiones de 20:1 y la distorsión no es muy notoria.
La primera ventaja del JPG es su máxima cantidad de colores: 16.7 millones (24 bits), que es mucho más de lo que el ojo humano puede distinguir y el uso de complicados algoritmos matemáticos para comprimir el tamaño de los archivos hasta en la décima parte de su tamaño original.
Su único inconveniente es que al tratarse de una imagen comprimida, ésta deberá ser transferida totalmente antes de empezar a descomprimir y luego mostrarla, esto sin contar la carga de trabajo extra al uP al manejar el complicado algoritmo de descompresión.
Tampoco maneja los conceptos de transparencia, interlazado ni animación, pero tiene una contraparte de vídeo llamada MPEG (Moving Picture Expert Group).
Para mas informacion vista Wikipedia.
El formato gráfico PNG (Portable Network Graphics) fue creado en mayo de 1995, por el grupo PNG formado por: Compuserve, Netscape, Spyglass y el corsorcio W3C, para reemplazar al formato GIF y solucionar el problema de patente que tiene el GIF, por el uso del algoritmo de compresión LZW, reclamado por UNYSYS.
Una de sus ventajas respecto al GIF es mejor soporte de color (48 bits) y mejor compresión. Visita Wikipedia para mas información.
Es un formato gráfico propietario de Microsoft que esta compuesto de varios archivos BMP (bitmaps) juntos. Lo más común es que el ICO tenga dimensiones de 16×16 px y 16 colores o de 32×32 px y 256 colores. De hecho, como el formato ICO puede contener varias imágenes, se pueden meter cuatro iconos dentro de un mismo archivo favicon.ico 16x16x16 colores, 32x32x16 colores, 16x16x256 colores y 32x32x256 colores.
Cuando vas navegando por el Web, verás en ocasiones que todo se detiene. Esto es algo que por desgracia ocurre muy a menudo y el causante podría ser: conexiones de la red defectuosas, servidores lentos o exceso de tráfico y no nos queda más remedio que soportar.
Pero hay una causa particularmente irritante y es que hayamos ido a parar a una página con una imagen gigantesca o demasiado recargada de imágenes, sonido y vídeo, lo que se traduce en demasiados KBytes que cargar.
Como referencia, una imagen no debe pasar de 50 KB, aunque cuanto más pequeña mejor.
Tampoco conviene que el tamaño de la imagen en la pantalla sea mayor a unos 400x400 pixeles, para no obligar al usuario a tener que desplazarla con los cursores.
Hay varias maneras de evitar caer en esta trampa:
Permiten reducir el tamaño en pixeles de la imagen sin distorcionarla, para hacerla más manejable en Internet. También permite limitar la paleta, reduciendo el número de colores, con filtros de anti-alising y suavizado de colores. En lugar de verdadero color de 24 bits. Es normal en la web el uso de paletas de 256 colores (8 bits)
