1

Formatos Gráficos en HTML

GIF,JPEG,PNG

Ramón Muñiz Sánchez

2

Formatos Gráficos en HTML

Índice– GIF.– JPEG.– PNG.– Diferencias.– Conclusiones– Referencias.– Preguntas.

Formatos Gráficos en HTML

3

GIF. Índice

Presentación. Características. Usos

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

7

JPEG. Índice

Presentación. Características. Usos.

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

11

PNG. Índice

Presentación. Características. Usos.

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

21

Preguntas

¿Preguntas?

Formatos Gráficos en HTML