Ceea ce veți învăța în această postare va fi un înainte și după blogul dvs. și site-ul dvs., credeți-mă. Mai ales în ceea ce privește viteza de încărcare a acestora.

Ți s-a întâmplat vreodată că ai intrat pe o pagină web sau într-un blog și te-ai plictisit să aștepți încărcarea tuturor imaginilor? Vă asigur că, personal, mi s-a întâmplat de mai multe ori.

Și din moment ce nu vreau să se întâmple același lucru cititorilor și clienților dvs., am pregătit acest tutorial astfel încât să știți cum să optimizați imaginile.

pentru

După cum v-am explicat, este o problemă să doriți să intrați pe un site web și să așteptați mult timp pentru ca toate elementele să fie încărcate pentru a începe să îl navigați.

Majoritatea utilizatorilor, inclusiv eu, plec înainte de a aștepta să se încarce totul (dacă timpul de așteptare este prea lung); cu ceea ce site-ul dvs. pierde vizite și clienți potențiali.

Dacă aveți un timp de încărcare bun pentru site-ul sau blogul dvs., nu numai că veți face clienții să se simtă mai atrași și să nu mai aibă nevoie să părăsească pagina, ci și, obțineți o poziție mai bună în Google. Și asta este foarte important.

Din acest motiv, este esențial ca, înainte de a încărca imaginile pe site-ul dvs. web, să le optimizați pentru aceasta. Optimizarea este, pur și simplu, încărcarea imaginilor la dimensiunea adecvată a site-ului dvs. web, astfel încât acestea să nu cântărească prea mult și astfel să își reducă timpul de încărcare.

Adică, imaginile pe care le faceți cu camera dvs. sau chiar cu telefonul mobil tind să aibă o dimensiune a pixelilor foarte mare. Mult mai mare decât lățimea paginii dvs. web. Deci, dacă le încărcați direct fără a le ajusta în prealabil la lățimea respectivă, adăugați greutate (și deci timp) la încărcarea site-ului dvs.

Acum, că știți ce este optimizarea imaginii și de ce aveți nevoie de ea, să începem tutorialul.

PASUL 1

Primul lucru pe care ar trebui să-l faci know este lățimea blogului dvs.. În cazul blogului nostru, acestea au 650px. Uită-te la care este al tău și notează-l, deoarece este cheia unei bune optimizări a imaginii.

PASUL 2

Selectați imaginea pe care doriți să o încărcați pe site-ul dvs. web și deschideți-o în Photoshop. După ce îl aveți, accesați Imagine -> Dimensiune imagine.

Veți vedea o fereastră plutitoare deschisă. Fii atent pentru că acum vine importantul.

Uită-te la rezoluția imaginii tale. Rezoluția recomandată pentru imaginile web variază între 75 și 150. Deci, dacă, ca în cazul meu, o aveți la 300, accesați acea casetă și scrieți 150.

Cu siguranță, după modificarea rezoluției, lățimea imaginii se va schimba. Chiar și așa, trebuie să vă asigurați că imaginea este lățimea dorită. Deci, în caseta în care aveți opțiunea de a o modifica, scrieți lățimea pixelilor pe care o are blogul dvs. După ce ați făcut-o, puteți face clic pe OK pentru a închide fereastra.

În această imagine las câmpurile de lățime marcate cu roșu (lăţime) și rezoluția (rezoluţie).

PASUL 3

Acum aveți imaginea la dimensiunea care vă interesează. Una dintre principalele erori ale imaginilor pentru web este că acestea nu sunt salvate ca atare, ci sunt salvate „al tun-tún” și asta ne face să adăugăm greutate inutilă.

Asa de, pentru a vă salva imaginea, urmați această cale: Fișier → Salvați pentru web. Din nou, se va deschide o fereastră cu multe opțiuni.

În acest moment puteți alege între mai multe opțiuni pentru a vă salva imaginea. Cele mai frecvente sunt următoarele:

  • JPEG: Este cel mai comun format de compresie a imaginii. Este întotdeauna folosit pentru fotografii, deoarece le comprimă foarte bine fără a-și pierde calitatea.
  • PNG: Este ideal atunci când avem icoane, sigle sau vectori fără fundal. Aceste fișiere cântăresc puțin mai mult, dar sunt foarte necesare atunci când vrem să salvăm ceva „cu un fundal transparent”.

În acest caz, din moment ce salvați fotografii, veți selecta opțiunea JPEG și în cadrul acestuia puteți juca cu calitatea sa. Cu cât are mai multă calitate, cu atât te va cântări mai mult (deși nu atât de mult cât te-a cântărit la început).

Iată un exemplu în care poți comparați cum variază aceeași imagine salvată la rezoluții diferite.

De îndată ce ați decis cu ce calitate doriți să o salvați, faceți clic pe „Salvare” și selectați unde doriți să o salvați.

Si asta e! Este atât de simplu și de rapid ca imaginile de pe blogul dvs. să se încarce mai repede, ceea ce face ca utilizatorii să nu fie nevoiți să aștepte să le vadă și fără a pierde calitatea. Fantastic, corect?

V-ați oprit vreodată să vă gândiți la importanța acestor mici detalii pentru blogul sau site-ul dvs. web? Cu siguranță de acum înainte aveți mult mai mult în minte, iar începând cu optimizarea imaginii este un bun punct de plecare.

Amintiți-vă că timpul înseamnă bani, și investește câteva secunde în ajustarea imaginilor la dimensiunea care le corespunde pe site-ul tău web, pe termen lung poate fi un mare avantaj pe care cititorii tăi îl vor aprecia.

Pentru a afla lățimea postării dvs., indiferent de platforma pe care o utilizați, puteți utiliza o extensie Chrome, numită Page Ruler, care funcționează ca o regulă.

Astfel, când îl instalați, veți putea măsura exact ceea ce ocupă postul dvs. Oricum, în funcție de șablonul pe care îl utilizați, puteți alege de obicei lățimea, deci ar trebui să îl personalizați după bunul plac și această problemă dispare.