Articles rel·lacionats:
Primeres passes per fer una pàgina web
...(conceptes bàsics html) com crear un arxiu HTML i posar informació al codi font ...
Què és CSS - conceptes bàsics
...(introducció als Fulls d'Estil) aspecte visual, presentació i disseny d'una pàgina web ...
Fer llocs compatibles amb els estàndards web
...(disseny amb estàndards) qualsevol document que es publiqui a la web ha de poder funcionar en diferents navegadors, plataformes i dispositius ...
...(conceptes bàsics html) com crear un arxiu HTML i posar informació al codi font ...
Què és CSS - conceptes bàsics
...(introducció als Fulls d'Estil) aspecte visual, presentació i disseny d'una pàgina web ...
Fer llocs compatibles amb els estàndards web
...(disseny amb estàndards) qualsevol document que es publiqui a la web ha de poder funcionar en diferents navegadors, plataformes i dispositius ...
consideracións inicials en el ús de imatges per a la web
Gràfics de mapa de bits
Existeixen dos tipus principals d'imatges digitals: els mapes de bits, en els quals la imatge es crea mitjançant una reixeta de punts de diferents colors i tonalitats, i els gràfics vectorials, en els quals la imatge es defineix per mitjà de diferents funcions matemàtiques.
Les imatges de mapa de bits (bitmaps o imatges raster) estan formades per una reixeta de cel·les, a cada una de les quals, denominada píxel (Picture Element, Element d'Imatge), se li assigna un valor de color i lluminària propis, de tal manera que la seva agrupació crea la il·lusió d'una imatge de to continu.
Un píxel és doncs una unitat d'informació, però no una unitat de mesura, ja que no es correspon amb una mida concreta. Un píxel pot ser molt petit (0.1 mil·límetres) o molt gran (1 metre).
Pes d'un fitxer gràfic
Els mapes de bits poden estar definits en un nombre variable de colors. Com a regla general, quants més colors tingui la imatge, major qualitat tindrà, encara que aquesta regla depèn molt de la imatge per si mateix.
Si treballem amb una profunditat de color de 8 bits tindrem 256 colors possibles per a cada píxel (cas d'icones o il·lustracions en format GIF, per exemple) i si augmentem la profunditat a 24 bits tindrem milions de colors per a cada píxel de la imatge (cas de fotografies en format JPG o PNG, per exemple).
També podem definir diferents resolucions per a una imatge. Quant major sigui la resolució, més píxels formaran la imatge, més dades d'informació necessitarà i, per tant, major serà la mida del fitxer resultant.
Per tant, quants més colors tingui una imatge i quant major sigui la seva resolució, major pes tindrà el fitxer necessari per emmagatzemar-la.
Generalment, els fitxers d'imatges de mapa de bits necessiten emmagatzemar molta informació gràfica, la qual cosa fa que el seu pes final en bytes sigui excessiu, tant per a la seva impressió (si la imatge és molt gran pot durar molt el procés d'impressió) com per a la seva transferència per Internet, medi en el qual l'ample de banda és molt limitat.
Per això en el ús de imatges per a la web ens cal:
- Reduir el nombre de colors utilitzats en la imatge.
- Comprimir les dades de la imatge perquè ocupin menys espai.
Les imatges 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="logo.jpg" />
imatges i pàgines web
Els formats gràfics
Els formats corrents d'imatge que manegen els navegadors són bàsicament dos: GIF i JPG.
podeu trobar més informació aquí:
Gràfics per a les pàgines Web
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.
El format GIF està doncs especialment indicat en imatges amb menys de 256 colors en les quals molts punts consecutius tinguin el mateix color, es repeteixin seqüències de colors o continguin principalment texts. A més, la variant GIF89a, creada el 1989, permet la creació d'imatges transparents, d'animacions i d'imatges amb entrellaçat, elements gràfics molt útils, sobretot en la web.
JPEG és un format especialment adequat per a imatges amb molts colors i amb gradacions de tons (imatges de to continu), com les fotografies o les digitalitzacions d'alta qualitat. S'usa per emmagatzemar imatges de tipus vectorial o dibuixos senzills on s'observarà com la compressió disminueix enormement i les modificacions fetes sobre la imatge original són apreciables a simple vista.
Optimitzar les imatges
Una imatge de 50 Kb teòricament trigarà en carregar-se uns 10 segons usant un mòdem de 56 Kb/segon, temps bastant elevat, que augmenta a la pràctica en ser l'ample de banda útil real bastant més baix. Si una pàgina web conté diverses d'aquestes imatges, el resultat final serà inviable
Es fa precís doncs controlar el nombre d'imatges incloses a cada pàgina i la realització d'un procés d'optimització dels fitxers gràfics en el qual, a més d'elegir el format d'emmagatzemament més adequat, es busqui la relació qualitat/pes més encertada
La majoria dels programes gràfics de qualitat ofereixen una eina per optimitzar el pes d'un fitxer gràfic destinat a la web.
Si utilitzem el programa Adobe Photoshop podem fer ús de la eina Guardar per la web que trobem al menú Arxiu del programa.
En la finestra que s'obre podem escollir el format d'arxiu que volem utilitzar, els ajusts i la qualitat.
Un altre factor a tenir en compte és la mida física de la imatge. A major mida, major pes en Kb. Hem de buscar doncs una mida suficient perquè la imatge es vegi bé, però no d'un fitxer d'un pes excessiu.