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.
Un logotipo es
un ejemplo claro
de imagen GIF
Copyright ©: www.desarrolloweb.com
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 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.
Parte de esta
imagen es
transparente
Una fotografía con formato JPG
Copyright ©: www.desarrolloweb.com
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.
I
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 KBGIF 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 visual.
Intento de
transparencia en
JPG
Copyright ©: www.desarrolloweb.com
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.
Photoshop es una herramienta excelente
para optimizar ficheros. Viendo varias
copias podemos elegir la más adecuada.
No hay comentarios:
Publicar un comentario