Hai sa vorbim: (+40) 724.228.998 | hello@dolphinsolutions.ro

Optimizeaza imaginile pentru web folosind Photoshop

Daca data trecuta am vorbit despre cum se configureaza W3 Total Cache pentru a avea un site mai rapid, acum a venit randul imaginilor. De ce trebuie sa optimizam imaginile pentru web?
Obtinem o mai buna pozitionare in SERP si marim viteza de incarcare a siteului.

Descarcarea scripturilor, foilor de stil, aplicatiilor flash si a imaginilor au cel mai mare impact asupra timpului in care este incarcat siteul. Aproximativ 80% din timp este necesar elementelor statice enumerate mai sus. Restul de 20% este folosit pentru redarea html, php, query-uri catre baza de date.

1. Optimizeaza imaginile in Photoshop inainte de a le urca pe site

Optimizarea imaginilor in Photoshop ar putea sa iti sune complicat. In realitate se face in 2 pasi simpli:
A. Reduci rezolutia imaginii la dimensiunea necesara pentru siteul tau.
Cel mai des imaginile sunt folosite pentru a le atasa articolelor. O rezolutie de 640×480 ar fi suficienta. Nu lasa browserul sau vreun script sa faca asta in locul tau pentru ca va incetini siteul.
Din meniul Photoshop alegi Image -> Image Size… (shortcut Alt+Ctrl+I) si in fereastra de dialog adaugi latimea imaginii, bifezi Constrain proportions si Resample Image: Bicubic Sharper (best for reduction)
B. Salveaza imaginea in modul corect
Din meniul File – Save for Web & Devices se va deschide o fereastra de dialog pentru a salva imaginea in formatul si la calitatea dorita.
Imaginea de mai jos ocupa 337Kb inainte de optimizare.

imagine-standard

PNG – 640x360px, dimensiune 337kb | sursa foto: http://www.hdpaperwall.com

Dupa optimizare a ajuns la 36,76K. Ti se pare ca a pierdut din calitate?

imagine-optimizata

JPG – 600x338px, dimensiune 37kb | sursa foto: http://www.hdpaperwall.com

Cum se face:

  • Imaginea trebuie salvata in format JPEG. Doar daca ai nevoie sa pastrezi fundalul transparent, o salvezi PNG.
  • Quality (calitatea) poate fi undeva intre 50 si 60, si o reglezi in functie de imagine, de culorile folosite.
  • Bifeaza Progressive

In modul Progressive browserul va incarca imaginea completa deodata dar la prima incarcare va aparea pixelata. Calitatea se imbunatateste pe masura incarcarii, in cateva zecimi de secunda fiind redata imaginea originala. Pentru mai multe informatii si un video poti vizita pagina aceasta progressive jpegs

optimizare-photoshop

Photoshop – Save for web and devices

2. Nu micsora imaginile prin HTML sau scripturi

Folosesti thumbnail-uri in widget-ul din sidebar? Ai un plugin pentru a arata vizitatorilor articole similare? Incarca pe site o a 2a imagine de dimensiuni mai mici care sa fie incarcata in thumbnail.

3. Foloseste in mod corespunzator tag-urile html pentru imagini

  • Specifica dimensiunea fiecarei imagini, prin width si height;
  • Adauga atributele alt si title fiecarei imagini.

Specificand dimensiunea imaginii, latime si inaltime, ajuti browserul sa redea mai repede pagina. Acesta incarca textul si lasa liber spatiul necesar unde va fi incarcata imaginea.

Atributele alt si title au rol in optimizarea SEO. In primul rand obtii trafic de vizitatori, de exemplu de pe Google Images. In al 2lea rand crawlerul va considera pagina SEO friendly si o va plasa mai sus in SERP.
Evita keyword stuffing, in schimb adauga un titlu descriptiv care sa contina cuvantul cheie principal pentru care incerci sa optimizezi pagina.
Atributul alt este folosit pentru accesibilitate pentru browserele sau dispozitivele mobile care nu redau imaginile. De asemenea informeaza crawlerul ce anume reprezinta imaginea.
Exemplu: <img title="rasarit de soare in constanta" alt="fotografie rasarit soare" src="http://numesite.ro/rasarit-soare.jpg" width="640" height="480" />

4. Optimizeaza numele fisierului

Ai gasit o imagine pe net, o descarci in calculator, o optimizezi urmand pasii de mai sus si apoi o incarci pe siteul tau. Chiar daca numele imaginii e de genul 12635_3d_dsc134.jpg. Total gresit.
Schimba numele fisierului astfel incat sa contina cuvantul cheie. optimizare-imagini.jpg e mult mai bine din punct de vedere SEO, decat 12635_3d_dsc134.jpg

Optimizeaza imaginile pentru web folosind Photoshop 4.00/5 (80.00%) 1 vot[uri]
MENIU