Issuu on Google+

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

No


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


Image