La mayoría de los navegadores admiten 3 formatos de imagen: JPG, GIF y PNG.
JPEG (Joint Photographic Experts Group) es un algoritmo desarrollado para comprimir imágenes de profundidad de color de 24 bits (16 millones de colores) o escala de grises.
JPEG sólo maneja imágenes estáticas. A veces se llama también JPG, porque algunos sistemas operativos sólo tienen 3 caracteres en extensiones de archivo, pero este nombre no es apropiado.
Es un algoritmo de compresión con pérdida por lo que para que pase por este formato, pierde su calidad. Una de sus principales ventajas es la capacidad de definir niveles de compresión. Si se elige un nivel de compresión alto, la imagen necesitará menos espacio en el disco, pero la calidad será menor. No tiene transparencia
PNG (Portable Network Graphics) es un formato de archivo para imágenes basado en un algoritmo de compresión no comprometido. Este formato se creó principalmente para mejorar las deficiencias en los formatos GIF. De esta manera, le permite almacenar más imágenes de color profundo. Para la W3C es un estándar recomendado. Millones de colores Compresión sin pérdida. Opción de transparencia. Opción de metadatos Editable. Sin animación Las fotos son más intensas.
GIF (Graphics Interchange Format) es un formato de archivo para imágenes que se usan con frecuencia en la World Wide Web. Además de las imágenes estáticas, también permite la creación de animación.
GIF es un formato sin pérdida de calidad, teniendo en cuenta que la imagen básica es de 256 colores o menos. Oportunidad de transparencia. Compresión sin pérdida. No degrada el color. Tiene derechos de autor.
<img>
Descripción: Integra la imagen especificada a través del atributo src.
Apariencia: sin etiqueta de cierre (V).
Atributos:% attrs, src, alt, longdesc, name, height, width, usemap, ismap. (hspace, vspace, align y border disallow).
- src: indica el URI para acceder a la imagen.
- alt: imagen descripción texto; La imagen no se puede mostrar cuando no se muestra.
- Longdesc: representa un URI de una descripción larga de la imagen. Si un mapa de imagen está vinculado, el contenido debe ser descrito.
- name: identifica la imagen y luego la usa en la hoja de estilo o en la secuencia de comandos.
- height, width: altura y ancho, respectivamente. Cuando se determina, el navegador debe cambiar las dimensiones de la imagen original.
- usemap: se utiliza para vincular una imagen con un mapa de imagen (en un modo marcador).
- ismap: define un mapa de imagen.
Ejemplo:
<body>
<img src="imagenes/monitor.gif" alt ="monitor" width="113" height="110">
</body>
<map>Definición: Crea un mapa de imagen en el lado del cliente. Apariencia: se requieren etiquetas iniciales y finales. Atributos:% attrs y name <area>Definición: Usa la región geométrica del mapa y el enlace a esa región. Apariencia: sin etiqueta de fin (V). Atributos:% attrs, shape, coords, href, nohref, alt, tabindex, accesskey, onfocus y onblur. - shape: especifica el tipo de región, a través de los siguientes valores: default, rect, circle y poly. · default(región entera) · rect (rectangular) = (x, y) vocal superior izquierda, (x, y) voto inferior derecho. · circle (circular) = (x, y) centro, radio. · poly (poligonal) = (x, y) punto 1, (x, y) punto 2, ..., (x, y) el último punto. - coords - indica la posición en la pantalla. Son los valores de longitud, comenzando por la parte superior izquierda de la pantalla y separados por comas. Ejemplo: <body> <img src = "map.png" usemap = "#map1" alt = "mapa 4 colores"> <map name = "map1"> <area href = "amarillo.html" alt = "Amarillo" shape = "rect" coords = "0,0,190,190"> <area href = "verde.html" alt = "Verde" shape = "rect" coords = "210,0,400,190"> <area href = "azul.html" alt = "Azul" shape = "rect" coords = "0,210,190,400"> <area href = "rojo.html" alt = "Rojo" shape = "rect" coords = "210,210,400,400"> </map> </body> Nota: los marcadores "#map1" utilizados en el atributo usemap de imagen deben ser los mismos que los utilizados en el atributo de nombre de mapa.
Si hacemos clic en el campo amarillo, se abrirá el archivo yellow.html y Los mapas de imágenes se utilizan principalmente para ubicar áreas geográficas. En este caso, son polígonos de diferentes fuentes.
<area href="#" shape="poly" alt="Cáceres"
coords="64,120,65,117,73,118,81,118,88,117,92,119,94,124,99,129,101,
135,104,136,103,139,103,142,104,146,105,149,99,152,95,156,88,156,81,
158,76,152,69,152,60,148,56,147,50,150,46,143,52,142,55,138,57,131,
59, 124">
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:
<img src="planets.gif" alt="Planets" usemap="#planetmap"style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury"href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"href="venus.htm">
</map>
Ejercicio13 Utiliza una imagen con cuatro elementos diferentes y crea un enlace para los cuatro elementos, deberás crear una pagina para cada enlace.