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 animación), tipo JPG de hasta 16 millones de colores (gran compresión, no admite transparencias) o PNG hasta 16 millones de colores (soporta semi-transparencia, animación y capas).
<IMG SRC=lapiz.gif ALT='Este es un texto alternativo' TITLE='Este es un texto alternativo'>
El atributo SRC identifica la URL del archivo a mostrar y se usa igual que HREF en la etiqueta 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.
Hay otra etiqueta que maneja imágenes es <picture>
Esta etiqueta se usa para incrustar una imagen en una página HTML. Técnicamente las imágenes están vinculadas a páginas web. Esta etiqueta crea un espacio de retención para la imagen referenciada.
<IMG SRC=uap.gif ALT='Logo de UAP'>
Existen dos atributos obligatorios: SRC y ALT, los demás son opcionales.
Ya hemos explicado como se puede hacer un enlace a una imagen vía la etiqueta A, con el que se presenta una imagen en una nueva ventana y no sobre el mismo documento HTML como la hace <IMG>.
<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.
<A HREF=doc.htm><IMG SRC=uap.gif ALT='Logo de UAP'></A>
En este ejemplo cuando haces clic en la imagen 
te lleva al documento "doc.htm" en la misma ventana.
| Atributo | Descripción |
|---|---|
| SRC | URL de la imagen a mostrar |
| ALT | especifica un texto alternativo para la imagen, si la imagen por alguna razón no se puede mostrar. |
| LONGDESC | Especifica una URL a una descripción detallada de una imagen. |
| WIDTH | Ancho en px |
| HEIGHT | Alto en px |
| SIZES | Especifica tamaños de imagen para diferentes diseños de página. |
| CROSSORIGEN | Permitir que las imágenes de sitios de terceros que permitan el acceso de origen cruzado se usen con lienzo. |
| REFERRERPOLICY | no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url |
| SRCSET | Especifica la ruta a una imagen para usar en diferentes situaciones. |
| ISMAP | Especifica una imagen como un mapa de imagen del lado del servidor. |
| USEMAP | Especifica una imagen como un mapa de imagen del lado del cliente. |
Atributo obligatorio que indica el URL (ruta/nombre) de la imagen a mostrar.
<IMG SRC=imagen>
Atributo obligatorio usado para asociar un 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.
<IMG SRC=imagen ALT='Titulo de imagen'>
Especifica una URL a una descripción detallada de una imagen.
<IMG SRC=imagen>
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.
<IMG SRC=imagen.jpg WIDTH=100 HEIGHT=200 ALT='Texto alternativo'>
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 argumento, bien WIDTH o HEIGHT.
Especifica el tamaño de imagen para distintas paginas
<IMG SRC=imagen SIZES=>
Permitir que las imágenes de sitios de terceros que permitan el acceso de origen cruzado se usen con lienzo.
<IMG SRC=imagen CROSSORIGEN=>
no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|unsafe-url
<IMG SRC=imagen REFERRERPOLICY=origin>
Especifica la ruta a una imagen para usar en diferentes situaciones.
<IMG SRC=imagen SRCSET=>
Es un atributo boleano, especifica que la imagen es parte de un mapa de imágenes del lado del servidor (un mapa de imágenes es una imagen con áreas en las que se puede hacer clic). Al hacer clic en un mapa de imagen del lado del servidor, las coordenadas de clic se envían al servidor como una cadena de consulta de URL.
El atributo ISMAP se permite solo si el etiqueta <img> es un descendiente de un elemento <A> con un atributo HREF válido.
Consultar ISMAP.
Especifica una imagen como un mapa de imagen del lado del cliente.
Consultar USERMAP.
Este atributo era 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 etiqueta <P ALIGN=>...</P>, <CENTER>..</CENTER> o meter la imagen en una tabla.
Para las imágenes flotantes, las que van rodeadas de texto, estos argumento controlan el espacio vertical y horizontal entre la imagen y el texto a su alrededor.
Permitia 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 atributo se usaba para 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.
Especifica contenido autónomo, como ilustraciones, diagramas, fotos, listados de códigos, etc. Si bien el contenido de la etiqueta <FIGURE> está relacionado con el flujo principal, su posición es independiente del flujo principal y si se elimina, no debería afectar el flujo del documento.
<FIGURE> <IMG SRC=mapa.jpg ALT=Logo STYLE='width:100%'> <FIGCAPTION>Fig.1 - Mapa de Lima, Perú.</FIGCAPTION> </FIGURE>
Define un título para la etiqueta <FIGURE>. Se puede colocar como el primer o el último hijo del elemento <FIGURE>.
<FIGURE> <IMG SRC=mapa.jpg ALT=Logo STYLE='width:100%'> <FIGCAPTION>Fig.1 - Mapa de Lima, Perú.</FIGCAPTION> </FIGURE>
Aqui un conjunto de ejemplos.
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.
<IMG SRC=action.gif ALT=Icono>
Un clic en la palabra Foto muestra la isla.gif en una nueva ventana.
<A HREF=isla.gif>Foto</A>
En este caso la imagen es presentada y un clic sobre ella nos lleva al documento "colores.htm"
<A HREF=colores.htm;><IMG SRC=isla.gif ALT=isla></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.
<A HREF=grande.gif><IMG SRC=chica.gif></A>
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".
<IMG SRC=grande.gif LOWSRC=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 información 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 información 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)