IPRO - PC Magazine Romania, 2002
Comunitatea experţilor şi a cititorilor PC Magazine - Internet PRO

Folosirea imaginilor în paginile web - JPG vs. GIF

La începuturile internetului, când acesta era folosit doar în scopuri militare şi academice, browserele puteau afişa numai text. Mai târziu, când a devenit evident potenţialul acestui nou mediu de comunicare, ele au fost adaptate astfel încât să poată să aducă şi imagini pe ecranele internauţilor. Primul browser care suporta imagini alături de text a fost realizat de National Center for Supercomputing Applications (NCSA) din Illinois şi s-a numit Mosaic.

NCSA a introdus în limbajul HTML şi tag-ul <img> iar aproape toate browserele care au urmat (inclusiv Internet Explorer şi Netscape Navigator) au avut la bază tehnologia folosită la Mosaic. Astfel, paginile web s-au dezvoltat, vizitatorii au fost din ce în ce mai pretenţioşi iar webdesignerii au venit cu fel de fel de soluţii în întâmpinarea acestor noi cerinţe. Au apărut meniurile de navigare cu butoane, imaginile din fundal, imagini care se schimbă atunci când sunt atinse de cursorul mouse-ului, imagini animate, pe scurt, web-ul a căpătat culoare. Cu aceasta au început însă să apară şi problemele.

Cel mai mare obstacol în calea folosirii imaginilor l-a constituit, şi încă îl constituie, dimensiunea relativ mare a acestora. Nu mă refer la dimensiunea vizibilă a unei imagini ci la mărimea fişierului acesteia. Astfel, pentru a umple un ecran cu text într-o pagină web este suficient aproximativ 1 kB. Însă o imagine măsurând numai 100 x 100 pixeli poate trece cu uşurinţă de 10 kB iar o fotografie normală poate avea chiar şi peste 100 kB. În aceste condiţii, timpul de aşteptare pentru vizionarea unei pagini web s-a mărit considerabil. Mulţi designeri web şi-au umplut paginile cu efecte grafice extraordinare, însă cu siguranţă nu toţi vizitatorii acestora le-au putut admira. Nu cred că nu vi s-a întâmplat niciodată să închideţi o pagină web înainte ca aceasta să se fi încărcat, pentru simplul motiv că descărcarea imaginilor părea că durează o veşnicie.

Odată cu dezvoltarea internetului au apărut însă şi conexiuni din ce în ce mai puternice, astfel încât astăzi această problemă nu mai este de prea mare actualitate. Din păcate în România preţul unei astfel de conexiuni la internet este destul de ridicat şi majoritatea utilizatorilor încă folosesc conexiuni dial-up normale. De aceea vă sfătuiesc să nu supraîncărcaţi paginile web cu efecte vizuale. Va mai trece ceva timp până când designerii spaţiului web românesc vor putea să nu îşi mai facă griji cu privire la durata de acces a paginilor lor, aşa cum se întâmplă prin lumea aşa-zis civilizată.

Cele mai folosite formate de imagini pe web sunt GIF (Graphic Image File Format) şi JPG / JPEG (Joint Photographic Experts Group). Înainte de a analiza aceste două formate, să trecem în revistă principalele atribute ale imaginilor. Aşadar, ele se includ în paginile web astfel:

<img src="sursa.jpg" width="100" height="200" vspace="5" hspace="3" alt="Text alternativ" align="left" border="0">
Width şi height determină lăţimea şi înălţimea imaginii în pixeli (sau în procente). Cu ajutorul lui vspace şi hspace se stabileşte spaţiul orizontal (în pixeli), respectiv vertical dintre imagine şi restul conţinutului care o înconjoară. Atributul alt precizează un text alternativ care va fi afişat atunci când imaginea respectivă nu a fost încărcată, astfel încât utilizatorul să îşi poată face o idee cu privire la ceea ce ar trebui să apară în locul respectiv. Acest text va apărea pentru scurt timp şi atunci când cursorul mouse-ului va fi plasat pe imaginea respectivă. Tag-ul img suportă şi atributul align="left", respectiv align="right". Atunci când o imagine este introdusă în text cu unul din aceste atribute, ea se va alinia la stânga, respectiv la dreapta container-ului părinte, fiind înconjurată de text. Nu folosiţi atributul align="center" pe tag-ul unei imagini, deoarece nu va avea nici un efect. Pentru a centra o imagine introduceţi-o într-un div astfel:

<div align="center"> <img src="imagine.gif"> </div>

Atributul align al unei imagini mai suportă şi alte valori, şi anume top, middle şi bottom. Acestea se referă la alinierea verticală a imaginilor, în funcţie de textul care le însoţeşte. Top va determina ca textul să fie aliniat cu partea de sus a imaginii, middle va face ca mijlocul textului să fie aliniat cu mijlocul imaginii, iar bottom va aduce pe aceeaşi linie partea de jos a textului cu partea de jos a imaginii. Border="pixeli" va încadra imaginea într-o ramă de o anumită dimensiune.

Culoare
Principala diferenţă dintre GIF şi JPG o constituie numărul de culori care poate fi afişat. Formatul GIF suportă maxim 256 de culori pe 8 biţi. Aşadar, fiecare pixel dintr-o astfel de imagine poate primi o valoare de la 0 la 255 care corespunde unei anumite culori. În comparaţie, formatul JPG poate afişa 16.777.216 de culori pe 24 biţi. Ca o regulă de bază a web-ului, folosiţi GIF pentru butoane, icon-uri şi alte efecte grafice care nu necesită o paletă de culori prea diversificată. JPG este ideal pentru imaginile fotografice. Paletele de culori disponibile utilizatorilor depind atât de hardware (monitor, placă video) cât şi de software (sistem de operare, setări, drivere).

gif	jpg
fig 1.

Acestea fiind spuse, discuţia noastră asupra folosirii celor două formate s-ar putea termina aici. Mai sunt totuşi multe de spus. La prima vedere, JPG pare a fi un format net superior în comparaţie cu GIF. Nu este adevărat. Cele două formate se completează reciproc iar răspândirea şi folosirea lor în paralel nu este deloc întâmplătoare. După cum spuneam, atunci când nu avem nevoie de prea multă culoare, ar fi mai bine să apelăm la GIF, altfel vom încărca inutil paginile. Dacă pentru graficul din Figura 1 folosim GIF, fişierul va avea 3,6 kB. Acelaşi grafic, salvat ca JPG va avea 12,9 kB însă diferenţa de caliatate nu este sesizabilă.

fig 3.

În plus, GIF suportă transparenţa şi animaţia. Transparenţa înseamnă că valoarea unei culori este înlocuită de "gol" astfel încât atunci când imaginea va fi afişată într-o pagină web, în locul culorii transparente va apărea fundalul paginii (care poate fi o culoare sau o imagine). Dacă în graficul din Figura 1 înlocuim albul cu transparenţă şi includem imaginea într-o pagină cu un fundal vărgat vom obţine efectul din Figura 2.

Animaţia GIF presupune salvarea în cadrul aceluiaşi fişier a mai multor cadre care vor fi afişate în mod succesiv, putându-se stabili durata afişării fiecăruia, precum şi de câte ori să se repete animaţia. Procedeul este acelaşi ca şi în cazul desenelor animate de la televizor iar dimesiunea unui fişier GIF animat va fi direct proporţională cu numărul de cadre incluse. Această tehnologie a fost prima care a adus mişcare pe paginile web. În prezent, ea este însă pe cale de dispariţie, animaţiile Flash fiind din toate punctele de vedere net superioare. Singurul avantaj al GIF-urilor animate îl constituie faptul că utilizatorii nu au nevoie de vreun plug-in pentru a le putea vizualiza. (vezi Figura 3)

Până în urmă cu câţiva ani, GIF mai avea un atu faţă de JPG: permitea ca o imagine salvată în acest format să se încarce mai întâi la o calitate redusă, iar apoi - pe măsură ce browser-ul o descărca de pe server - aceasta să devină din ce în ce mai clară. Această opţiune la optimizarea GIF-urilor se numeşte "Interlaced" şi sporeşte dimensiunea fişierului cu câţiva octeţi. În comparaţie cu GIF-urile, imaginile JPG se descărcau linie cu linie, însă apoi a apărut această opţiune şi pentru acest format; în acest caz ea se numeşte "progressive JPG" şi determină ca fişierul imaginii să fie un pic mai mic decât în mod normal.

Comprimare
Comprimarea face ca unele grafice mari să "încapă" în fişiere mai mici. Formatele GIF şi JPG comprimă imaginile în mod diferit.

GIF foloseşte în principal tehnica bazată pe comprimarea pe lungime. După cum am mai spus, fiecărui pixel dintr-o imagine îi corespune o valoare între 0 şi 255 iar ceea ce se salvează în fişier nu este altceva decât o succesiune de astfel de valori. Însă într-o imagine nu fiecare pixel diferă de cel de lângă el, ci apar mai degrabă şiruri de pixeli identici. Prin comprimare, în fişierul GIF nu se va salva câte o valoare pentru fiecare pixel în parte, ci succesiuni de genul "următorii 30 de pixeli au valoarea 189, următorii 80 de pixeli au valoarea 34 ş.a.m.d.". Această tehnică reduce semnificativ dimensiunea GIF-urilor şi tot din cauza ei o imagine va avea o cu totul altă dimensiune atunci când este răsturnată. În Figura 4, graficul cu linii orizontale are 299 octeţi iar cel cu linii verticale are 855 octeţi.

gif 4 culori	gif 16 culori
gif 64 culori	gif 256 culori

JPG reduce mărimea fişierului unei imagini prin scăderea calităţii acesteia. Imaginea este simplificată însă ochiul nu va sesiza aceste pierderi minime de informaţii. Totuşi, diferenţa de spaţiu de memorie ocupat de un JPG optimizat prin această metodă poate fi semnificativă. Desigur, dacă "supra-optimizăm" un JPG, rezultatul va fi catastrofal. În Figura 5, prima imagine are 27,82 kB, iar cea de a doua 10,48 kB.

fig 4.

Pe multe pagini web am văzut astfel de JPG-uri de slabă calitate. Realizatorii acestora se pare că au fost mai preocupaţi de dimensiunea în kB a imaginilor decât de aspectul lor. Totuşi, dacă tot vrem să-i încântăm pe vizitatorii noştri cu efecte vizuale de orice fel ar fi mai bine să dăm o atenţie sporită rezultatului final. Altfel paginile noastre nu îşi vor atinge scopul, vizitatorii probabil că vor pleca dezamăgiţi şi şansa ca ei să se mai întoarcă va fi minimă. Procedeul optimizării imaginilor pentru web nu este unul simplu iar lucrul cu programele grafice necesită destul de multă experienţă. Se poate spune că un sit are o grafică bună (mă refer la aceasta din punct de vedere tehnic, şi nu al valorii ei artistice) atunci când se găseşte acel raport ideal între calitatea imaginilor (GIF sau JPG) şi timpul necesar descărcării lor. Nu optimizaţi niciodată o imagine cu scopul de a o aduce la o anumită dimensiune pentru că uneori se pierde o bună parte din calitate pentru doar câţiva octeţi. Unui vizitator puţin îi va păsa dacă o imagine are 3, 5 sau 20 kB; ceea ce contează pentru el este cât de repede a fost ea încărcată. Aşadar, atunci când ne apucăm de un sit este bine să ştim de la bun început pe ce fel de server va fi găzduit, deoarece viteza acestuia este unul din factorii cei mai importanţi în determinarea succesului paginii noastre; indiferent cât de bine optimizăm imaginile, dacă gazda noastră web este de slabă calitate, întreg efortul a fost în zadar.

fig 5.

Vorbeam de lucrul cu programele grafice. Există o mare diversitate în acest sens, de la programe freeware până la suite de aplicaţii grafice care costă câteva mii de dolari. Multe dintre aceste programe au funcţii create special pentru optimizarea imaginilor pentru web. Menţionez doar câteva dintre cele mai de succes aplicaţii grafice, lăsându-vă pe dumneavoastră să decideţi care este cel mai potrivit pentru lucrul pe web: Adobe Photoshop (versiunea 6), Corel Draw (versiunea 10) şi Macromedia Fireworks (versiunea 4).

Emanuel Baruch

Soluţii şi probleme

Dacă soluţia ta va fi aleasă de redacţia PC Magazine România drept ,,Soluţia Lunii" vei primi un abonament pe un an la revista noastră. Soluţiile şi problemele pot fi trimise pe adresa ipro@pcmagazine.ro sau prin poştă pe adresa Redacţia PC Magazine România, Bucureşti, CP 94 OP 49, împreună cu datele de identificare, cu menţiunea pentru rubrica ,,Internet PRO". Soluţia şi problema anului vor primi un premiu de 100$.