Google


gràfics per la web

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.

 

retallat d'imatges

Retallar una imatge a bocins no només serveix per accelerar un poc la descàrrega i tenir més aviat alguna cosa que veure al navegador. També permet efectes d'enrevoltar imatges amb text impossibles amb l'html. Vegeu aquest exemple. Retallant la imatge per les línies indicades es pot pseudo-enrevoltar de text.

 

A aquesta pàgina:
   Diferències entre la ressolució de pantalla, d'impressora i d'escànner.
  Optimització del tamany de les imatges.
  Obtenir imatges amb càmeres digitals i webcams

De l'escànner a la web... Directament?
Hi ha que anar molt en compte amb les imatges que es preparen per visualitzar-se al web.

Heu de tenir en compte que la resolució del monitor és aproximadament de només 72dpi (punts per polzada). Si escanejeu a 300 dpi, estau obtenint imatges que seran innecessàriament grans, i que de fet, no es veuran absolutament gens millor que una imatge amb el mínim de resolució. Una imatge mastodòntica tardarà una eternitat en carregar-se i la gent no tindrà prou paciència per esperar.

Això es pot solventar amb el programa de tractament d'imatges, cercant l'opció que permeti canviar la densitat, o fent el que es diu re-mostreig (resample).

Després de preparar els vostres fitxers gràfics per a les pàgines web, guardeu sempre una imatge original amb el tamany i resolució i nombre de colors que calen per poder-la manipular sense limitacions. Si volem recuperar totes aquestes propietats a partir d'una imatge manipulada per veure's en pantalla, ens sortirà tot d'imperfeccions.

Això significa que els "originals" s'han de guardar amb un format que no perdi qualitat, i que conservi íntegra la informació de colors. Per a fitxers de mapa de bits, serveixen TIFF, BMP i els formats nadius de Photoshop, PaintShop Pro, Photopaint... Per als fitxers vectorials, no hi ha problema, basta guardar amb el format original del programa (AI, EPS, FH-,CDR, XAR...)

Com optimitzar el tamany de les imatges.
Donat que el tamany de fitxer d'un gràfic depèn del nombre de colors, del tamany i de la ressolució, tot allò que ens permeti retallar aquests paràmetres implicarà una reducció del fitxer i, per tant, del temps necessari per descarregar la imatge. Per una altra banda, podem jugar amb el nivell de compressió de la imatge (amb els fitxers jpg).

Sobre la ressolució, ja ho hem dit: prou amb 72 dpi.
El tamany de la imatge dependrà, evidentment, del que volguem mostrar, i del detall necessari. Cal tenir en compte, per a les imatges de gran tamany (tan grans com tota la pantalla, per exemple) que, en general, una imatge gran triga més en descarregar-se que una combinació d'unes quantes imatges més petites. Per això, a molts webs retallen les imatges grans en bocins, per accelerar la descàrrega.

El nombre de colors per a jpeg és, com a mínim, de 256. El que més permet adjustar el tamany és el grau de compressió. Si anem provant, podem arribar al tamany mínim amb el qual la pèrdua de qualitat és acceptable.

Un quadre de diàleg típic per a l'exportació de fitxers GIF. Podem optar per diferents opcions sobre el nombre de colors, el tipus de paleta, què fer amb els colors no presents a la paleta, transparència...

Amb els GIFs, passa a l'enrevés: el màxim és de 256 colors. Aleshores, podem escollir diferents tamanys per a la paleta de colors i què es fa amb la resta de colors a la imatge: convertir-los amb el més proper de la paleta disponible, o crear una trama que els simuli. Aquests dos paràmetres són els que ens permeten fer proves que assegurin un tamany mínim sense pèrdua de qualitat. Per a imatges amb relativament pocs colors, no hi tindrem cap problema. Però fins i tot amb fotografies, de vegades els gifs donen resultats sorprenentment bons.

Càmeres digitals, Webcams...
Les càmeres digitals (de les quals en parlam també a la secció de disseny gràfic) són la forma idònia d'incorporar fotografies a una pàgina web. Donat que treballen directament en un format gràfic digital estàndard, com ara el jpeg, disposarem immediatament de les imatges, estalviant-nos el cost i els diners del revelat.Les càmeres per a vídeoconferència, o webcams, són també una manera de fer fotografies digitals, molt més limitada que la càmera digital, però també molt econòmica.

 


    [ Vigital ] [ Manual de diseño digital, en castellano ] [ Contactar ]

idees i suggerències programes per al web Gràfics per al web CSS HTML

Pàgina inicial pàgina inicial