Optimizarea imaginilor pentru web

Articol de Daniel Toader. Google

Exista deja o gama variata de instrumente pentru editarea si manipularea imaginilor, si probabil fiecare dintre noi isi are programul favorit pentru pregatirea imaginilor. Acest articol insa, nu va trata instrumentele pentru editare ci se va concentra pe best practices si tehnici de optimizare ale imaginilor si elementelor grafice pe web.

De ce sa optimizam imaginile?

Multi dintre noi am fi tentati sa credem ca nu mai este nevoie de optimizarea imaginilor pentru web avand in vedere numarul mare de conexiuni broadband, insa lucrurile stau altfel. Luati in considerare urmatoarele motive pentru optimizarea imaginilor:

Cresterea accesarilor site-urilor web de pe dispozitivele mobile sau tablete.

Accesarile site-urilor de pe dispozitivele mobile cresc de la zi la zi, trebuie sa tinem cont de acest lucru si sa optimizam site-urile pentru o experienta placuta utilizatorilor pe toate dispozitivele. Chiar daca s-a lansat reteaua 4G, si viteza de download este mult mai mare fata de 3G, nu toate dispozitivele functioneaza cu reteaua 4G. Va mai dura cel putin 2-3 ani pana cand reteaua 4G va fi mai folosita decat cea 3G.

Paginile care se incarca mai repede au parte de un PageRank mai mare.

Intr-un comunicat de presa din 2010 de pe blogul oficial google, este specificat ca viteza de incarcare a site-ului este un factor in stabilirea pagerankului. Micsorarea timpului de incarcare a site-ului este importanta nu doar pentru proprietarii site-ului ci si pentru toti vizitatorii acestuia.
Site-urile care au un timp de raspuns mai mic tind sa fie pe placul utilizatorilor in defavoarea site-urilor ce reactioneaza lent. Totusi, nu doar viteza este importanta, ci si oferirea unui continut original si de calitate pentru a mentine atentia vizitatorilor.

Timpul de raspuns al site-ului influenteaza traficul pe site dar si rata de conversie.

Titand cont de informatiile de la punctul anterior, trebuie introdus si factorul de conversie pe care toate site-urile ce prezinta un produs sau un serviciu doresc sa il maximizeze. Daca site-ul este bine optimizat pe cuvintele cheie necesare produsului sau serviciului oferit, acesta poate fi clasat pe prima pozitie in rezultatele de cautare google. Insa, daca site-ul raspunde greu la comenzile date de catre vizitatori, cel mai probabil acestia vor cauta o alta varianta ce se incarca mai usor si este mai user friendly. Pierderea vizitatorilor din cauza timpului de incarcare rezulta si in pierderea potentialilor clienti.

Latime de banda si de transfer.

Stim cu totii ca latimea de banda a fost un factor important multi ani. Odata cu scaderea preturilor si marirea beneficiilor pentru pachetele de hosting latimea de banda a trecut pe planul secundar. Timpul scurt de incarcare a paginilor web insa, a devenit o necesitate, este stiut faptul ca daca o pagina web se incarca foarte greu, multi vizitatori parasesc acea pagina web. Pentru a avea o viteza de afisare cat mai mica a paginilor web pentru utilizatorii finali trebuie sa pastram toate imaginile la dimensiunea cea mai mica fara a strica calitatea imaginii. Provocarea intervine atunci cand se doreste mentinerea unui design de inalta calitate pastrand in acelasi timp o dimensiune mica a paginii web; echilibrul dintre aceste doua elemente este esential pentru optimizarea paginilor web.

Spatiul de stocare a datelor.

Chiar daca ofertele de hosting sunt din ce in ce mai bune, spatiul de stocare joaca inca un rol important pentru site-urile care se afla in continua expansiune. De exemplu, un site ce promoveaza arta prin imagini poate ajunge la un numar foarte mare de postari care vor ocupa un spatiu destul de mare.

Costuri reduse.

Prin imaginile bine optimizate, putem sa avem si cerinte mai mici de spatiu de stocare si latime de banda, prin urmare, costuri reduse de hosting.

Experienta vizitatorilor.

Vizitatorii se bucura de o experienta mai buna atunci cand timpul de incarcare al paginii este minim. Nimic nu irita vizitatorii mai mult decat sa fie nevoiti sa astepte incarcarea paginilor web ce contin nulte elemente grafice.

Acum ca stim de ce merita sa optimizam imaginile pentru web putem trece mai departe la trei pasi pentru o incarcare mai rapida si mai usoara a imaginilor pentru Web.

1. Compresarea imaginilor. Imaginile aglomerate si pline de culoare sunt mai greu de comprimat. Uneori folosirea imaginilor simple au un impact mai mare asupra vizitatorilor. Compresarea imaginilor fara pierderea calitatii acestora este una din cele mai practicate metode de optimizare.
2. Reducerea numarului de imagini separate. Mai putine imagini inseamna mai putine requesturi HTTP. Pentru fiecare imagine in parte trebuie deschisa si inchisa o cerere HTTP.
3. Alegeti formatul si setarile corecte de exportare al imaginilor.

Pasul 1. Editarea imaginilor.

Acest lucru nu este ceva ce se poate face intotdeauna, desigur. Insa, uneori, editarea imaginilor si aplicarea unor setari pot micsora din start dimensiunea fisierului fara a schimba foarte mult felul in care imaginea arata. De fapt, de multe ori imaginea va arata chiar mai bine. In acelasi timp majoritatea persoanelor nu vor observa nici o diferenta!

Pasul 2. Reducerea numarului de cereri HTTP.

Iata trei moduri de a reduce cantitatea de cereri HTTP pentru imagini.

Utilizarea sprite-urilor
Un Sprite este un fisier bitmap ce contine diverse elemente grafice, de obicei toate, pentru designul unei pagini web. Folosind proprietatile css de pozitionare, latime si inaltime putem afisa o singura imagine ca fundal mapand-ul exact pe pozitia unde se afla imaginea dorita in cadrul sprite-ului. Majoritatea site-urilor cu un trafic foarte mare folosesc aceasta varianta pentru a micsora numarul de cereri HTTP.

Integrarea imaginilor in format HTML sau CSS cu imagini inline.
O alta modalitate de a micsora numarul de cereri HTTP este generarea imaginilor folosind cod inline. Imaginile sunt integrate in HTML sau CSS, deci nu mai este nevoie de o noua cerere HTTP.

Evitarea utilizarii imaginilor cand este posibil.
Exista o multime de cazuri in care, site-urile nu au nevoie de imagini. Cu tehnologii, cum ar fi Webfonts, SVG, CSS3 (colturi rotunjite, degradeuri, box-shadow, text-shadow, etc), este mult mai usor sa creezi elemente grafice care sa atraga atentia chiar si fara folosirea imaginilor.

Pasul 3. Alegerea formatul de fisier si a setarilor potrivite

Aflarea formatului de imagine potrivit uneori mai mult o arta decat o stiinta. Pentru Web, putem alege intre JPEG, PNG si GIF. Exista mai multe optiuni, dar acestea nu sunt sustinute de catre toate browserele.

Desi exista multe formate diferite de imagini asa cum am spus si mai sus, toate imaginile pot fi impartite in doua categorii distincte de compresie: Lossless si Lossy. Compresia de date Lossless permite retelei mass-media publicarea imaginilor de calitate inalta in bannere publicitare, reviste, sau alte metode de publicitate fara pierderi de calitate sau informatii. In timp compresia Lossy poate duce la o pierdere de calitate si informatie insa are si o dimensiune potrivita pentru web.

JPEG (Lossy) sau PNG / GIF (Lossless)?

De obicei regula este: JPEG (Lossy) pentru materialul fotografic, gif / png (Lossless) pentru text si grafica. Daca imaginea dvs. are nevoie de transparente, formatul JPEG iese din discutie.

Totusi, recomand sa experimentati. De multe ori, experimentand cu setarile disponibile putem obtine fisiere de dimensiuni mai mici la o calitate mai buna.

Comprimare suplimentara

Exista, in plus, cateva modalitati suplimentare de a face fisierele exportate de Photoshop, Fireworks sau de alte software-uri similare chiar mai mici. Programe precum PNGout, PNGcrush, OptiPNG, AdvPNG, JPEGOtim, Jpegtran si Gifsicle fac o treaba excelenta cand vine vorba de stripuirea bitilor si comprimarea suplimentara fara a pierde din calitate.

In Concluzie

Daca urmarim acesti pasi, si facem aceste optimizari vom vedea ca rezultatele dau roade iar timpul petrecut cu optimizarea imaginilor a fost cu folos. Exista cazuri in care prin optimizarea imaginilor, dar nu numai, sa ajungi la o dimensiune cu 50% mai mica decat pagina initiala.
In final, paginile web bine optimizate vor avea un PageRank mai mare, un trafic mai bun, vizitatori multuliti de timpul de raspuns si, in concluzie, o rata de conversie mult mai mare.