Crea tu Web: Indice de diseño

Indice Visión general Previos Estructura Diseño Herramientas Recursos

 

Comparando formatos
Ante todo advertiros que esta página es muy pesada y tardará en cargarse bastante tiempo. Y es que contiene varias imágenes, algunas de ellas no optimizadas, imprescindibles para ilustrar lo que te contamos acerca, precisamente de la importancia de colocar imágenes optimizadas en tus páginas.
Formato JPG Formato GIF Formato PNG8
Imagen JPG (5,91 KB) La misma en formato GIF (16,4 KB) Y ahora en PNG8 (13,9 KB)
Como vemos en los ejemplos la imagen JPG ofrece una muy buena calidad para un tamaño nada excesivo. Los formatos GIF y PNG8 dan archivos muy grandes y con una calidad muy regular, solo usan 256 colores. Claro que estamos con una fotografía con degradados, es decir, con muchos tonos de color.
Muestra de imagen JPG Muestra de imagen GIF Muestra de imagen PNG8
JPG (6,18 KB) GIF (2,82 KB) PNG8 (2,51 KB)
Muestra de imagen PNG24Este otro ejemplo vemos que las imágenes con formatos GIF y PNG8 proporcionan una mayor calidad con menor tamaño que la imagen JPG, en este último puedes ver si te fijas que los colores de las letras no son uniformes como debieran. Además los archivos GIF y PNG permiten el uso de zonas transparentes. El siguiente gráfico está en formato PNG de 24 bits (equivalente a un JPG por número de colores). Es un archivo que con menos de 5 KB logra una excelente calidad.
¿Qué formato es el mejor?

Ya has podido comparar los diferentes formatos de los que vas a disponer a la hora de colocar gráficos en tus páginas. ¿Que formato elegir? La respuesta va a depender del tipo de gráfico, de la calidad que desees. En principio las fotografías quedan mejor en formato JPG, mientras que las imágenes con colores muy definidos y sin degradados puedes colocarlas en formato GIF o PNG. Evidentemente si lo que necesitas son imágenes animadas estas obligado a usar archivos GIF. Pero en general lo mejor es que pruebes las distintas posibilidades. En general los programas de edición de gráficos te ayudarán a la hora de exportar tus imágenes par la web.

Y ojo no pongas imágenes por ponerlas, sin más motivo que el hecho de que quedan bonitas. Procura que sirvan para algo, para atraer la atención sobre algo en concreto (un enlace, una novedad) o que den información, pues a fin de cuentas es lo que buscan quienes viajan por la red. En este sentido no olvides nunca rellenar el atributo ALT de los elementos img usados en HTML para colocar las imágenes. Este detalle también te ayudará a situarte en los buscadores.
Estructura de los sitios web
Las imágenes en tu página

Diseño Web | Plantillas Web | Guia de Estilo | Lenguaje HTML

Comunidad Virtual. Alojamiento web gratis