Optimizarea imaginilor; efectul asupra SEO și al site-ului

SEO practic optimizare imagini cu squoosh
Optimizarea imaginilor cu Squoosh

Vă arăt cele mai frecvente greșeli ale posesorilor de site-uri în privința imaginilor. De ce este important SEO la fotografii. Și, de asemenea, ce înseamnă să folosești imagini neoptimizate asupra vizibilității unui site, asupra poziționării lui în motoarele de căutare.

Cele mai multe și mai importante corecții le puteți face chiar dvs. Dar, desigur, mai întâi trebuie să le înțelegeți, ceea ce își propune acest articol. Nu trebuie să aveți doctorat sau studii în străinătate, ca să aveți un site de succes este nevoie de bun simț tehnic. Să înțelegeți noțiunea de fișier, de SEO, editarea unei fotografii.

dimensiunea unui fișier de tip png
dimensiunea unui fișier de tip png, respectiv ocupă mult spațiu pentru o imagine cu dimensiuni modeste
SEO practic fisier de tip webp ocupă mai puțin spațiu desi imaginea are dimensiuni mai mari
fișier de tip webp ocupă mai puțin spațiu pe disc, deși imaginea are dimensiuni mai mari;

Dimensiunea fotografiei și rata de respingere

Exemplificările (imaginile) de mai jos sunt realizate pentru utilizatorii de site-uri în realizate wordpress. Dar informațiile sunt valabile pentru orice tip de site. Presupun însă că web designerii care lucrează doar în cod (HTML sau php) știu să le înțeleagă.

Principala piedică (sau stimulent) în dorința de a vizita un site este ușurința de utilizare a acestuia. Dacă acesta merge ușor și aveți acces facil la informații, dacă vizitați site-ul, se spune că aveți o experiență bună. În acest caz Google va observa că sunteți mulțumit și va decide că aveți o „rată de respingere scăzută”! Este ceva important pentru SEO…

Dacă însă, de exemplu, site-ul se încarcă greu (mai ales pe telefonul mobil) și în cele din urmă renunțați să mai așteptați, aceasta înseamnă că site-ul va primi o notă proastă. Respectiv va fi influențată (indirect) rata de respingerea a acestuia. Cu cât rata de respingere este mai mare, cu atât site-ul va fi plasat mai în spate la rezultatele căutărilor. Rata de respingere este o cifră, un coeficient, acesta exprimă cât de util este site-ul vizitatorului. Este evident că v-ați dori un coeficient cât mai mic. Ar înseamna că aveți un site bun. Dacă utilizatorul pleacă de pe site înainte de a vi se încărca tot conținutul, atunci cu siguranță „respingerea” este maximă.

De unde știți cât de mare este acest coeficient? În mod normal l-ați putea citi din rapoartele Google Analytics. Însă Google nu-l mai face public, iar cine se ocupă de SEO știe că rata este un criteriu de ranking. Rata de respingere este influențată și de numărul de click-uri pe care-l face un utilizator pe site, nu doar de dimensiunea imaginii. Influența acesteia din urmă, chiar dacă indirectă, este decisivă totuși.

» Mai multe despre ranking și rata de respingere

Bun, este limpede că viteza de încărcare a imaginii este un obiectiv ce trebuie urmărit la modul prioritar. Astfel, îmbunătățind viteza, vom avea și un SEO mai bun. Cum să facem să creștem viteza? Prin alegerea corectă a tipului de fișier și mărimea acestuia.

Tipurile de fișier folosite în paginile web

În momentul de față în paginile unui site sunt câteva tipuri de imagine. Ce tip folosiți dvs nu are importanță pentru SEO, contează cât de ușor se încarcă și ce atribute conține. Mai jos, aveți principalele tipuri și cu scurte descrieri ale acestora.

  • JPEG sau JPG, ambele denumiri sunt același lucru. Este un tip de fișier care suportă compresii bune. Ar trebui folosit pentru imagini cu culori multe, peisaje, portrete, tonuri și detalii… Probabil cel mai folosit în site-uri.
  • PNG este ideal pentru grafice, logo-uri, desene tehnice. Acolo unde nu aveți nevoie de tonuri, de degrade-uri, unde este nevoie de separare netă între culori. Dacă setați numărul de culori la strictul necesar vei obține un fișier cu dimensiuni mici. Remarcabil este că png-urile suportă transparența…
  • GIF-urile sunt imagini care sunt și ele ideale acolo unde nu aveți nevoie de multe culori, nici de tonuri ale acestora. Suportă transparența și sunt folosite foarte mult la desene, grafice, animații simple.
  • WEBP este un format mai nou. În multe privințe seamănă cu JPG-urile, potrivit pentru fotografii cu tonuri și detalii. Oferă însă o compresie mai bună. Nu este atât de cunoscut și nu toate browserele îl acceptă. Însă, din experiență spun, Chrome și Edge nu se împiedică de webp.

Repet, pentru SEO este neimportant ce tip de fișier se folosește, contează doar mărimea lui și atributele cu care este „dotat”.

Transformarea și optimizarea fișierelor de tip imagine

Dacă luăm o fotografie direct de pe telefon și o introducem în site am făcut un „fâs”! Imaginea are de obicei dimensiuni de ordinul a câțiva MB. Să o introduceți așa cum este în pagina web ar însemna o viteză foarte mică. În funcție și de conexiunea pe care o aveți, dacă sunteți pe telefonul mobil, s-ar putea (aproape sigur) ca utilizatorul să nu mai aștepte și să caute în altă parte. Pentru SEO ar fi ca o piatră de moară legată de gât.

Reducerea dimensiunilor, schimbarea formatului

Deși mie mi se pare simplu, am observat că pentru cei mai mulți nu este. Ideea de bază este să vă gândiți că dacă introduceți în site o imagine care are 1200 pixeli lățime iar ea este privită pe un telefon mobil cu un ecran de 400 pixeli, veți obține automat o scădere de viteză. O viteză cu atât mai mică de cât imaginea este mai mare! Iar difrența de calitate a imaginii nu o observați…

Reducerea dimensiunilor o faceți cu un soft specializat. Care vreți, cu care vă simțiți mai bine. Puteți alege de la software de genul Photoshop la chestii simple. Eu vă sugerez IrfanView, îl folosesc de vreo 20 de ani, face o mulțime de lucruri. Important este că reduce dimensiunea și schimbă formatul imaginii prin „Save as”. Dacă instalați plugin-urile veți observa că este un soft foarte deștept. Aveți o imagine de tip JPG și vă trebuie PNG. O salvați ca atare și gata.

Schimbarea denumirilor, parte din SEO

Deși nu mai este (de mult timp) un factor esențial adresa de URL a unui fișier din site, eu cred că încă are un rol de cunoaștere. Introducerea keywordului în numele de domeniu chiar este inutilă, vezi articolul cu SEO practic, dar la fișiere acesta reprezintă un indiciu care sugerează coținutul acestora.

De exemplu, o imagine pe care o primiți prin telefon și se numește „WhatsApp Image …” nu va spune nimic motorului de căutare. Dacă însă aceasta se numește „sticlă de parfum Coco Chanel.jpg” este deja altceva.

Prin tasta F2 la IrfanView dar și în Windows Explorer puteți schimba denumirea fișierelor.

O aplicație foarte interesantă și utilă celor care se ocupă de SEO și de optimizarea imaginilor este Squoosh. Exclusiv online, micșorează fișierul, schimbă formatul, o aplicație pe care eu o folosesc foarte mult.

Optimizarea imaginilor în Squoosh

În imaginea de deschidere observați că panoul de lucru este împărțit în două. În partea dreaptă aveți previzualizarea imaginii. Respectiv când credeți că e destul de comprimată (când arată deja urât!) vă opriți și o salvați. În caseta flotantă aveți setările instrumentelor de lucru.

Încărcarea imaginilor în browser. Atributul „Lazy Loading”

Nu mai știu unde am citit o statistică în care se spunea că oamenii nici nu se uită la vreo 30-40% din imaginile unei pagini. Asta înseamnă că e inutil să le încărcăm pe toate în browser! Presupunem că aveți o pagină cu vreo 25 de fotografii. Ce face un vizitator al site-ului dvs? O privește pe prima, a doua, a treia… dacă-i place se uită la toate. Sau abandonează și trece la altă galerie. În acest caz, dacă browserul dvs ar fi încărcat toate cele 25 de imagini iar utilizatorul nu ar fi văzut decât vreo cinci, înseamnă că am avut risipă! Că pagina s-a mișcat încet și a consumat inutil resurse! V-am spus mai sus ce înseamnă pentru SEO să se încarce lent o pagină…

Soluția la acest tip de problemă este ca browserul să încarce imaginea doar atunci când utilizatorul se află în apropierea fotografiei. Se numește încărcare întârziată. În codul HTML trebuie introdus atributul loading=”lazy”. Asta înseamnă că atunci când se ajunge în apropierea imaginii browserul o va încărca.

Pentru cei care nu lucrează în cod HTML ci în wordpress există și un plugin care face această treabă. Îl puteți vedea și încerca: LazyLoad.

Mai citiți și articolele de mai jos, se referă tot la optimizarea imaginilor…

» Optimizare SEO pentru fotografii

» SEO la fotografie; 1000 de cuvinte este deja banal

Despre Matei Bitea Articolele 207
Ofer servicii de optimizare SEO si locuiesc in Timisoara. De web design m-am apucat la sfârșitul anilor 90. Apoi, cam de prin 2004 „m-am tras” spre SEO. Sunt fost jurnalist. Așadar copywriting-ul, crearea de conținut, mi se potrivesc ca o mănușă. La fel, marketing digital, seamănă cu ce făceam noi ca să vindem ziarul... Acum sunt freelancer. Mă ocup de SEO și scriu site-urile altora. Doar asta fac...