De data aceasta va propun sa analizam elemente putin mai abstracte.
Chiar daca sunt mai tehnice (tipul fisierului, modul in care este inclus in codul html sau greutatea fisierului) toate sunt detalii care afecteaza experienta vizitatorului dupa cum voi explica mai jos si despre care oricine este implicat intr-o initiativa ebusiness ar trebui sa aiba cunostinta.
Sa incepem cu formatul fisierului care reprezinta butonul adauga in cos.
Exista 4 variante la magazinele analizate:
- Format GIF - 54.72% (29);
- Format JPG - 15.09% (8);
- Format Text (non-imagine) - 15.09% (8);
- Format PNG - 11.32% (6);
- Format CSS (non-imagine) - 3.77% (2) ;
Cateva explicatii pentru cei care nu sunt familiarizati cu termenii.
.gif, .jpg si .png sunt diferite modalitati de a salva o imagine pentru calculator. De fapt, sunt algoritmi diferiti in care este salvata informatia despre imaginea respectiva.
Acesti algoritmi dau si diferenta intre aceste tipuri de fisiere.
De ce este important pentru noi? Pentru ca fiecare tip de fisier este bun pentru ceva si nu este la fel de bun pentru altceva.
De exemplu, jpg se foloseste pentru imagini care includ multe culori. Iar .gif se foloseste pentru imaginile care nu includ multe culori, care au portiuni mari din aceeasi culoare. Iar .png se foloseste atunci cand este nevoie de transparenta de mai multe grade (ex. umbre)
Ce se intampla daca salvam imaginile invers (culori multe in .gif si culori putine in .jpg) ?
Rezultatul va fi de o calitate mai slaba si fisierul va fi mult mai greu (va avea mai multi KB) lucru care va afecta viteza de incarcare a paginii.
Fara sa fie un verdict pentru orice fel de buton, as spune ca, in general, butoanele Adauga in cos au destul de putine culori pe o suprafata destul de mica astfel incat varianta .gif devine varianta optima de salvare.
Astfel ajungem la analiza “greutatii” butoanelor Adauga in cos la magazinele romanesti. (excludem butoanele exclusiv text)
- 2 KB - 3 KB - 32.06%
- 1 KB - 2 KB - 22.64%
- peste 3 KB - 15.09%
- sub 1 KB - 13.21%
Asadar, cele mai multe butoane “cantaresc” intre 2 KB si 3 KB . Este o situatie normala. Aceasta este media.
Totusi, este bine sa verificati daca nu cumva puteti optimiza si ajunge sub 1 KB.
Top 3 cu butoane sub 1 KB :
1) 0.12 KB - www.comenzipc.ro
2) 0.14 KB - www.fisela.ro
3) 0.50 KB - www.fungift.ro
Pe ultimul loc la magazinele analizate se afla www.evomag.ro cu un buton .jpg de 23.21 KB .
Mihai, cred ca problema este tocmai faptul ca butonul este salvat .jpg in loc de .gif.
Am facut un exercitiu. L-am salvat eu in .gif .
Butonul original (.jpg) are 23.21KB iar butonul optimizat (.gif) are 2.09 KB, de 10 ori mai putin.
Imi puteti spune care este butonul original doar uitandu-va la butoanele de mai jos?
Va rog sa va uitati foarte de-aproape. Uitati-va imediat sub litere, sau intre carucior si text. Care arata mai bine?
Al doilea e mai bine? Da . Este cel salvat in .gif . 
Ultimul punct din analiza aceasta mai tehnica este modul in care este introdus butonul in pagina din punctul de vedere al codului html.
Deoarece aici nu exista sfaturi despre cum ar fi mai bine (cel putin nu din partea mea) am sa prezint doar statistica.
- CSS - 41.51% (22)
(definit ca imagine de backround pentru elemente)
- Tag IMG - 35.85% (19)
(stiti voi.. < img src= ….)
- Buton de formular - 22.64% (12)
( < input type=”image” )
N-a fost prea tehnic, nu ?
Pentru a fi la curent cu toate articolele viitoare din aceasta serie va invit sa va abonati:
O exemplificare foarte buna a celor de mai sus (tipul fisierului) este si caricatura de mai jos (sursa) :
(poanta este la grafica)
