El componente gráfico de las páginas web tiene mucha importancia, es el que
hace que estas sean vistosas y el que nos permite aplicar nuestra creatividad
para hacer del diseño de sitios una tarea agradable. Es también una herramienta
para acercar los sitios al mundo donde vivimos, si embargo, es también el
causante de errores graves en las páginas y hacer de estas, en algunos casos, un
martirio para el visitante.
Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas,
aunque sea ligeramente, nos ayudará a crear sitios agradables y rápidos. No
cometer errores en el uso de las imá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 archivos
En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG,
pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los
archivos pequeños se transmiten más rápidamente por la Red.
El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras
que el formato JPG se usa para las fotografías. Los dos comprimen las imágenes
para guardarlas. La forma de comprimir la imagen que utiliza cada formato es lo
que los hace ideales para unos u otros propósitos.
Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el
PNG. Este formato no tiene tanta aceptación como el GIF o JPG por varias razones,
entre las que destacan el desconocimiento del formato por parte de los
desarrolladores, que las herramientas habituales para tratar gráficos (como por
ejemplo Photoshop) generalmente no lo soportan y que los navegadores antiguos
también tienen problemas para visualizarlas. Sin embargo, el formato se comporta
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.
GIF
A parte de ser un archivo ideal para las imágenes que estén dibujadas tiene
muchas otras características que son importantes y útiles.
Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso
puede ser interesante si la imagen es muy pequeña, aunque sea una foto.
Transparencia: es una utilidad para definir ciertas partes del dibujo
como transparentes. De este modo podemos colocar las imágenes sobre distintos
fondos sin que se vea el cuadrado donde está inscrito la 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 podemos indicar qué colores del dibujo queremos que sean transparentes.
Generalmente, definimos la transparencia 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 un grá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 lo hacemos mientras creamos el gráfico.
32 colores |
16 colores |
8 colores |
Imagen tomada con distintas
paletas de colores. Se puede apreciar como con pocos colores se ve bien el
gráfico y como pierde un poco a medida que le restamos colores. |
JPG
Veamos ahora cuales son las características fundamentales del formato JPG:
Compresión: Tal como hemos dicho anteriormente, su algoritmo de compresión hace ideal este formato para guardar fotografías. Además, con JPG
podemos definir la calidad de la imagen, con calidad baja el fichero ocupará
menos, y viceversa.
Transparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamos colocar una imagen con un área que parezca transparente procederemos así: con nuestro programa de diseño gráfico haremos
que el fondo de la imagen sea el mismo que el de la página donde queremos
colocarla. En muchos casos los fondos de la imagen y la página parecerán el
mismo.
Colores: JPG trabaja siempre con 16 millones de colores, ideal para
fotografías.
Optimizar ficheros
Para que las imágenes ocupen lo menos posible y se transfieran rápidamente por
la Red debemos aprender 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 con nuestro editor gráfico, en muchos casos podremos hacerlo al
guardar el archivo.
GIF 256 colores - 10,8 KB
|
GIF 32 colores - 5,5 KB
|
GIF 4 colores - 2 KB |
Para los archivos JPG: Ajustaremos la calidad del archivo cuando lo
estemos guardando. Este formato nos permite bajar mucho la calidad de la imagen
sin que esta pierda mucho en su aspecto visua
 |
JPG
calidad 0
3 KB |
 |
JPG
calidad 20
5,9 KB |
 |
JPG
calidad 50
10 KB |
Es imprescindible disponer para optimizar la imagen de una herramienta buena
que nos permita configurar estas caracterí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 el Web" con la que podemos
definir los colores del gif, calidad del JPG y otras opciones en varias muestras
a la vez. Así con todas las opciones configurables, viendo los resultados a la
vez que el tamaño del archivo podemos optimizar la imagen de una manera precisa
con los resultados que deseamos.
También existen en el mercado otros programas que nos permiten optimizar estas
imágenes de manera sorprendente. Una vez hemos creado la imagen la pasamos por
estos programas y nos comprimen aun más el archivo, haciéndolo rápido de
transferir y, por tanto, más optimo para Internet. Al ser estas utilidades tan
especializadas los resultados suelen ser mejores que con los programas de
edición gráfica.
Ejemplos de optimizadores gráficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
Y con versiones Online:
- JPG - GIF Crunchers
- GIF Wizard
