4a sessió: Edició d'imatges. GIFs animats.
Un aspecte fonamental de les pàgines Web és la inserció
d'imatges. Però ens trobem amb un tema delicat: la imatge necessita
memòria, i la transmissió d'aquest arxius pot saturar la
paciència de l'usuari. Per tant, caldrà treballar molt aquest
tema.
L'ordinador emmagatzema una imatge com un conjunt de punts, cadascun
amb un codi de color. Si volem que el codi pugui agafar qualsevol valor
entre els que l'ull pot diferenciar (True Color),
necessitarem 3 bytes (24 bits), un per cada component de color (codificació
RGB),
que podrà prendre valors entre 0 i 255.
Imaginem una imatge que ocupi 1/4 de pantalla VGA. Això serien
320 x 240 = 76800 píxels (parlem de píxel
quan es tracta d'un punt a la pantalla. Quan parlem d'un punt al paper
en diem un dot) . Si treballem amb True Color
en tindrem 76800 x 3 = 230400 bytes. Si l'usuari es connecta amb un mòdem
a 33600 bauds (bits / s), tenint en compte
que cada byte són 8 bits als que hem d'afegir un bit de capçalera
i un altre de final, l'usuari esperarà aquesta imatge uns 230400
x 10 / 33600 = 69 s, es a dir, més d'un minut. Massa !!!
Si la imatge fos el doble d'ample i el doble d'alta (VGA 640 x 480)
trigaria 4 vegades més: aproximadament 5 minuts. Desesperant !!!
Per això es fan servir tècniques d'estalvi que, normalment,
queden reflectides en diferents formats gràfics: BMP, TIFF, JPG,
GIF, ...
Bàsicament, HTML fa servir dos dels molts formats (al voltant
de 200) de fitxers gràfics existents:
-
Format GIF Graphics Interchange Format).
Cada píxel es codifica amb 1 byte, la qual cosa permet escollir
1 color entre 256. L'arxiu conté una taula dels 256 colors codificables
amb el seu valor RGB. Quan a la imatge es troba un color fora del 256 tabulats,
es substitueix pel més proper codificable, o bé es crea un
efecte òptic jugant amb la combinació de punts adjacents.
Amb això rebaixem la mida pràcticament a 1/3 de l'original.
Per altra banda, utilitza una tècnica no destructiva de compressió
de l'arxiu, incrementant l'estalvi. A més a més, aquest format
permet emmagatzemar seqüències d'imatges (GIFs animats), i
definir un dels colors com a transparent.
-
Format JPG o JPEG (Joint Photographics
Experts Group bitmap). Els píxels son codificats en 3 bytes, permetent
treballant amb fotografies. Utilitza una tècnica destructiva de
compressió (la imatge final no és exactament igual a la original,
però s'hi sembla), reduint molt la mida i el temps de tansmissió
utilitzat. Moltes càmeres digitals i escànners fan servir
internament aquest format. La càmara Casio QV-10A el fa servir i
l'utilitza per a emmagatzemar 96 fotografies 320 x 240 en 2 MB. Això
vol dir passar dels 225 KB calculats a només 20 Kb per fotografia.
Al mercat existeixen molts programes per a la manipulació d'imatges.
Un dels més populars és el Paint Shop
Pro, que actualment es troba a la seva versió 6 per a Windows
9x (per a Windows 3.x la versió superior és la 3.11). Les
versions 5 i 6, degut al seu càracter shareware, no permeten la
seva instal·lació passada certa data, quan la nova versió
ja és al mercat. La versió 4, encara que també té
una durada de prova d'un mes, es deixa instal·lar sempre, i serà
suficient per a les nostres necessitas. És per això que parlaré
de la versió 4.12, encara que qualsevol altra versió posterior
pot fer això i molt més, encara que de vegades podem trobar
l'opció desplaçada dintre del menu.
Veiem les opeacions més freqüents en les que farem servir
aquest programa:
-
Conversió de format d'arxius. Suposem
que tenim una imatge en un altre format (per eixemple J:\clips\BN\recycle.bmp)
i la volem tenir en format GIF (per eixemple a F:\archivo\icdlclc\1704\recicla.gif):
1. Obrim l'arxiu (File/Open)
2. El desem en l'altre format (File/Save
as)
En aquest punt, si el nombre de colors codificables final és
inferior a l'original, us demanarà confirmació per reduir
el nombre de colors (a 256 en el cas de desar en format GIF). Accepteu
i l'arxiu es desarà:
-
Canvi de la mida de la imatge. En aquest
cas, abans de desar l'arxiu, modificarem la seva mida a Image/Resize.
Si ens interessa mantenir la relació amplada/alçada, activeu
l'opció Mantain aspect ratio:
-
Selecció del color de fons (paper) com
a transparent (només imatges GIF). Si volem que la nostra
imatge no sembli un retall rectangular enganxat, podem fixar el color del
fons com a transparent.
1. Seleccionem com a color de fons
el que no volem que es vegi, sino que transparenti el fons de la pàgina.
Això ho fem seleccionant el comptagotes 
i clicant sobre el fons imatge amb el botó dret del ratolí.
Amb això agafem una mostra del color i el seleccionem com a color
del paper (si ho fessim amb el botó esquerra seleccionariem el color
de la tinta).
2. A File/Preferences/GIF
activem l'opció Set the transparency value
to the background color.
3. Desem l'arxiu en format GIF.
-
Utilització del gofrat per crear fons de
pàgines. Un dels efectes més utilitzats a les pàgines
Web és fer servir com a fons de la pàgina un relleu a partir
d'una imatge en B/N:
1.
Obrim la imatge, per eixemple J:\clips\BN\recycle.bmp
2. Si la imatge no està codificada
en true color (24 bits), fem Colors/Increase Color
Depth/16 Million Colors (24 bits), per permetre l'ús del
filtres.
3. Fem Image/Special
Filters/Emboss per realitzar el gofrat. 
4.
Ajustem la imatge amb Colors/Adjust/Brightness/Contrast.
En aquest cas he fet servir un 40% a Brightness i un -20% a Contrast
GIFs animats
Un GIF animat és una seqüència d'imatges GIF desades
en el mateix arxiu, cadascuna amb un temps de permanència i amb
la possibilitat de repetició cíclica.
Malgrat que el programa Paint Shop Pro,
a la versió 5 i següents, incorpora un editor de GIFs animats,
utilitzaré el MicroSoft GIF Animator,
programa gratuit, encara que difícil de trobar avui en dia.
La idea és molt senzilla: crear una animació a partir
d'una seqüencia d'imatges succesives. Els diferents fotogrames els
podem fer amb el Paint Shop Pro (chip1.gif,
chip2.gif
..., chip9.gif):
A continuació les muntem amb el MicroSoft
GIF Animator, posant-les per ordre i fixant el temps per a cada
imatge, així com el color de transparència (blanc) i la repetició
cíclica.
Finalment, desem l'arxiu com a chip.gif: 
© Jordi Orts, marg 2000
