Optimizarea site-urilor – Optimizarea imaginilor
Este cunoscut faptul ca timpul de incarcare al unui site are o importanta semnificativa in experienta de ansamblu a utilizatorului pe siteul respectiv. Studiile de piata arata ca, site-urile care nu reusesc sa se incarce in mai mult 5 secunde sunt de cele mai multe ori evitate de catre vizitatori.
Un motiv care determina incarcarea lenta a site-ului este reprezentat de imaginile prezente pe site (numarul, dimensiunea sau formtul lor). In continuare va voi arata ce puteti face pentru a optimiza imaginile care urmeaza a fi incluse pe site pentru a mari semnificativ viteza de incarcare a paginilor.
Pentru a optimiza imaginile folosite pe web softurile mai noi de editare, exemplu Photoshop, au o optiune numita “Salveaza pentu web”. Folosind acesta optiune se face o optimizare automata a calitatii, compresiei si respectiv a dimensiunii imaginii. Daca nu utilizati un soft special pentru editarea imaginilor, puteti folosi o unealta online de optimizare a imaginilor de la Dynamic Drive. Aceasta optimizeaza automat imaginile in format PNG, GIF sau JPEG.
Tipuri de imagini
Pe langa optimizarea imaginii un factor important este si alegerea corecta a tipului de imagine. De obicei tipul imaginilor folosite pe Internet este PNG, GIF sau JPEG. Urmeaza cateva proprietati pentru fiecare tip care sa va ajute sa alegeti corect in fiecare situatie.
PNG – A fost creat special pentru web cu scopul de a inlocui formatul GIF. Principalul avantaj fata de GIF este ca suporta culori pe 24-biti si transparenta alfa. Din nefericie nu toate browserele recunosc o parte din caracteristicile formatului PNG de aceea este recomandata utilizarea formatului PNG pentru imagini simple care necesita mai mult de 256 culori.
GIF – Este practic cel mai utilizat format de imagini in online in special datorita dimensiunilor sale mici, integrand imaginile cu un maxim de 256 culori. Este recomandat sa folositi acest format pentru logo-uri, butoane sau imagini simple care nu necesita un nivel inalt de detaliu. Este deasemenea un format des utilizat in imaginile care prezinta animatie.
JPEG – Acest format este folosit pentru imaginile mari, cu un inalt nivel de detaliu. Fotografiile sau imaginile color de obicei sunt afisate in acest format. Daca utilizati compresia pentru a reduce dimensiunile fisierului trebuie sa tineti minte ca, rata optima de compresie la acest format pentru a obtine rezultatele optime este de 50%.
Utilizati tag-urile „width” si „height”
Este foarte importanta utilizarea acestor doua tag-uri pentru imaginile din site-ul dvs. Cand utilizati tabele sau imagini, inaltimea (height) si latimea (width) trebuie sa fie mentionate. In caz contrar, la incarcarea paginii in browser, acesta va trebui sa afle singur cele doua proprietati, incarcand mai intai imaginea si ulterior restul paginii.
Un exemplu de cod pentru folosirea celor doua tag-uri ar fi:
<img id="imagine" height="230" width="480" src="http://www.domeniu.ro/test.png" alt="imagine de test" />
Atunci cand browserul stie dimensiunea imaginii, va sti si sa retina spatiul necesar alocat pentru imagine, deci in consecinta pagina se va incarca cursiv. Acest lucru contribuie semnificativ la minimizarea timpului de incarcare in pagina si la cresterea uzabilitatii. Practic in timp ce o parte din imagini inca se mai incarca, continutul paginii este deja afisat deci, vizitatorul poate sa citeasca si sa caute informatia dorita.
Cunoaste-ti si alte unelte online pentru optimizare imaginilor? Mentionati-le in comentarii.
Sursa imagine: Flickr
Etichete:dreamweaver, optimizare, pagina web, web, web site, website
Aboneaza-te la feed-ul RSS
Aboneaza-te prin e-mail
Urmareste @prosoftdesign pe Twitter
