Manejo de Imágenes SINTAXIS IMÁGENES LINKEADAS

Transcripción

1 SINTAXIS Manejo de Imágenes IMG: Es el elemento que permite insertar una imagen dentro de un documento HTML. Siempre acompañado por el tag SRC (Source), que define el nombre de la imagen. Ejemplo IMAGENES PROPIEDADES ADICIONALES ALT: Crea una etiqueta, la cual aparece al momento del que el cursor esta encima de una imagen. ALIGN: Alineación de la imagen (TOP, MIDDLE, BOTTOM) WIDTH: Ancho de la imagen HEIGHT: Altura de la imagen EJEMPLO IMÁGENES LINKEADAS Tambien podemos hacer que una imagen nos lleve a un link.

2 Ejemplo Imágenes en la Web Recursos: Adobe Photoshop versión 5.0 ó Editor de imágenes ( ACDSee.- Visualizador de imágenes ( Referencia: ROMANIELLO, Steve. Mastering Photoshop 6. Editorial SYBEX. BLATNER, David. Real World of Photoshop 6. Editorial Adobe Peachpit Press. IMÁGENES EN LA WEB En una pagina Web, puede haber tres tipos de imágenes: JPEG (Joint Photographic Experts Group).- Es un formato de imagen muy usado en la web, sin embargo, al momento de ser comprimida la imagen pierde calidad. GIF (Grpahics Interchange Format).- Es un formato en el cual la calidad es mas importante que el tamaño. PNG (Portable Network Graphics).- Sucesor de GIF, soporta mas colores que las imágenes GIF, sin embargo no lo soportan navegadores antiguos. Multimedia Multimedia es la fusión de video, audio, texto y gráficas en un multi-nivel, basado en producción de computadoras que puede ser experimentado interactivamente. NO USAR MULTIMEDIA CUANDO NO ES NECESARIO!!!!!!!! Sistemas de Color RGB (Red, Green, Blue) Existen principalmente 4 sistemas de color: RGB (Red, Green, Blue) CMYK (Cyan, Magenta, Yellow, Black) Grayscale (Escala de grises) BW (Back and White) El modo de escala de grises es diferente a blanco y negro Es un sistema de color aditivo, es decir, entre más color, más brillo Se utiliza en la Web y en CRT (Cathod Ray Tube) Los valores van de 0 a 1, ó de 0 a 255 [0,0,0] = negro [1,1,1] = blanco Nota: Existen oros sistemas de color que no se verán en este curso

3 CMYK (Cyan, Magenta, Yellow, Black) Sistema de color substractivo, es decir, entre más color, menos brillo Usada en impresoras Los valores van de 0 a 1, ó de 0 a 255 [0,0,0] = blanco [1,1,1] = negro Compresión de Imágenes Existen principalmente dos tipos (algoritmos) de compresión de imágenes: Lossless.- Libre de errores. Elimina redundancia. Preserva detalles en la imagen y cuando la imagen es descomprimida es idéntica a la imagen original. Lossy.- Introduce cierto error. Elimina irrelevancia. Imágenes más pequeñas pero con perdida de calidad. La momento de descompresión la imagen no es igual a la original. Tipos de Compresión Run Length Encoding (RLE) Lempel Ziv Welch (LZW) Joint Photographic Experts Group (JPEG) Wavelet Compression International Telegraph and Telekeyed Consultative Comitee (CCITT) Run Time Encoding (RLE) Es buen formato de comprensión para caricaturas y escritos Bueno para imágenes con grandes áreas del mismo color Malo para imágenes ruidosas Técnica conocida desde 1952 y usada en las máquinas de Fax Existe también el 2D Run Time Encoding. Utiliza la técnica de lossless compression Usada en PCX, TGA comprimida y TIFF Lempel Ziv Welch (LZW) Buen formato para imágenes ruidosas Bueno para imágenes con grandes áreas del mismo color Compresión lenta pero buen método Algoritmo complejo Utiliza la técnica de lossless compression Usado en GIF, TIFF, PNG, ARJ, ZIP, RAR Joint Photographic Experts Group (JPEG) Basado en la técnica DCT (Discrete Cousine Technique) Muy útil, usado y rápido Introduce un poco de ruido en la imagen Usado en JPEG, PDF y formatos PostScript

4 Wavelet Compression Muy eficiente No introduce ruido Usado en LWF Formato JPEG Sus siglas significan: Joint Photographic Experts Group Usado para: comprimir archivos y usarlos en la Web Pueden ser guardados en RGB, CMYK y escala de grises Soportan 24 bits de color Tiene opciones como la de compresión, que va de 0 a 13 puntos, entre más comprimida, menos espacio ocupará. Formato JPEG 2 En el formato de imagen, el cual sirve para decidir como mostrar la imagen en el navegador. Existen 3 opciones: Baseline Standard.- Despliega la imagen completamente cuando es cargada en el servidor. Baseline Optimized.- Carga la imagen en franjas conforme la imagen es recibida. Progressive.- La imagen aparece borrosa y se aclara conforme se carga. Formato GIF Sus siglas significa: Graphics Interchange Format Hecho por Compuserve Diseñado cuando el tamaño es más importante que la calidad Soporta 8 bits de color (256 colores) Utiliza la técnica de LZW Formato PNG Sus siglas significan: Portable Network Graphics Soporta transparencia y 16 millones de colores, 24 bits de colores Soporta RGB y Escala de grises Usa la técnica de LZW Designado a ser el sucesor de GIF Desgraciadamente no todos los navegadores soportan este formato.

5 Sistemas de color TRUE COLOR (32 bits).- utiliza RGBA, donde A (alpha) es transparencia. Tenemos por lo tanto 8 bits para R+8bits para G +8bits para B+ 8bits para A. TRUE COLOR (24 bits).- 8 bits para R+8 para G + 8 para B HIGH COLOR (16 bits).- 5 bits para R+6 para G+5 para B. Porqué? INDEX COLOR (8 bits).- Es decir 356 colores BITMAP COLOR (1 bit).- o es negro o blanco Calculo de tamaño Para calcular el tamaño de una imagen, tenemos que conocer la resolución. Una vez conocida esta resolución, entonces aplicamos esta formula: [Res(width)xRes(height)xnúm de bits soportados]/1024 Esto es para KB, para pasarlo a MB solo lo dividimos entre 2(1024) El número de bits soportados es entre el número de bits del sistema de color entre 8* Calculo de tamaño Calcule el tamaño en MB para una imagen de 500 x 300 en: TRUE COLOR de 32 y 24 bits, high color, index color y bitmap. True color de 32 bits: (500x300x4)/2(1024)= 0.57 MB o KB True color de 24 bits: (500x400x3)/2(1024)= MB o KB High color: (500x300x2)/2(1024)=0.286 MB o KB Index color: (500x300x1)/2(1024)= MB o KB Bitmpa: (500*300/8)/2(1024)= MB o KB