FORMATOS GRAFICOS PARA PAGINAS WEB

Copyright ©: http://www.desarrolloweb.com/.El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas seanvistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tareaagradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, siembargo, es también el causante de errores graves en las páginas y hacer de estas, en algunoscasos, un martirio para el visitante.Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sealigeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de lasimágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas,utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.Tipos de archivosEn Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensadosespecialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños setransmiten más rápidamente por la Red.El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formatoJPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma decomprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otrospropósitos.Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formatono tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan eldesconocimiento del formato por parte de los desarrolladores, que las herramientas habitualespara tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportan y que losnavegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato secomporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resultaríaútil si se llega a extender su uso.GIFA parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otrascaracterísticas que son importantes y útiles.Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante sila imagen es muy pequeña, aunque sea una foto.Un logotipo esun ejemplo clarode imagen GIFCopyright ©: www.desarrolloweb.comTransparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De estemodo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde estáinscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemosindicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos latransparencia cuando vamos a guardar el gráfico.Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos.Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen,por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en ungráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lohacemos mientras creamos el gráfico.32 colores16 colores8 coloresImagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien elgráfico y como pierde un poco a medida que le restamos colores.JPGVeamos ahora cuales son las características fundamentales delformato JPG:Compresión: Tal como hemos dicho anteriormente, sualgoritmo de compresión hace ideal este formato para guardarfotografías. Además, con JPG podemos definir la calidad de laimagen, con calidad baja el fichero ocupará menos, y viceversa.Parte de estaimagen estransparenteUna fotografía con formato JPGCopyright ©: www.desarrolloweb.comTransparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamoscolocar una imagen con un área que parezca transparente procederemos así: con nuestroprograma de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la páginadonde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán elmismo.IColores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.Optimizar ficherosPara que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemosaprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace connuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.GIF 256 colores - 10,8 KBGIF 32 colores - 5,5 KBGIF 4 colores - 2 KBPara los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando. Esteformato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en suaspecto visual.Intento detransparencia enJPGCopyright ©: www.desarrolloweb.comJPGcalidad 03 KBJPGcalidad 205,9 KBJPGcalidad 5010 KBEs imprescindible disponer para optimizar la imagen de unaherramienta buena que nos permita configurar estascaracterísticas de la imagen con libertad y fácilmente.Photoshop 5.5 o 6 es un programa bastante recomendable,pues incorpora una opción que se llama "Guardar para elWeb" con la que podemos definir los colores del gif, calidaddel JPG y otras opciones en varias muestras a la vez. Asícon todas las opciones configurables, viendo los resultadosa la vez que el tamaño del archivo podemos optimizar laimagen de una manera precisa con los resultados quedeseamos.También existen en el mercado otros programas que nospermiten optimizar estas imágenes de manerasorprendente. Una vez hemos creado la imagen la pasamos por estos programas y noscomprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo paraInternet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con losprogramas de edición gráfica.Photoshop es una herramienta excelentepara optimizar ficheros. Viendo variascopias podemos elegir la más adecuada.