clase 3
DESCRIPTION
diferentes formatos de archivosTRANSCRIPT
![Page 1: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/1.jpg)
1
Formatos Gráficos en HTML
GIF,JPEG,PNG
Ramón Muñiz Sánchez
![Page 2: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/2.jpg)
2
Formatos Gráficos en HTML
Índice– GIF.– JPEG.– PNG.– Diferencias.– Conclusiones– Referencias.– Preguntas.
Formatos Gráficos en HTML
![Page 3: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/3.jpg)
3
GIF. Índice
Presentación. Características. Usos
Formatos Gráficos en HTML
![Page 4: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/4.jpg)
4
GIF. Presentación
GIF (Graphics Interchange Format).
Creado por CompuServe en 1987.
Formato soportado por la mayoría de navegadores Web.
Formatos Gráficos en HTML
![Page 5: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/5.jpg)
5
GIF. Características
8 bits de profundidad(256 colores). Transparencias de 1 bit. Creación de animaciones. Uso de entrelazado para mostrar imágenes
más rápido. Compresión sin perdida de información. Extensión: .gif
Formatos Gráficos en HTML
![Page 6: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/6.jpg)
6
GIF. Usos
Botones. Logotipos. Anuncios. Iconos.
Actualmente, formato desaconsejado por la W3C(World Wide Web Consortium).
Formatos Gráficos en HTML
![Page 7: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/7.jpg)
7
JPEG. Índice
Presentación. Características. Usos.
Formatos Gráficos en HTML
![Page 8: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/8.jpg)
8
JPEG. Presentación.
JPEG (Joint Photographic Experts Group).
Aparecido a mediados de los 80.
Formato soportado por la mayoría de navegadores Web.
Formatos Gráficos en HTML
![Page 9: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/9.jpg)
9
JPEG. Características
24 bits de profundidad(16.7M colores). Formato de compresión con pérdida. Posibilidad de seleccionar nivel de
compresión. No soporta transparencias. No soporta animaciones. Extensión: .jpeg, .jpg
Formatos Gráficos en HTML
![Page 10: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/10.jpg)
10
JPEG. Usos
Imágenes reales (fotos).
Imágenes con degradados.
Estándar de facto para la web en cuestión de fotografías.
Formatos Gráficos en HTML
![Page 11: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/11.jpg)
11
PNG. Índice
Presentación. Características. Usos.
Formatos Gráficos en HTML
![Page 12: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/12.jpg)
12
PNG. Presentación
PNG (Portable Network Graphics)
Apareció en 1996.
Creado para sustituir al formato GIF.
Soportado por los navegadores más actuales.
Formatos Gráficos en HTML
![Page 13: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/13.jpg)
13
PNG. Características (I)
Formato sin perdida de datos.
Bits de profundidad variable según el tipo de imagen.– 8/16 bits en escala de grises.– 8 bits en color indexado.– 24/48 bits en color verdadero.
Formatos Gráficos en HTML
![Page 14: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/14.jpg)
14
PNG. Características (II)
Transparencias.– Color indexado.– Color verdadero y escala de grises.
Entrelazado. No soporta animación.
Formatos Gráficos en HTML
![Page 15: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/15.jpg)
15
PNG. Usos
Bitmaps– Botones.– Anuncios estáticos.– Logotipos.– Iconos.
Imágenes reales (fotos).
Formatos Gráficos en HTML
![Page 16: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/16.jpg)
16
Diferencias (I)
Sin perdidaCon perdidaSin perdidaCompresión
SíNoSíTransparencia
Variable.24
(16.7M colores)
8 (256
colores)
Bits de profundidad
PNGJPEGGIF
Formatos Gráficos en HTML
![Page 17: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/17.jpg)
17
Diferencias (II)
ActualesTodosTodosSoporte en
Navegadores
NoNoSiAnimación
Si, 7 líneasNoSi, 4 líneasEntrelazado
PNGJPEGGIF
Formatos Gráficos en HTML
![Page 18: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/18.jpg)
18
Diferencias (III)
Niveles de compresión.– Imagen de 24 bits y a 300 dpi, de un mapa a
color de 8,45 x 12,75 pulgadas. – Tamaño en formato TIFF: 28,4 Mb.
20,8 Mb10,4/1,2 Mb4,0 MbTamaño
1:1,371:2,7/1:241:6Ratio
PNGJPEGGIF
![Page 19: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/19.jpg)
19
Conclusiones
Uso de GIF/PNG para imágenes pequeñas como iconos, botones, etc.
Uso de JPEG para imágenes grandes o con resoluciones de color grandes.
![Page 20: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/20.jpg)
20
Referencias
Wikipedia en Español. (es.wikipedia.org) VitaminaWeb. (www.vitaminaweb.com) W3C (www.w3c.org) JPEG (www.jpeg.org) PNG (www.libpng.org)
Formatos Gráficos en HTML
![Page 21: CLASE 3](https://reader031.vdocuments.mx/reader031/viewer/2022020321/568c0e131a28ab955a8f2c23/html5/thumbnails/21.jpg)
21
Preguntas
¿Preguntas?
Formatos Gráficos en HTML