El lenguaje HTML. IV. Las imágenes (Duckett cap. 3) Sylvain Hallé Ÿ 8GIF128 Diseño y programación web

Transcripción

1 El lenguaje HTML IV. Las imágenes (Duckett cap. 3)

2 Insertar imágenes El elemento <img> serve para añadir imágenes en un documento, a través del texto: <img src="w-g.jpg" alt="wallace y Gromit" /> - El attributo src especifica el URL de la imagen - XHTML el attributo alt, de quién la valor es una exige descripción textual de la imagen

3 Attributos del elemento img (cf. Duckett, pp. 80-ss) Insertar imágenes src alt height width align border hspace vspace longdesc URL de la imagen Descripción textual (corta) Alto de la imagen (en pixels) Ancho de la imagen (en pixels) Alinea la imagen a la izquierda/derecha Define una borde alrededor de la imagen Espacio horizontal Espacio vertical Descripción textual (longa)

4 Insertar imágenes Se puede hacer un enlace con una imagen la poniendo en un elemento <a>: þ ch03_eg06.html Cuidado! Se se quiere simplemente poner un icono con un enlace, hay una mejora manera de hacerlo (HTML + CSS) sin utilizar el elemento <img>. Veramos más tarde. En general, reservamos <img> para fotos, ilustraciones, pero NO para elementos de la interfaz gráfica.

5 Formatos de imágenes Los browsers acceptan tres formatos de imágenes: JPEG, GIF, PNG. Las imágenes pueden también ser en dos otros formatos populares: TIFF y BMP. Cada uno representa las imágenes como una tabla rectangular de píxeles, y associa a cada píxel una color. Los formatos difieren en: 1. El número de colores differentes para los píxeles (la paleta) 2. La manera dequién los datos son condensados 3. La presencia de información acerca de la transparencia de los píxeles (alpha channel)

6 Colores Se define una color con tres componentes (i.e. tres números): R Cantidad de rojo G Cantidad de verde B Cantidad de azúl Según el numéro de bits utilizado para cada componente, se obtiene un espectro de colores differente (bit depth) Se utilize frecuamente 8 bits por componente: = 24 bits por color 24 = 2 = alrededor de 16 miliones de colores possibles

7 Colores Para cada componente: 0 = absencia de esta color 255 = intensidad maximal de esta color Ejemplos: R G B

8 Formato GIF 1. Paleta: puede utilizar desde 1 hasta 8 bits para la color de cada píxel - La paleta contiene desde 2 hasta 256 colores - Cada color de la paleta se define con 24 bits - Frecuamente mucho más colores en la imagen original - Cf. Figure Se puede elegir «inteligentemente» las colores de la paleta para reducir el effecto 2. Compresión: utilize el algoritmo LZW (variante de Zip) - Compresar un GIF (en un Zip) no es muy útil - LZW es una forma de compresión sin pérdida de información (lossless): produce la misma imagen, píxel para píxel, que el original* - Re-guardar un GIF no reduce su calidad*

9 Formato GIF 3. Transparencia: se puede definir una color de la paleta como transparente - Todos los píxeles de ese color en la imagen no seran mostrados, dejando aparecer la imagen de fundo

10 Formato GIF 4. En bono: GIF es el solo formato de imagen que permite de crear animaciones

11 Formato PNG PNG = como GIF con unas excepciones Paleta: puede tener una paleta de 256 colores, como GIF, o dar a cada píxel un número de 24 bits 2. Compresión: LZW (sin pérdidas) como GIF 3. Transparencia: cada píxel puede tener una transparencia entre 0 (opaque) y 255 (completamente transparente) 4. No animaciones en PNG

12 Formato JPEG Formato diseñado para las fotos y las imágenes «foto-realistas» 1. Paleta: no paleta; cada píxel tengo una color con 24 bits (o 8 si la imagen es en negro y blanco) 2. Compresión: con pérdidas. Una imagen comprimida en JPEG no es identica, píxel para píxel, al original. - JPEG introduce (voluntariamente) «errores» dentro de la imagen - Se puede elegir el nivel de fidelidad de la compresión desde 100 (casi perfecto) hasta 0 (horrible) - Más se comprime la imagen, más se contiene errores y menos se parece al original - Se llama esas errores artefactos de compresión

13 Formato JPEG - Los artefactos de compresión son concibidos para ser menos aparentes para el ojo cuando la imagen es foto realista pero mucho más visibles con texto, colores planas o detalles con un contraste alto

14 Formato JPEG Consecuencia: comprimir sucesivamente la misma imagen en JPEG reduce su calidad a cada vez ( aunque se conserve el mismo parámetro de calidad!) þ Un ejemplo Moraleja: conservar el original cuando se guarda en JPEG 3. Transparencia: no transparencia con JPEG 4. Animaciones: no animaciones tampoco

15 El tamaño del archivo 1. La resolución de un monitor es más debil que la de una camera o de un escáner Ejemplo: 1600x1200 (monitor 17") 2592x1944 (mi camera) 2. Descargar una foto de 3 MB (en 2014) es largo 3. El hosting se paga según el ancho de banda utilizado Conclusión: se debe cambiar tamaño píxeles y en kilobytes). de las imágenes (en

16 El tamaño del archivo Cuidado! Una imagen que ha sido reducida no puede agrandarse a su tamaño original sin pérdida de calidad Ejemplo extremo: 400x334 40x33 400x334 Moraleja: conservar el original!

17 Flash y las peliculas Se utiliza el elemento <object> para insertar Flash y películas en una página. Ver Duckett, pp