Dec 7 2009

Optimizarea pozelor pentru web

Pentru ca un website sa se incarce rapid in browser si sa nu ocupe mult spatiu pe server, trebuie sa-i optimizati cam toate pozele din alcatuirea sa. Spre exemplu, sa zicem ca o poza oarecare ocupa, neoptimizata, 7.44 Mb. Dupa o ajustare a dimensiunii si optimizare, ea va ocupa sub 1 Mb spatiu pe server.
Optimizarea se face de obicei cu ajutorul unui program grafic de editare a pozelor, in cazul de fata cel mai folosit, Adobe Photoshop, varianta CS 3, mai exact.
Deci, sa presupunem ca ati instalat programul, dar nu ati mai lucrat in el niciodata. Odata deschis, va afisa ceva de genul:

Pentru a deschide poza pe care doriti sa o optimizati, dati un simplu dublu-click oriunde pe suprafata gri din mijloc. Va aparea o fereastra de browse

Selectati poza si apasati butonul “open”. Odata poza deschisa, vom trece la optimizare, dar nu inainte de a o aduce la niste dimensiuni mai normale pentru un website, sa zicem ca o vom face de 700 pixeli latime – inaltimea se va stabili proportional de catre program. Pentru asta vom tasta Alt+Ctrl+I (sau click dreapta pe banda albastra de deasupra pozei)

Scriem la “width” 700, apoi ne asiguram ca unitatea de masura este fixata pe pixeli si ca am bifat casuta “Constrain proportions” , pentru o scalare proportionala a imaginii. Abia dupa ce am dat ok la aceasta fereastra, putem sa incepem optimizarea propriu zisa (aceasta redimensionare este necesara pentru ca altfel programul se va bloca la optimizare, poza fiind foarte mare).
Fereastra de optimizare se poate accesa in doua feluri: ori din meniul “File” si apoi apasati “Save for Web & Devices”, ori direct, cu ajutorul unui shortcut putin mai complicat, si anume Shift+Ctrl+Alt+S.

In aceasta fereastra trebuie sa va asigurati ca ati selectat tipul extensiei cu care vreti sa se salveze poza – JPEG, PNG sau GIF. La inceput recomand sa va “jucati” cu formatul JPEG, care necesita mai putine setari decat celelalte formate. Deci selecteti JPEG, bifati casuta “Optimized”, dati calitatea la 60 si apoi apasati “save”. Va aparea fereastra de browse si veti puta salva poza oriunde doriti.
Atentie! Daca aveti o poza cu spatii in titlu (nume poza.jpg – de exemplu), cand salvati pentru web CS3-ul o va transforma in nume_poza.jpg . Asigurati-va ca folositi pe site aceasta varianta, pentru ca altfel browser-ul nu va afisa imaginea deloc.
Cam atat, momentan. In viitor voi reveni si cu explicatii despre cum se optimizeaza si celelalte formate (PNG si GIF).


?>