2
Formatos Gráficos en HTML
Índice– GIF.– JPEG.– PNG.– Diferencias.– Conclusiones– Referencias.– Preguntas.
Formatos Gráficos en HTML
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
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
6
GIF. Usos
Botones. Logotipos. Anuncios. Iconos.
Actualmente, formato desaconsejado por la W3C(World Wide Web Consortium).
Formatos Gráficos en HTML
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
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
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
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
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
14
PNG. Características (II)
Transparencias.– Color indexado.– Color verdadero y escala de grises.
Entrelazado. No soporta animación.
Formatos Gráficos en HTML
15
PNG. Usos
Bitmaps– Botones.– Anuncios estáticos.– Logotipos.– Iconos.
Imágenes reales (fotos).
Formatos Gráficos en HTML
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
17
Diferencias (II)
ActualesTodosTodosSoporte en
Navegadores
NoNoSiAnimación
Si, 7 líneasNoSi, 4 líneasEntrelazado
PNGJPEGGIF
Formatos Gráficos en HTML
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
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.
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
Top Related