Cum să optimizați imaginile pentru a îmbunătăți viteza paginii și SEO a site-ului dvs

Publicat: 2022-02-07

O greșeală comună pe care am văzut-o când mă uit la paginile web live și în prezent elaborate pentru strategia lor SEO SaaS este că imaginile sunt slab optimizate pentru sănătatea și viteza site-ului în general. Cu toții am auzit citatul „O imagine valorează cât o mie de cuvinte”. Chiar dacă este un clișeu, este adevărat și poate merită și mai mult.

Imaginile ne captează atenția și ne ajută să ne raportăm la ceea ce vedem. Ei construiesc o poveste și tind să facă o impresie mult mai durabilă decât doar un corp mare de text. Mulți oameni adoră să obțină imagini de stoc de pe site-uri de fotografii de stoc fără drepturi de autor precum Unsplash.

Google acordă prioritate paginilor rapide. Ignorând pașii necesari pentru optimizarea imaginii, te pregătești pentru o luptă dificilă. Numărul de imagini adăugate într-o pagină afectează direct viteza de încărcare. Cu cât o pagină are mai multe imagini, cu atât viteza de încărcare va deveni mai mică. În acest ghid, vom vizita cei 5 pași pe care îi parcurg atunci când optimizez imaginile pentru viteza paginii și motoarele de căutare.

Decuparea și redimensionarea imaginii

În mod implicit, fotografia pe care am descărcat-o este foarte mare și de înaltă calitate. Decizia cât de mare sau ce rezoluție ar trebui să fie această imagine este determinată de dimensiunea cea mai mare pe care va fi vizualizată imaginea dvs. Oamenii cred că au o imagine de cea mai bună calitate pentru a-și impresiona clienții sau chiar pe ei înșiși, dar nu își dau seama de acest impact foarte negativ. Când decideți ce dimensiune ar trebui să aibă imaginea, gândiți-vă la cea mai mare dimensiune la care va fi vizualizată imaginea.

Nu aveți nevoie de dimensiunile imaginii de 6000 x 6000 pixeli dacă va fi folosită doar pentru o imagine de profil mică sau o fotografie în cap care va fi văzută la 300 x 300 pixeli. Din experiența mea, constat că cea mai mare imagine de pe pagină va fi imaginea eroului din partea de sus. O dimensiune sigură în care să rămâneți în același timp menținând calitatea ar fi să o faceți dimensiunea standard de înaltă definiție de 1920 x 1080 pixeli.

Sfaturi și trucuri: dacă o imagine banner pentru un blog sau o pagină web apare de o calitate puțin mai scăzută decât ați dori să fie, luați în considerare aplicarea unei suprapuneri transparente. Acest lucru îl va face să pară că face parte din design și va face orice text mai ușor de citit.

Mai jos, folosesc Figma pentru a-mi redimensiona și decupa imaginea. Procesul este foarte ușor, deoarece tot ce trebuie să faceți este să trageți și să plasați, apoi să schimbați imaginea după bunul plac. Iată două comenzi de care aveți nevoie pentru a vă edita corect imaginea folosind Figma pe Windows.

Shift + Drag - Va scala întreaga imagine în sus sau în jos, păstrând același raport.
Ctrl + Trage - Se va schimba doar înălțimea sau lungimea fără a întinde imaginea.

Exportarea ca diferite tipuri de fișiere

Este important să vă gândiți ce tip de format de fișier veți dori să utilizați. Multe formate pot servi diferitelor scopuri. Fiecare vine cu propriul set de argumente pro și contra, în funcție de punctul de vedere al utilizatorului. Iată doar câteva dintre cele mai comune pe care le văd de obicei:

PNG - Bun pentru modele grafice sau imagini de care aveți nevoie pentru a vedea micile detalii ale. Aceasta vine cu prețul unei dimensiuni mai mari a fișierului.
JPEG - Pentru fotografierea în viață a oamenilor și a locațiilor. Poate fi comprimat mult mai mult, dar pierdeți puțin mai multe informații, deoarece nu aveți nevoie de atât de multe detalii în acestea.
SVG - Excelent pentru pictograme și logo-uri, deoarece acestea se pot scala în sus și în jos fără a pierde calitatea. Acest lucru poate funcționa numai pentru fișierele imagine create.
WEBP - O versiune mai nouă a imaginilor care poate înlocui PNG și JPEG. WEBP are o calitate a imaginii similară cu ambele, putând economisi 25%-40% în spațiu. Singurul dezavantaj este că, în prezent, browserul Apple Safari nu acceptă acest lucru, așa că veți avea nevoie de copii de rezervă JPEG sau PNG pentru a încărca.
GIF - Acestea sunt clipuri de videoclipuri sau animații care tind să fie redate în buclă. Acestea sunt bune pentru a surprinde o scenă sau pentru a arăta cum poate funcționa interfața unui produs. Acest articol oferă câteva exemple bune despre cum pot fi utilizate. Deoarece sunt o secvență animată de imagini, acestea vor avea de obicei o dimensiune mai mare a fișierului în comparație cu o singură imagine.

Îmi place să folosesc JPEG ori de câte ori pot, deoarece necesită cele mai puține date, dar aici folosesc PNG-uri pentru a oferi puțin mai multă claritate capturilor de ecran. Ca și în cazul WEBP, ar putea exista formate și mai noi, așa că este o practică optimă să cercetați continuu modul în care Google le vede și le clasifică pe fiecare care este disponibil pentru a găsi cel mai rapid și cel mai bun răspuns pentru pagina dvs. web. Iată un link către un ghid mai aprofundat despre cele mai populare tipuri de imagini.

Utilizați un compresor de imagine

Următorul pas ar fi să încercați să obțineți fișierul pe care îl aveți cât mai mic posibil prin comprimarea și reducerea dimensiunii fișierului. Mergând la un compresor de imagini și procesând imaginea, uneori putem face ca imaginea noastră să fie cu până la 90% mai mică în dimensiunea fișierului. Un instrument cu adevărat util pe care îmi place să îl folosesc se numește Compressor. Folosind acest instrument, puteți comprima până la 50 de imagini pe zi în planul său gratuit.

Aici iau imaginea pe care am exportat-o și o trag direct în secțiunea de plasare a imaginii. După câteva secunde, noua imagine este gata de descărcat și este în jur de mai puțin de o zecime din dimensiunea originală. De asemenea, puteți importa mai multe imagini și să le descărcați pe toate simultan, așa cum se arată cu opțiunea din partea de jos.

„Leneș” vs „Nerăbdător” vă încarcă imaginile

Acum că aveți imaginea în formatul corect și comprimată la dimensiunea corectă, s-ar putea să vă gândiți că sunteți bine, dar mai sunt câteva lucruri pe care să vă asigurați că le faceți. În o mulțime de șabloane și site-uri web, viteza de încărcare a imaginii este setată să se încarce în mod implicit al browserului, ceea ce poate face ca toate imaginile dvs. de pe pagină să se încarce în același timp. Soluția este să încărcați leneș imaginea.

Încărcarea „lenenă” amână încărcarea elementului până când acesta este vizibil pe pagină. Când aveți mai mult de câteva imagini, acest lucru poate îmbunătăți performanța site-ului. Opusul acestui lucru este încărcarea „Eager”, care încarcă elementul imediat. Acest lucru se aliniază de obicei cu setarea web implicită, deoarece nu există nicio preferință pentru imaginea care ar trebui să se încarce prima sau ultima.

Iată un exemplu în editorul de blog HubSpot. După ce navigăm la opțiunea avansată pentru imaginea inserată, putem vedea că putem seta setarea de încărcare a acesteia. Selectați „Leneș” și apăsați Aplicare. Imaginea apare acum ori de câte ori utilizatorul derulează mult mai aproape de ea și reduce acei timpi prețioși de încărcare.

Nu uitați să adăugați text alternativ

Ultimul lucru pe care trebuie să îl vizitați este să includeți text alternativ în imaginile dvs. Este posibil ca acest lucru să nu afecteze viteza de încărcare a paginii dvs., dar este întotdeauna important să luați în considerare și să adăugați. Când lăsați secțiunea goală, pierdeți multe oportunități de a vă crește clasamentul SERP-urilor.

Un lucru important de remarcat este că textul alternativ explică „de ce” imaginii în legătură cu conținutul. Este indexat de google și citit cu voce tare prin text to speech pentru persoanele cu deficiențe de vedere. Dacă introduceți un singur cuvânt cheie în imagine care nu explică ce se întâmplă, atunci aceasta ar putea să nu fie cea mai bună abordare.

Aici am adăugat textul alternativ în imagine. Mă bazez în jurul expresiei de sănătate a vitezei paginii SEO. În loc să includeți doar cuvântul cheie, explicați cum sau ce este acțiunea în imagine. Am decis să elaborez folosind expresia „Verificarea sănătății vitezei paginii SEO folosind grafice”.

Acest lucru este mult mai informativ cu privire la ceea ce ar putea fi imaginea pentru indexarea Google și oferă o mai mare accesibilitate persoanelor cu deficiențe de vedere.

Să revizuim pașii pentru crearea/optimizarea imaginilor:

Trageți imaginea într-un editor de imagini precum Figma pentru a decupa și a redimensiona.
Exportați-o ca tip de imagine adecvat (PNG, JPEG, SVG, WEBP etc.)
Du-l la un site de compresoare de imagini, cum ar fi Compressor sau Image Resizer Online
Inserați imaginea comprimată în conținut ca încărcare leneșă.
Adăugați text alternativ care descrie imaginile de pe pagina dvs.
Acum ai imaginea perfectă pentru site-ul tău!
Consultați Google Search Console pentru a verifica creșterile de performanță.

Urmați acești pași și veți fi pe drumul cel bun pentru menținerea și optimizarea imaginilor pentru SEO și accelerarea vitezei paginii, creând o experiență de utilizator fantastică!