Formatos Grficos en HTML

GIF,JPEG,PNG

Ramn Muiz Snchez

Formatos Grficos en HTML

Formatos Grficos en HTML

ndice

GIF. JPEG. PNG. Diferencias. Conclusiones Referencias. Preguntas.

Formatos Grficos en HTML

GIF. ndice

Presentacin. Caractersticas. Usos

Formatos Grficos en HTML

GIF. Presentacin

GIF (Graphics Interchange Format). Creado por CompuServe en 1987. Formato soportado por la mayora de navegadores Web.

Formatos Grficos en HTML

GIF. Caractersticas

8 bits de profundidad(256 colores). Transparencias de 1 bit. Creacin de animaciones. Uso de entrelazado para mostrar imgenes ms rpido. Compresin sin perdida de informacin. Extensin: .gif

Formatos Grficos en HTML

GIF. Usos

Botones. Logotipos. Anuncios. Iconos. Actualmente, formato desaconsejado por la W3C(World Wide Web Consortium).

Formatos Grficos en HTML

JPEG. ndice

Presentacin. Caractersticas. Usos.

Formatos Grficos en HTML

JPEG. Presentacin.

JPEG (Joint Photographic Experts Group). Aparecido a mediados de los 80. Formato soportado por la mayora de navegadores Web.

Formatos Grficos en HTML

JPEG. Caractersticas

24 bits de profundidad(16.7M colores). Formato de compresin con prdida. Posibilidad de seleccionar nivel de compresin. No soporta transparencias. No soporta animaciones. Extensin: .jpeg, .jpg

Formatos Grficos en HTML

JPEG. Usos

Imgenes reales (fotos). Imgenes con degradados. Estndar de facto para la web en cuestin de fotografas.

10

Formatos Grficos en HTML

PNG. ndice

Presentacin. Caractersticas. Usos.

11

Formatos Grficos en HTML

PNG. Presentacin

PNG (Portable Network Graphics) Apareci en 1996. Creado para sustituir al formato GIF. Soportado por los navegadores ms actuales.

12

Formatos Grficos en HTML

PNG. Caractersticas (I)

Formato sin perdida de datos. Bits de profundidad variable segn el tipo de imagen.

8/16 bits en escala de grises. 8 bits en color indexado. 24/48 bits en color verdadero.

13

Formatos Grficos en HTML

PNG. Caractersticas (II)

Transparencias.

Color indexado. Color verdadero y escala de grises.

Entrelazado. No soporta animacin.

14

Formatos Grficos en HTML

PNG. Usos

Bitmaps

Botones. Anuncios estticos. Logotipos. Iconos.

Imgenes reales (fotos).

15

Formatos Grficos en HTML

Diferencias (I)
GIF Bits de profundidad Compresin Transparencia 8 (256 colores) Sin perdida S JPEG 24 (16.7M colores) Con perdida No PNG Variable. Sin perdida S

16

Formatos Grficos en HTML

Diferencias (II)
GIF Entrelazado Animacin Soporte en Navegadores Si, 4 lneas Si Todos JPEG No No Todos PNG Si, 7 lneas No Actuales

17

Diferencias (III)

Niveles de compresin.

Imagen de 24 bits y a 300 dpi, de un mapa a color de 8,45 x 12,75 pulgadas. Tamao en formato TIFF: 28,4 Mb. GIF JPEG 10,4/1,2 Mb 1:2,7/1:24 PNG 20,8 Mb 1:1,37

Tamao Ratio

4,0 Mb 1:6

18

Conclusiones

Uso de GIF/PNG para imgenes pequeas como iconos, botones, etc. Uso de JPEG para imgenes grandes o con resoluciones de color grandes.

19

Formatos Grficos en HTML

Referencias

Wikipedia en Espaol. (es.wikipedia.org) VitaminaWeb. (www.vitaminaweb.com) W3C (www.w3c.org) JPEG (www.jpeg.org) PNG (www.libpng.org)

20

Formatos Grficos en HTML

Preguntas

Preguntas?

21