Image

Formatos Gráficos en HTML

GIF,JPEG,PNG

Ramón Muñiz Sánchez

1

Formatos Gráficos en HTML

Formatos Gráficos en HTML 

Índice – – – – – – –

2

GIF. JPEG. PNG. Diferencias.

Conclusiones Referencias.

Preguntas.

Formatos Gráficos en HTML

GIF. Índice   

3

Presentación.

Características.

Usos

Formatos Gráficos en HTML

GIF. Presentación

4



GIF (Graphics Interchange Format).



Creado por CompuServe en 1987.



Formato soportado por la mayoría de navegadores Web.

Formatos Gráficos en HTML

GIF. Características      

5

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

GIF. Usos    



6

Botones.

Logotipos.

Anuncios.

Iconos.

Actualmente, formato desaconsejado por la W3C(World Wide Web Consortium).

Formatos Gráficos en HTML

JPEG. Índice   

7

Presentación.

Características.

Usos.

Formatos Gráficos en HTML

JPEG. Presentación.

8



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

JPEG. Características      

9

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

JPEG. Usos

10



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

PNG. Índice   

11

Presentación.

Características.

Usos.

Formatos Gráficos en HTML

PNG. Presentación

12



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

PNG. Características (I) 

Formato sin perdida de datos.



Bits de profundidad variable según el tipo de imagen.

– – –

13

8/16 bits en escala de grises.

8 bits en color indexado.

24/48 bits en color verdadero.

Formatos Gráficos en HTML

PNG. Características (II) 

Transparencias.

– –

 

14

Color indexado.

Color verdadero y escala de grises.

Entrelazado.

No soporta animación.

Formatos Gráficos en HTML

PNG. Usos 

Bitmaps – – – –



15

Botones.

Anuncios estáticos.

Logotipos.

Iconos.

Imágenes reales (fotos).

Formatos Gráficos en HTML

Diferencias (I)

16

GIF

JPEG

PNG

Bits de profundidad

8 (256 colores)

24 (16.7M colores)

Variable.

Compresión

Sin perdida

Con perdida

Sin perdida

Transparencia

Sí

No

Sí

Formatos Gráficos en HTML

Diferencias (II)

17

GIF

JPEG

PNG

Entrelazado

Si, 4 líneas

No

Si, 7 líneas

Animación

Si

No

No

Soporte en Navegadores

Todos

Todos

Actuales

Diferencias (III) 

Niveles de compresión.

– –

18

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. GIF

JPEG

PNG

Tamaño

4,0 Mb

10,4/1,2 Mb

20,8 Mb

Ratio

1:6

1:2,7/1:24

1:1,37

Conclusiones

19



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.

Formatos Gráficos en HTML

Referencias     

20

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

Preguntas

 ¿Preguntas?

21