Optimizați-vă imaginile și nu mai pierdeți timp

Potrivit HTTPArchive, dimensiunea medie a site-ului web aproape s-a dublat în 5 ani, de la 1 MB în 2014 la 2 MB în 2019. Sigur, accesul la Internet este mai rapid ca niciodată, dar, totuși, cum de site-urile web sunt atât de mari acum? Răspunsul constă parțial în activele multimedia în general și imaginile în special.

A trecut mult timp de când site-urile web nu mai sunt simple pagini de text. Acum sunt dinamice, pline de imagini, videoclipuri, GIF-uri... și dorim ca toate aceste elemente să arate frumos și crocante pe ecrane cu rezoluții uriașe.

Dacă site-ul tău se încarcă foarte lent și nu ți-ai optimizat niciodată imaginile, am o veste bună: astăzi vei afla ce poți face pentru a-ți accelera WordPress. Să vedem instrumentele pe care le puteți folosi pentru a îmbunătăți performanța site-ului dvs. web și pentru a preveni ca imaginile să împiedice experiența utilizatorilor dvs.

De ce este importantă optimizarea imaginii

Înainte de a explica diferitele metode disponibile pentru optimizarea activelor de imagine și accelerarea site-ului dvs., aș dori să petrec câteva minute pentru a vă convinge de importanța de a face acest lucru.

Imaginile au un impact uriaș în dimensiunea generală a unei pagini web

După cum spuneam la început, ponderea imaginilor de pe un site web reprezintă un procent important din total. De exemplu, luați în considerare această postare de blog: DevTips – Cum să împiedici WordPress să ghicească adresele URL. Acesta este un post destul de scurt, cu mai puțin de 400 de cuvinte, care oferă o soluție rapidă la o problemă clară.

Potrivit GTMetrix, încărcarea acestei postări folosește 850 KB de date. Dar de ce o postare atât de scurtă folosește atât de multe date? Ei bine, imaginile sunt parțial responsabile de această problemă: doar imaginea prezentată a postării cântărește mai mult de 200 KB, ceea ce reprezintă 25% din total.

Trafic mobil

Conform datelor găsite în statcounter, 52% din traficul web vine de pe dispozitive mobile și 45% de pe desktop. Acesta este motivul pentru care astăzi se pune atât de mult accent pe utilizarea modelelor receptive care funcționează bine pe ecrane mici.

După cum sigur ai experimentat și tu, conexiunea la internet pe mobil nu este întotdeauna grozavă (mai ales dacă faci naveta sau în metrou). Potrivit Statistia, în 2019 viteza medie este de aproximativ 14 Mbps. Prin urmare, dacă vrem să ne grăbim site-urile pe mobil, trebuie să le reducem cât mai mult greutatea, inclusiv pe cea a imaginilor lor.

Costuri de stocare și transfer de date

Un alt motiv pentru care ar trebui să vă faceți griji cu privire la utilizarea imaginilor cu dimensiunile adecvate sunt banii. Criteriile după care furnizorii de găzduire își oferă planurile includ cantitatea de spațiu pe disc utilizată de site-ul dvs. web și cantitatea de date pe care le trimiteți de pe serverele lor vizitatorilor dvs. Cu cât este mai mult spațiu pe disc folosit și cu cât sunt trimise mai multe date, cu atât plătiți mai mult.

Prin reducerea dimensiunii imaginilor dvs., veți reduce ambii factori și veți economisi niște bani în fiecare lună?

Acțiuni de optimizare a imaginii

Acum că știți de ce ar trebui să vă faceți griji cu privire la optimizarea imaginilor, să vedem ce puteți face pentru a vă accelera site-ul WordPress.

#1 Încărcați imagini corect scalate

Numărul de persoane care încarcă imagini scoase direct de pe noua lor cameră DSLR este surprinzătoare. Problema este că orice fotografie făcută cu o cameră DSLR este probabil prea mare și grea pentru un site web.

Primul lucru pe care trebuie să-l faceți este să reduceți imaginile la o dimensiune rezonabilă înainte de a le încărca pe site-ul dvs. web. De exemplu, pe site-ul nostru, cele mai mari imagini pe care le încărcăm de obicei sunt imaginile prezentate ale postărilor noastre. Am decis să limităm acele imagini la doar 1200x800px. În această altă postare am explicat o metodă de a scala și comprima rapid imaginile înainte de a le încărca.

# 2 Modificați tema pentru a genera miniaturi adecvate

Când încărcați o imagine în WordPress, WordPress generează mai multe miniaturi. Aceste miniaturi sunt definite de tema ta, deoarece tema ta este cea care știe când are nevoie de o versiune mai mare sau mai mică a unei imagini.

De exemplu, imaginile noastre prezentate au 1200x800px. Aceste dimensiuni funcționează grozav atunci când vizualizați postarea în sine:

ceea ce este clar prea mult pentru ceva de genul acesta:

De aceea, pentru acest caz particular, tema noastră înregistrează o nouă dimensiune de miniatură care este de numai 480x320px și este folosită în ecranul cu listă de postări.

Dacă credeți că tema dvs. nu generează miniaturi adecvate, vă recomand să citiți documentația WordPress pentru a ști cum să definiți dimensiunea unei miniaturi cu set_post_thumbnail_size sau chiar cum să definiți miniaturi suplimentare cu add_image_size .

Și, ca întotdeauna, dacă aveți nevoie de ajutor cu asta, spuneți-mă în secțiunea de comentarii de mai jos și voi fi bucuros să vă ajut (sau chiar să scriu o postare despre asta?)

# 3 Utilizați în mod inteligent dimensiunile imaginii

WordPress generează mai multe miniaturi ale imaginilor pe care le aveți în biblioteca dvs. media, astfel încât tema dvs. să poată folosi cea mai bună imagine în fiecare scenariu posibil. Dar aici vine partea interesantă: și tu poți folosi miniaturile atunci când inserezi imagini în paginile și postările tale.

Când inserați o imagine în postare, aruncați o privire pe bara laterală și alegeți dimensiunea care se potrivește cel mai bine nevoilor dvs.:

De exemplu, dacă veți pune o imagine îngustă și mică ca aceasta, atunci o imagine mică (300x200px) ar putea fi perfectă:

dar folosirea aceleiași miniaturi pentru o imagine mai mare dă rezultate îngrozitoare:

Mai bine folosiți o versiune cu mai multă rezoluție:

#4 Utilizați formatul de imagine adecvat

Există diferite formate de imagine, fiecare cu punctele sale forte și punctele slabe pentru comprimarea imaginilor. Cele mai utilizate formate sunt:

• PNG. Format de imagine excelent pentru partajarea capturilor de ecran care nu au nicio imagine pe ele, cum ar fi, de exemplu, o captură de ecran a editorului WordPress.
• JPG. Unul dintre cele mai răspândite formate din lume. Funcționează foarte bine cu aproape orice tip de fotografie, permițând rapoarte de compresie foarte mari. Totuși, nu este perfect: dacă fotografia are margini foarte ascuțite (de exemplu, dacă există text sau desene), va trebui să utilizați rate de compresie mai mici sau riscați ca imaginea să aibă artefacte urâte.
• GIF. Regele Internetului (și al platformelor de social media). Este un tip de format care permite animații. Sincer să fiu, cred că toate „GIF-urile” pe care le folosim acum sunt de fapt videoclipuri (scurte), care oferă rapoarte de compresie mai bune și o calitate mai bună...

# 5 Ștergeți imaginile neutilizate

Pe măsură ce trece timpul, este ușor să păstrezi pe site-ul tău WordPress multe imagini vechi pe care nimeni nu le folosește nicăieri. Dacă vrei să le ștergi rapid, în această postare Toni explică cum.

# 6 Activați încărcare leneră

Deci, imaginile vă încetinesc site-urile, nu? De ce nu spunem pur și simplu site-urilor web să nu încarce imagini decât dacă este absolut necesar? Asta ar accelera lucrurile, nu-i așa? Introduceți Lazy Loading.

Lazy Loading este o idee destul de simplă: o imagine nu va fi încărcată până nu ar trebui să fie vizibilă în browserul vizitatorului. De exemplu, dacă site-ul nostru web are o anumită imagine în subsol, de ce trebuie să ne obosim să o încărcăm înainte ca utilizatorul să ajungă la sfârșitul site-ului nostru? Așteptați până ajung acolo și, odată ce ajung, încărcați imaginea (și dacă nu o fac, salvați încărcarea imaginii!)

Există multe plugin-uri Lazy Loading pentru WordPress. Unii furnizori de găzduire precum SiteGround event includ această opțiune în instalările lor. Doar căutați opțiunea în tabloul de bord și activați-o.

Sper că postarea de astăzi vă ajută să vă îmbunătățiți puțin viteza de încărcare web. Există puține lucruri care sunt atât de ușor de reparat și care oferă rezultate atât de bune. Noroc și noroc!

Imagine prezentată a echipei Icons8 pe Unsplash.