Formats de gràfics per al web.
Programes de gràfics aconsellats.
Animacions i Flash.
Optimització de les imatges.
Ús d'imatges com a fons de pàgines i taules.
Elements de navegació: Mapes d'imatges i rollovers.

Els dingbats són una font instantània i variadíssima d'imatges molt útils per preparar molt ràpidament tota mena d'icones i gràfics per a les pàgines web. Aquestes imatges estan contingudes a Webdings (gratuït, de Microsoft), tret de la ploma, de Zapf Dingbats.

Amb la combinació d'imatges i disseny amb taules es poden crear tota mena d'efectes interessants per a les pàgines web.

L'aspecte de les pàgines web d'ara té poc a veure amb les dels anys 94 o 95... aleshores, gairebé totes tenien un fons gris, text escrit de banda a banda en un sol bloc i algunes (poques) imatges. No era, evidentment, la rica experiència visual d'ara.

A aquesta pàgina:
Gràfics a les pàgines Web. Com s'incorporen les imatges als documents html.
El format GIF: el format gràfic bàsic per a la web.
Els JPEG. L'opció idònia per a fotografies i altres imatges.
Flash i SVG. Formats vectorials que es van imposant gradualment.
Crear un esbós visual de la web. Ús dels programes de gràfics per planejar, visualment, el disseny de les pàgines.

De fet, actualment moltes pàgines web estan basades gairebé per complet en la imatge; al menys pel que fa a les pàgines de portada o benvinguda. També és cert que si volem aportar contingut a un web, hem de recurrir al text convencional.

Aquestes imatges, com hem dit, són fitxers que estan separats del que és el fitxer de la pàgina web pròpiament dita, i s'hi enllacen amb un codi especial (<img src="nom_imatge">)

Els formats corrents d'imatge que manegen els navegadors són bàsicament dos: GIF i JPG. Si ho voleu comprovar, aneu a qualsevol pàgina web, aneu sobre una imatge i pitgeu el botó dret. Escolliu "propietats" i veureu quin tipus de fitxer és. S'ha intentat introduïr altres formats, com ara el PNG, però no ha tingut gaire èxit (i de fet, els navegadors ni tan sols el poden visualitzar per si sols, sense un plugin!)

El problema amb els estàndards "oficials" per als formats d'arxiu per a navegadors és que han de ser no patentats, utilitzables per tothom sense pagar roialtis. En canvi, el format shockwave flash (SWF) si que s'ha convertit de facto en un estàndard per a la transmissió d'imatges vectorials que, a més, poden contenir so, presentar interactivitat, animació... i és un format propietat de Macromedia. No és d'extranyar el seu èxit, perquè les animacions de flash estan plenes d'avantatges, i són fitxers molt petits, fàcils de transmetre per la xarxa.

GIF: el fitxer "tot terreny" per al web.
Els fitxers GIF (de Graphics Interchange File) no perden qualitat amb la compressió, i viatgen molt bé a través de la xarxa. En general són més ràpids per mostrar-se al navegador. Es pot definir un color com a transparent, i d'aquesta manera deixar veure el fons a través d'ell, com si estés retallat i enganxat sobre la pàgina. A més, es poden col.locar múltiples imatges seqüenciades en un sol fitxer, creant una animació. Els GIFs animats tenen presència ubíqua a la web, en especial als anomenats banners (les tiretes de publicitat que apareixen tan sovint).

La limitació principal que tenen els GIFs és el nombre de colors: 256 com a màxim. Això fa que una imatge amb transicions suaus de color, com una foto, s'ha d'elaborar fent una trama dels colors disponibles, i pugui perdre qualitat. Tot depèn del tipus d'imatge, però: de vegades es pot aconseguir un gif fotogràfic ben acceptable.

Als primers anys de la www, s'insistia molt en la necessitat de que els colors dels gifs pertanyessin a l'anomenada "paleta segura": un conjunt de colors que es veuen a qualsevol monitor amb targeta gràfica de 256 colors, sigui un Mac o un PC. Discutim aquesta qüestió amb un poc més de detall a una pàgina suplementària.

JPEG. Idoni per certs usos.
El format JPG (de Joint Photograph Experts Group) funciona amb milions de colors distints i, per tant, no té problemes per representar canvis graduals de color. Ara bé, aquest format funciona amb un sistema de compressió de dades que fa que es perdi qualitat. Es pot controlar el grau de compressió per arribar a un equilibri entre qualitat i tamany (vegeu gràfic adjunt). Com més comprimim una imatge, en general, major pèrdua de qualitat es produirà. Experimentant amb el grau de compressió, podem arribar un percentatge que suposa el millor compromís entre qualitat i tamany.

Com a desaventatges, no permet transparència i sempre és una imatge única, estàtica.

Per resumir, en general, resulta convenient un gif per imatges amb colors plans: icones, gràfics simples, il.lustracions senzilles. També sol ser més idoni per a requadres de text. En canvi, el format jpg és l'opció més adient per a les fotografies o per aquells gràfics amb molts colors, com ara imatges que tenen degradats suaus.

Tanmateix, la majoria de programes de gràfics permeten guardar tant un tipus d'arxiu com l'altre i es pot intentar veure quin format resulta més satisfactori, pel que fa al tamany de la imatge. respecte de la qualitat del color i la definició de les formes. No és una regla absoluta manejar jpg per a les fotografies, perquè, de fet, moltes vegades és possible utilitzar un gif, amb qualitat satisfactòria. La probabilitat de que surti bé depèn de si és una imatge relativament plana o si té molts colors suaus. Sempre hi ha la manera de processar la imatge (adjustant el seu contrast, reduïnt el nombre de colors...) per tal que es pugui guardar com a gif sense problemes.

Quin format de gràfic convé emprar?
Hi ha una regla general, que convé recordar: el format GIF és recomanable per gràfics simples i amb colors plans; el format JPG va perfectament per fotografies, o imatges amb transicions suaus de colors i gradients.

Un flash de detalls.
La limitació de gif, jpg i png és que són fitxers de mapa de bits, amb una ressolució fixa. No és possible canviar el grau d'ampliació de la imatge dins del navegador; i si ho fem amb un programa de gràfics, perdem qualitat amb l'ampliació. La solució òbvia seria usar gràfics vectorials. Però els navegadors no han incorporat aquesta possibilitat fins fa relativament poc.

Si voleu incloure imatges a les quals es pugui apreciar bé el detall, si cal ampliant l'àrea a observar, i si voleu afegir interactivitat, considerau utilitzar el format flash (o Shockwave Flash). Amb els navegadors de versió 4 - 5, no hi haurà cap problema, perquè incorporen el plugin necessari. I si un usuari no el té, és pot baixar molt ràpidament de Macromedia (http://www.macromedia.com). Tanmateix, Flash s'empra més per a animacions interactives, una mena de "pel.lícules" que per il.lustracions estàtiques. (Discutim més detalls sobre flash a la secció d'animació.)

Flash ha esdevingut l'estàndard de facto per a gràfics vectorials, però hi ha un nou format emergent, que és recomanat i impulsat pel consorci de la www, i es diu SVG (Scalable vector graphics). En el futur potser s'empri amb abundància.

Molts dissenyadors fan primer una simulació del disseny de la pàgina web fora dels programes d'edició d'html: utilitzen, en canvi, un programa de gràfics.

Crear un esbós visual de la web.
Els programes de dibuix i pintura ens permeten crear diferents simulacions del disseny que tendrà la nostra web, sense l'esforç de crear taules, col.locar els elements de text i gràfics... i després refer-ho tot. És una forma de treballar molt estesa entre els professionals.

Per començar, cal fer un treball previ amb paper i llapis. Començar a definir la imatge que volem per a la web. Fen llistes de temes a considerar, estil gràfic que pretenem usar... Ara cal fer alguns esbossos bàsics, aplicar algunes notes de color, alguna idea de composició general...

Un cop tenim algunes idees de partida, passem a l'ordinador i cream una forma rectangular amb les dimensions proporcionals a la pantalla, i començam a fer totes les proves que volguem. A partir d'ara serà molt millor treballar amb els programes en comptes d'amb paper, perquè podrem fer les proves que volguem de forma reversible i ràpida; podrem guardar totes les alternatives i veurem l'efecte real en pantalla.

Els programes d'il.lustració tenen un avantatge addicional sobre els de pintura, perquè els elements es poden reordenar i canviar de tamany i forma tot el temps; per això, és aconsellable fer les propostes amb un programa de dibuix vectorial (si cal podem col.locar-hi les imatges fotogràfiques o bitmaps que volguem.)

Quan hem arribat a un disseny satisfactori, el pas següent és recrear la imatge general en forma de pàgina web... una feina ben entretinguda. Cal tenir en compte que algunes idees que sorgeixen fàcilment amb el programa de dibuix o pintura no són fàcils de traduïr en forma de HTML, o poden exigir molt complicades estructures de taules i gràfics.

A partir d'aquí pot ser necessari retallar en petits bocins les imatges, recombinar-les en les taules que col.loquin tot al seu lloc a la pàgina web... programes com Fireworks o Imageready estan ben especialitzats en aquestes tasques.
A l'editor de pàgines web haurem de posar tot al seu lloc. Alguns d'aquests programes, com Dreamweaver, ho faciliten molt, ja que deixen col.locar una imatge com a plantilla per col.locar els elements de la pàgina. La imatge no s'incorpora a la pàgina (no és el fons de la pàgina), però permet situar amb precisió els bocins que hem preparat a partir d'ella i la resta de regions (taules, etc.) que repeteixen el disseny proposat.

    { A dalt }